1. CSS的定义
- CSS,全称“Cascading Style Sheets”,用于设置HTML标签的样式,美化我们的网页。
2. CSS的基本结构
选择符 { 样式属性: 样式属性值; }
- css样式表主要有三种使用类型:
- 行内样式(内嵌样式)
<h1 style="color:red;"></h1>
- 内部样式(内联样式)
<style>h1{color:red;}</style>
- 外部样式(外联样式)
- 链接样式
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
- 导入式
<style> @import url("css文件路径"); </style>
3. CSS选择器
1. 元素选择器
- 元素选择器指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式
- 例如:
p {color: red;}
2. ID选择器
- ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式
- 根据元素ID来选择元素,具有唯一性,这意味着同一id在同一文档页面中只能出现一次
- 给元素定义一个id的属性,
id="id名"
,然后使用"#"进行标识- 例如:
#red {color: red;}
3. 类选择器
类选择器使用类名来选择元素,前提是要在HTML中,给元素定义一个class的属性,
class="类名"
,然后使用"."进行标识,后面紧跟类名
.red {color: red;}
选择所有类名为red的元素p.red {color: red;}
选择所有类名为red的p元素.min.red {color: red;}
选择所有类名同时包含min和red的元素4. 属性选择器
- 简单属性选择
[title]{color:red;}
选择有title属性的元素
p[title]{color:red;}
选择有title属性的p元素
a[href][title]{color:red;}
选择同时有href和title属性的a元素
- 根据具体属性值选择
p[title="a"]{color:red;}
选择title="a"
的p元素
a[href="ww"][title="a"]{color:red;}
选择href="ww"
并且title="a"
的a元素
- 根据部分属性值选择
[id^="a"]{color:red;}
选择id值以"a"开头的元素(id=“aa”,id=“asw”…)
[id$="ab"]{color:red;}
选择id值以"ab"结尾的元素(id=“aab”,id=“aswab”…)
[id*="ab"]{color:red;}
选择id值含有"ab"字段的元素(id=“aabc”,id=“swab”…)
[class~="ab"]{color:red;}
选择class值含有空格分隔的"ab"字段的元素(class=“ab tt”,class=“ab”…)
[id~="ab"]{color:red;}
选择id值等于"ab"或含有"ab-"字段的元素(id=“ab”,id=“ab-s”…)5. 派生选择器
- 群组选择器,
div,p,a{color:red;}
- 后代选择器,
div p{color:red;}
选择div容器中的所有p元素- 子元素选择器,
div>p{color:red;}
选择div元素子一级(向内一层)的所有p元素- 相邻兄弟选择器,
div+p{color:red;}
选择div元素紧邻的一个p元素(div和p之间不能有元素)div~p{color:red;}
选择div元素之后的所有同级p元素6. 伪类选择器
伪类名称对大小写不敏感(a:link,a:LINK,a:Link都可生效)
状态伪类 描述 :link a:link, 链接未访问时的样式 :visited a:visited, 链接已访问时的样式 :hover a:hover, 鼠标移动到链接上时的样式 :active a:active, 链接选定时(鼠标按下时)的样式 :focus input:focus, input聚焦时的样式
结构化伪类 描述 :not div:not§, 选择div中除了p的其他元素 :first-child p:first-child, 选择同级第一个并且为p的元素 :last-child p:last-child, 选择同级最后一个并且为p的元素 :first-of-type p:first-of-type, 选择同级第一个p元素 :last-of-type p:last-of-type, 选择同级最后一个p元素 :nth-child(an+b) a,b为任意整数,在计算时n从0开始依次计算;
在父元素中所有元素索引从上到下从1开始,所以an+b>=1的时候才有效;
特殊字段:nth-child(odd)等于nth-child(2n+1),nth-child(even)等于nth-child(2n);
p:nth-child(n+2),选择父元素下索引符合n+2的元素并且是p元素(即选择第2,3,4…个元素并且是p元素):nth-last-child(an+b) a,b为任意整数,在计算时n从0开始依次计算;
在父元素中所有元素索引从下到上从1开始,所以an+b>=1的时候才有效;
特殊字段:nth-last-child(odd)等于nth-last-child(2n+1),nth-last-child(even)等于nth-last-child(2n);
p:nth-last-child(n+2),选择父元素下索引倒数第n+2的元素并且是p元素:nth-of-type(an+b) a,b为任意整数,在计算时n从0开始依次计算;
在父元素中对应类型元素索引从上到下从1开始,所以an+b>=1的时候才有效;
特殊字段:nth-of-type(odd)等于nth-of-type(2n+1),nth-of-type(even)等于nth-of-type(2n);
p:nth-of-type(n+2),选择父元素下第n+2个p元素:nth-last-of-type(an+b) a,b为任意整数,在计算时n从0开始依次计算;
在父元素中对应类型元素索引从下到上从1开始,所以an+b>=1的时候才有效;
特殊字段:nth-last-of-type(odd)等于nth-last-of-type(2n+1),nth-last-of-type(even)等于nth-last-of-type(2n);
p:nth-last-of-type(n+2),选择父元素下倒数第n+2个p元素:only-child p:only-child, 选择父元素下只有一个元素并且是p元素,选中这个p元素 :only-of-type p:only-of-type, 选择父元素下只有一个p元素,选中这个p元素 :target p:target, 选择被锚点选中后的p元素
(<p id="m1"></p><a href="#m1"></a>
当点击a标签移动到p时,p:target生效):empty p:empty, 选择没有子元素的p元素(另外p元素中也不能有文本,也不能有空格)
表单相关伪类 描述 :checked 适用于单选框和复选框 <input type="radio" /><input type="checkbox" />
;
input:checked, 选择被选中的单选框和复选框:default :default, 选择页面打开时处于默认状态的元素;
例如,下拉框的默认选中option:default{}<select><option selected></option></select>
,单选框或复选框的默认选中<input type="checkbox" checked/>
:disabled :disabled, 选择已禁用的元素,包括input、select以及button元素 :enabled :enabled, 选择已启用的元素(不包括无法禁用启用的元素) :in-range 作用于能指定区间值的元素;
例如,<input type="number" min="1" max="10" value="8"/>
input:in-range,选择元素的值在指定区间内的input元素:out-of-range 作用于能指定区间值的元素;
例如,<input type="number" min="1" max="10" value="18"/>
input:out-of-range,选择元素的值不在指定区间内的input元素:indeterminate 1. 可用于匹配复选框的半选状态, <input type="checkbox" indeterminate />
2. 可用于匹配所有name属性值一样但都没有被选中的单选框,或者单选框元素没有设置name属性值也没有被选中的时候也会匹配
3. progress没有设置值的时候,会匹配:indeterminate伪类,<progress min="1" max="100"></progress>
:valid :valid, 选择拥有有效值的表单元素(空值有时候也是有效值,除非加上required) :invalid :invalid, 选择拥有无效值的表单元素 :optional :optional, 用于选择可选(不带 required 属性的表单元素被定义为可选)的表单元素 :required :required, 选择拥有required必填属性的表单元素 :read-only :read-only, 选择拥有readonly只读属性的表单元素 :read-write 选择可编辑类别的元素;
1. 不是只读且未禁用的<input>
元素(任何类型)。这意味着它们既没有设置readonly属性,也没有设置disabled属性
2. 既不是只读也不是禁用的<textarea>
元素(类似于input)
3. 不是<input>
或<textarea>
,但具有contenteditable属性集的任何其他元素
语言相关伪类 描述 :lang(zh/en) p:lang(en), 选择本身属于en语言的p元素
父级元素设置lang属性后,子元素就属于对应语言
lang属性不能应用的元素:br,iframe,script,base,param:dir(ltr/rtl) p:dir(ltr), 选择元素中文本方向性为ltr的p元素
此为实验性技术,不稳定
其他伪类 描述 :root :root, 选择文档中的根元素(等效于html元素) :fullscreen :fullscreen, 选择当前全屏显示的元素(可以通过js让某个元素全屏)
el.requestFullscreen()
7. 伪元素选择器
伪元素选择器 描述 ::first-letter p::first-letter, p元素中文本的首个字符的样式 ::first-line p::first-line, p元素中文本的第一行的样式 ::before p::before, 在p元素内容前面插入一个元素,并设置这个元素的样式 ::after p::after, 在p元素内容后面插入一个元素,并设置这个元素的样式 ::selection p::selection, 设置p元素中光标选中的文本的样式
4. CSS选择器优先级
1. 基础选择器的优先级
1.1
*{color:red;}
通用选择器,权重为0;
1.2p{color:red;}
元素选择器,权重为1;
1.3p::before{content:'';}
伪元素选择器,权重为1(因为其他选择器无法选中伪元素,所以伪元素选择器一般无法被覆盖);
1.4.red{color:red;}
类选择器,权重为10;
1.5[title]{color:red;}
属性选择器,权重为10;
1.6:first-child{color:red;}
伪类选择器,权重为10;
1.7#red{color:red;}
ID选择器,权重为100;
1.8<p style="color:red;"></p>
行内样式,权重为1000;
1.9p{color:red !important;}
!important,权重为10000(优先级提升为最高);
- !important>行内样式>ID选择器>类选择器/属性选择器/伪类选择器>元素选择器/伪元素选择器>通配符选择器>继承选择器
2. 复杂选择器的优先级
- 多个选择器组合时,通过权值相加获得最终优先级
2.1div p{}
,1+1=2
2.2div+p{}
,1+1=2
2.3div p+h1{}
,1+1+1=3
2.4div .red{}
,1+10=11
2.5div.red{}
,1+10=11
2.6div [title]{}
,1+10=11
2.7div p.red{}
,1+1+10=12
2.8div:first-child{}
,1+10=11
2.9#min:not(p){}
,100+10+1=1113. 就近原则
- 当选择器权重一样时,通常是谁在最后谁优先
<style>.m1{color:red;}.m2{color:blue;}</style>
,m2在最后,m2优先于m1;
5. CSS字体单位
- px,是相对于屏幕分辨率来计算的长度,1px的长度取决于屏幕分辨率大小;
- em,是相对于父级元素字体大小来计算的长度,如果父元素字体大小为16px,那当前元素1em=16px;
- rem,是相对于根元素(html元素)字体大小来计算的长度,如果根元素字体大小为16px,那当前元素1rem=16px;
6. CSS大小单位
- 视窗(Viewport)是你的浏览器实际显示内容的区域,即不包括工具栏和任务栏的网页可视区域大小。
- vw,是视窗宽度的百分比,1vw相当于视窗宽度的1%;
- vh,是视窗高度的百分比,1vw相当于视窗高度的1%;
- vmin,是当前 vw 和 vh 中较小的一个值;
- vmax,是当前 vw 和 vh 中较大的一个值;
- 移动页面开发时,横屏与竖屏下的vw和vh会有变化,所以使用vmin和vmax在横屏与竖屏下的长度一致;
7. CSS盒子模型
- 所谓盒子模型,即是将网页布局中的元素(能设置宽高的元素)进行拟物化的比喻。
- 一个盒子是由四个部分组成:
- 内容–content,盒子内的物件
- 内间距–padding,物件和盒子的距离
- 边框–border,盒子壁
- 外间距–margin,盒子和其它物体的距离
- 标准盒子模型,元素的width,height只指盒子内容content的宽高(width=内容content的宽)
- 标准盒子模型,盒子总宽度 = margin + border + padding + width
- IE盒子模型,元素的width,height指盒子边框border和内间距padding和内容content(width = border + padding + content)
- IE盒子模型,盒子总宽度 = margin + width