CSS选择器、CSS属性
css的固定格式：
<head>
<style type="text/css">
这里写css的代码
key:value;
</style>
</head>
注意点：
style写在head中间，type="text/css"可以不用写，默认就是这个。
CSS属性
文字相关属性
规定文字样式、粗细、大小、字体的属性
font-style:normal、italic；//样式；快捷键：fs+tab、fsn+tab、fsi+tab
font-weight:normal、blod、bloder、数值;//粗细;快捷键：fw+tab
font-size:数值，要带单位//快捷键：fs+tab
font-family:"楷体"
font:italic bold 10px "楷体"
【italic bold可以省略，或者交换顺序】
【size和family不可以省略，且size在famil之前】
1、字体不存在用户电脑上时：
不处理时，使用用户电脑系统默认字体
处理：font-family:“不存在的字体”,"备选字体"；--设置备选字体，可设置多个备选字体
2、一串字符串既有中文，又有英文时，如何设置两种字体
英文字体是中文字体的子集。【意思是：英文字体不能处理中文，中文字体可以处理英文】
文本属性
文本装饰、文本对齐，文本缩进的属性
文本装饰-文字的下划线，中划线等
text-decoration:underline
text-decoration:overline
text-decoration:linethrougth
text-decoration:none
文本对齐：
text-align:left
text-align:right
text-align:center
文本缩进：
text-indent:2em;//（单位是em，一个em是一个文字的宽度）
颜色属性
color:red;
color:rgb(255,0,0);//rgb(255,0,0,1)
color:#FF0000;//#F00
CSS标签
标签选择器
格式：
p{
font:20px,"楷体"
}
标签选择器选中的是页面中所有的该标签
id选择器
作用：根据指定的id名称找到对应的标签，然后设置属性。（标签选择器选中的是全部的同类标签）
第一步：给需要设置的标签设置id，
第二步：
#id名{//一定要有#
key:value;
}
注意：
1、id在同一页面是唯一的
2、id名是有规范的，只能是字母，数字和下划线，不能使用数字开头，不能使用HTML的标签名
3、如果仅仅是为了设置样式，不需要使用id，而是使用类选择器，id是留给js使用的。
类选择器
根据指定的类名称找到对应的标签，然后设置属性
第一步：给需要设置的标签设置className，
第二步：
.id名{//一定要有.
key:value;
}
注意：
1、className是可以重复的
2、className名是有规范的，只能是字母，数字和下划线，不能使用数字开头，不能使用标签名
3、如果仅仅是为了设置样式，不需要使用id，而是使用类选择器，id是留给js使用的。
4、同一个HTML变迁可以有多个classname
<p className="类名1 类名2">
id选择器和class选择器对比
1、id使用“,”class使用#
2、class相当于人名，所以同一个页面上的HTML标签可以有一样的className；
id相当于身份证，所以同一个页面上的HTML标签不可以有一样的id；
3、class相当于人名，所以，一个HTML标签可以有多个Class
id相当于身份证，所以，一个HTML标签只能有一个id
4、一般情况下设置样式，使用class；如果需要js配合，使用id
后代选择器
格式：
先祖 后代{
}
先祖位置可以是HTML标签，可以是class名，可以是id
后代位置可以是HTML标签，可以是class名，可以是id
可以随意组合
div p{
}
#red p{
}
.red p{
}
div #red{
}
#red .red{
}
.red .red{
}
子代选择器
只会查找直接子元素
格式：
父类>子类{
}
后代选择器和子选择器的对比
相同点
1、都可以使用HTML标签、id名、class名
不同点
1、后代使用空格，子使用>
2、后代可以选取指定标签的所有特定标签，包括子、孙；而子只能选取指定标签的特定子标签
交集选择器
定义：两个选择器相交的部分
格式：
选择器1选择器2{
}
选择器1和选择器2之间没有任何符号，没有空格，没有>
并集选择器
选择器1和选择器2之间有逗号。
兄弟选择器-相邻和通用
相邻：选择器1+选择器2，给紧跟着选择器1后面的选择器2设置样式
通用：选择器1~选择器2，给选择器1后面的所有选择器2设置样式
序选择器
CSS3中新增的选择器最具代表性的就是序选择器
1.同级别的第几个
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签【n的值可以是数值，可以是“odd”、“even”,也可以是表达式，比如xn+y】
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
注意点: 不区分类型
2.同类型的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签
属性选择器
| [attribute] | [target] | 选择带有 target 属性所有元素。 | 2 |
| [attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |
| [attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |
| [attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 | 3 |
| [[attribute=value] 选择器") | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 | 3 |
| [attribute=value*] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 | 3 |
1、属性的取值是以什么开头的
[attribute|=value]----------------CSS2
[attribute^=value]--------CSS3
优先使用CSS3的。
2、属性的取值是以什么结尾的
[attribute$=value]
3、属性的取值是否包含某个特性的值的
[attribute*=value]
[attribute~=value]
通配符选择器
*{
}
网友评论