CSS的选择器与属性
属性
文字属性
规定文字样式的属性
font-style(fs)
font-weight(fw)
font-size(fz)注意:"px"
font-family(ff)注意:汉字要带引号------补充:设置备选字体(包括中英文分别设置字体)
补充:文字属性缩写(注意省略及顺序:size和family不能省略且要置于尾部)
文本属性
文本装饰属性
text-decoration:
line-through(tdl)
underline(tdu)
overline(tdo)
none(td)(常用于去掉a标签下划线)
文本水平对齐属性
text-align:
文本缩进属性
text-indent:2em;(ti2e)
颜色属性
color:值;
取值:
- 英文
- rgb
- rgba
- #FF0000(十六进制)
+#F00(十六进制缩写)
选择器
标签选择器
- 格式 :
标签名称{
属性:值;
}
id选择器
先设id,再设属性
- 格式:
#id名称{
属性:值;
}
tips:在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id一般留给js使用的
类选择器
先设类(class),再设属性
- 格式:
.类名{
属性:值;
}
tips:类名就是专门用来给CSS设置样式的
在HTML中每个标签可以同时绑定多个类名
格式:
<标签名称 class="类名1 类名2 ...">
错误的写法:
<p class="para1" class="para2">
后代选择器
- 格式:
标签名称1 标签名称2{
属性:值;
}
tips: - 后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
- 后代选择器可以通过空格一直延续下去
子元素选择器
- 格式:
标签名称1>标签名称2{
属性:值;
}
tips: - 子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
- 子元素选择器可以通过>符号一直延续下去
交集选择器
- 格式:
选择器1选择器2{
属性:值;
}
注意: - 无空格
并集选择器
- 格式:
选择器1,选择器2{
属性:值;
}
兄弟选择器(同级关系)
相邻兄弟选择器(css2)
- 格式:
选择器1+选择器2{
属性:值;
}
通用兄弟选择器(css3)
- 格式:
选择器1~选择器2{
属性:值;
}
序选择器(个数选择器)--为css3新增的选择器中最具代表性
- :first-child
- :first-of-type
- :last-child
- :last-of-type
- :nth-child(n)
- :nth-of-type(n)
- :nth-last-child
- :nth-last-of-type
- :only-child
- :only-of-type
- :nth-child(odd/even)
- :nth-of-type(odd/even)
- :nth-child(xn+y)
- :nth-of-type(xn+y)
属性选择器
- [attribute]
- [attribute=value]
-最常见的应用场景, 就是用于区分input属性
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
- 属性的取值是以什么开头的
[attribute|=value] CSS2
[attribute^=value] CSS3
两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开 - 属性的取值是以什么结尾的
[attribute$=value] CSS3 - 属性的取值是否包含某个特定的值得
[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到, 无论有没有被隔开 - 通配符选择器
