Part.1 CSS基础

1. CSS的定义

  • CSS,全称“Cascading Style Sheets”，用于设置HTML标签的样式，美化我们的网页。

2. CSS的基本结构

  • 选择符 { 样式属性: 样式属性值; }
  • css样式表主要有三种使用类型：
  1. 行内样式（内嵌样式）<h1 style="color:red;"></h1>
  2. 内部样式（内联样式）<style>h1{color:red;}</style>
  3. 外部样式（外联样式）
  • 链接样式<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="类名"，然后使用"."进行标识，后面紧跟类名

  1. .red {color: red;}选择所有类名为red的元素
  2. p.red {color: red;}选择所有类名为red的p元素
  3. .min.red {color: red;}选择所有类名同时包含min和red的元素

4. 属性选择器

  1. 简单属性选择

[title]{color:red;}选择有title属性的元素
p[title]{color:red;}选择有title属性的p元素
a[href][title]{color:red;}选择同时有href和title属性的a元素

  1. 根据具体属性值选择

p[title="a"]{color:red;}选择title="a"的p元素
a[href="ww"][title="a"]{color:red;}选择href="ww"并且title="a"的a元素

  1. 根据部分属性值选择

[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. 派生选择器

  1. 群组选择器，div,p,a{color:red;}
  2. 后代选择器，div p{color:red;}选择div容器中的所有p元素
  3. 子元素选择器，div>p{color:red;}选择div元素子一级(向内一层)的所有p元素
  4. 相邻兄弟选择器，
  • 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(p), 选择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.2 p{color:red;}元素选择器，权重为1；
1.3 p::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.9 p{color:red !important;}!important，权重为10000(优先级提升为最高)；

  • !important>行内样式>ID选择器>类选择器/属性选择器/伪类选择器>元素选择器/伪元素选择器>通配符选择器>继承选择器

2. 复杂选择器的优先级

  • 多个选择器组合时，通过权值相加获得最终优先级
    2.1 div p{}，1+1=2
    2.2 div+p{}，1+1=2
    2.3 div p+h1{}，1+1+1=3
    2.4 div .red{}，1+10=11
    2.5 div.red{}，1+10=11
    2.6 div [title]{}，1+10=11
    2.7 div p.red{}，1+1+10=12
    2.8 div:first-child{}，1+10=11
    2.9 #min:not(p){}，100+10+1=111

3. 就近原则

  • 当选择器权重一样时，通常是谁在最后谁优先
  • <style>.m1{color:red;}.m2{color:blue;}</style>，m2在最后，m2优先于m1；

5. CSS字体单位

  1. px，是相对于屏幕分辨率来计算的长度，1px的长度取决于屏幕分辨率大小;
  2. em，是相对于父级元素字体大小来计算的长度，如果父元素字体大小为16px，那当前元素1em=16px;
  3. rem，是相对于根元素(html元素)字体大小来计算的长度，如果根元素字体大小为16px，那当前元素1rem=16px;

6. CSS大小单位

  • 视窗(Viewport)是你的浏览器实际显示内容的区域，即不包括工具栏和任务栏的网页可视区域大小。
  1. vw，是视窗宽度的百分比，1vw相当于视窗宽度的1%;
  2. vh，是视窗高度的百分比，1vw相当于视窗高度的1%;
  3. vmin，是当前 vw 和 vh 中较小的一个值;
  4. vmax，是当前 vw 和 vh 中较大的一个值;
  • 移动页面开发时，横屏与竖屏下的vw和vh会有变化，所以使用vmin和vmax在横屏与竖屏下的长度一致；

7. CSS盒子模型

  • 所谓盒子模型，即是将网页布局中的元素（能设置宽高的元素）进行拟物化的比喻。
  • 一个盒子是由四个部分组成：
  1. 内容--content，盒子内的物件
  2. 内间距--padding，物件和盒子的距离
  3. 边框--border，盒子壁
  4. 外间距--margin，盒子和其它物体的距离
    image
  • 标准盒子模型，元素的width,height只指盒子内容content的宽高(width=内容content的宽)
  • 标准盒子模型，盒子总宽度 = margin + border + padding + width
  • IE盒子模型，元素的width,height指盒子边框border和内间距padding和内容content(width = border + padding + content)
  • IE盒子模型，盒子总宽度 = margin + width
posted @ 2023-05-17 17:58  ALL|ONE  阅读(10)  评论(0)  编辑  收藏  举报