CSS3基础

Lán2022年10月29日

HTML

HTML
CSS

大约 13 分钟

CSS3基础

CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语，CSS3是CSS的最新版本,增加了大量的样式、动画、3D特效和移动端特性等。CSS使样式和结构分离,样式和结构不用“杂精着写”，而是彼此分开:HTML就负责结构，CSS负责样式，HTML和CSS怎么结合呢?“选择器”就是两者的纽带，CSS就是样式的“清单”,要书写合适的选择器,然后把指定元素的样式“一条一条罗列”出来。CSS没有加减乘除、与或非、循环、选择、判断,CSS不是“编程”,就是筒单直接的罗列样式

	语言	功能
结构层	HTML	搭建结构、放置部件、描述语义
样式层	CSS	美化页面、实现布局
行为层	JavaScript	实现交互效果、数据收发、表单验证等

内嵌式

在<head></head>标签对中,书写<style></style>标签对,里面书写CSS语句。

外链式

可以将CSS单独存为.css文件,然后使用<link>标签引入它

<link rel="stylesheet" href="style.css">

导入式

导入式是最不常见的样式表导入方法，使用导入式引入的样式表,不会等待css文件加载完毕,而是会立即渲染HTML结构,所以页面会有几秒中的“素面朝天”的时间

  <style>
      @import url(style.css);
  </style>

行内式

样式可以直接通过style属性写在标签身上，行内式牺性了样式表的批量设置样式的能力,只能给一个标签设置样式,所以不常用

  <h1 style="color: red;">标题</h1>

CSS3基本语法

  h1 {
      /* 设置字体颜色 */
      color: red;
  }

  .title {
      color: blue;
  }

CSS3的注释式/**/

CSS3选择器

传统CSS2.1选择器

标签选择器和id选择器
class选择器
复合选择器
伪类

CSS3新增选择器

元素关系选择器
序号选择器
属性选择器
CSS3新增伪类
伪元素

层叠性和选择器权重计算

标签选择器

标签选择器也称元素选择器、类型选择器,它直接使用元素的标签名当做选择器,将选择页面上所有该种标签，标签选择器将选择页面上所有该种标签,无论这个标签所处位置的深浅，标签选择器“覆盖面”非常大,所以通常用于标签的初始化

标签可以有id属性,是这个标签的唯一标识，id的名称只能由字母、数字、下划线、短横构成,不能以数字开头,字母区分大小写,但习惯上一般为小写字母，同一个页面上不能有相同id的标签

  <h1 id="title">标题</h1>

CSS选择器可以使用井号#前缀,选择指定id的标签

  #title {
        background-color: bisque;
  }

class选择器

class属性表示“类名”，类名的命名规范和id的命名规范相同，使用点.前缀选择指定class的标签，多个标签可以为相同类名，同一个标签可以同时属于多个类，类名用空格隔开，多个类有相同属性的与标签指定的顺序无关，和style书写顺序有关

  <style>
    .warning {
        color: red;
    }
  </style>

  <p class="warning">我是段类</p>

原子类

在做网页项目前,可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类

  <style>
    .fs12 {
        font-size: 12px;
    }
    .fs16 {
        font-size: 16px;
    }
    .fs24 {
        font-size: 24px;
    }
    .color-red {
        color: red;
    }
    .color-blue {
        color: blue;
    }
   </style>

复合选择器

选择器名称	示例	意义
后代选择器	.box .spec	选择类名为box的标签内部的类名为spec的标签
交集选择器	li.spec	选择即是li标签，也属于spec类的标签
并集选择器	ul，ol	选择所有ul和ol标签

CSS选择器中,使用空格表示“后代”，后代选择器可以有很多空格，隔开好几代。并集选择器也叫作分组选择器,逗号表示分组。选择器可以任何搭配、结合,从而形成复合选择器,我们必须要能一目了然的看出选择器代表的含义。

伪类

伪类是添加到选择器的描述性词语,指定要选择的元素的特殊状态,超级链接拥有4个特殊状态

伪类	意义
a:link	没有被访问的超级链接
a:visited	已经被访问过的超级链接
a:hover	正被鼠标悬停的超级链接
a:active	正被激活的超级链接（按下按键但是还没有松开按键）

a标签的伪类书写,要按照“爱恨准则“的顺序,否则会有伪类不生效“LOVE HATE”
:link => :visited => :hover => :active

元素关系选择器

名称	举例	意义
子选择器	div>p	div的子标签p
相邻兄弟选择器	img+p	图片后面紧跟着的段落将被选中
通用兄弟选择器	p~span	P元素之后的所有同层级span元素

当使用>符号分隔两个元素时,它只会匹配那些作为第一个元素的直接后代元素,即两个标签为父子关系，后代选择器不一定限制是子元素。
相邻兄弟选择器(+)介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中。
通用兄弟选择器(~),a~b选择a元素之后所有同层级b元素。

序号选择器

举例	意义
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(3)	第3个子元素
:nth-of-type(3)	第3个某类型子元素
:nth-last-child(3)	倒数第3个子元素
:nth-last-of-type(3)	倒数第3个棣类型子元素

:nth-child()可以写成an+b的形式,表示从b开始每a个选一个,注意不能写为b+an， 2n+1等价于odd,表示奇数，2n等价于even,表示偶数

  .box p:nth-child(3n+2){
    color: green;
  }

属性选择器

举例	意义
img[alt]	选择有alt属性的img标签
img[alt="故宫"]	选择alt属性是故宫的img标签
img[alt^="扬京"]	选择alt属性以北京开头的img标签
img[alt$"夜景"]	选择alt属性以夜景结尾的img标签
img[alt+*="美"]	选择有a1t属性中含有美字的img标签
img[alt~="手机拍摄"]	选择有alt属性中有空格隔开的手机拍摄字样的img标签
img[alt	="参赛作品"]

CSS3新增伪类

伪类	意义
:empty	选择宇标签
:focus	选择当前获得焦点的表单元素
:enabled	选择当前有效的表单元素
:disabled	选择当前无效的表单元素
:checked	选择当前已经勾选的单选按钮或者复选框
:root	选择根元素,即<html>标签

伪元素

CSS3新增了“伪元素”特性,顾名思义,表示虚拟动态创建的元素。伪元素用双冒号表示,IE8可以兼容单冒号

::brefore和::after
::before创建一个伪元素,其将成为匹配选中的元素的第一个子元素,必须设置content属性表示其中的内容
::after创建一个伪元素,其将成为匹配选中的元素的最后一个子元素,必须设置content属性表示其中的内容

  a::before {
    content: "★";
  }

::selection CSS伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）

  .box::selection {
    background-color: red;
    color: blue;
  }

::first-letter会选中某元素中(必须是块级元素)第一行的第一个字母
::first-line会选中某元素中(必须是块级元素)第一行的全部文字

.box::first-letter {
  font-size: 50px;
}
.box::first-line {
  /* 下划线 */
  text-decoration: underline;
}

层叠性和选取权重计算

CSS全名叫做 "层叠式样式表",层叠性是它很重要的性质
层叠性:多个选择器可以同时作用于同一个标签,效果叠加

id权重>class权重>标签权重

复杂选择器可以通过(id的个数,class的个数,标签的个数)的形式,计算权重

如果我们需要将某个选择器的某条属性提升权重,可以在属性后面写!important

  .spec {
    color: blue !important;
  }

CSS3文本和字体属性

color属性可设置文本内容的前景色
color属性主要可以用英语单词、十六进制、rgb()、rgba()等表示法
十六进制表示法是所有设计软件中都通用的颜色表示法,设计师给我们的设计图上面标注的颜色,通常为十六进制表示
如果颜色值是#aabbcc的形式,可以简写为#abc
黑色是#000,白色是#fff,常见的灰色有#ccc、#333、#2f2f2f等
颜色也可以用rgba()表示法,最后一个参数表示透明度,介于0到1之间,0表示纯透明,1表示纯实心,rgba()表示法从IE9开始兼容

  color: rgba(255,0,0,.65);

font-size属性用来设置字号,单位通常为px。还有en、rem单位。网页文字正文字号通常是16px,浏览器最小支持10px字号

  font-size: 30px;

font-weight属性设置字体的粗细程度,通常就用normal和bold两个值

font-sty1e属性设置字体的倾斜

示例	意义
font-style:normal;	取消倾斜,比如可以把天生倾斜的i,em等标签设置为不倾斜
font-style:italic;	设置为倾斜字体
font-style:oblique;	设置为倾斜字体(用常规字体模拟,不常用)

text-decoration属性用于设置文本的修饰线外观的(下划线、删除线)

示例	意义
text-decoration:none;	没有修饰线
text-decoration:underline;	下划线
text-decoration:line-through;	删除线

font-family属性用于设置字体

  font-family: "微软雅黑";

字体可以是列表形式,一般英语字体放到前面,后面的字体是前面的字体的"后备"字体,中文字体也可以称呼它们的英语名字

  font-family: serif, "Times New Roman","微软雅黑";
  font-family: serif, "Times New Roman","Microsoft Yahei";

字体通常必须是用户计算机中已经安装好的字体,所以一般来说设置为微软雅黑和宋体较多,设置成其他字体较少
如何设置为用户电脑中没有的字体呢?那就必须自己定义新字体,这就需要我们有字体文件,用户加载网页的时候,会同时下载这些字体文件
字体文件根据操作系统和浏览器不同,有eot、woff2、woff、ttf、svg文件格式,需要同时有这5种文件
当我们拥有字体文件之后,就可以用@font-face定义字体
阿里巴巴提供了一套免费商用授权的普惠字体,网址https://www.iconfont.cn/webfont

段落和行相关属性

text-indent属性定义首行文本内容之前的缩进量,缩进两个字符应该写作

text-indent: 2em;

line-height属性用于定义行高,line-heigh属性的单位可以是以px为单位的数值,line-heigh属性也可以是没有单位的数值,表示字号的倍数,这是最推荐的写法,line-heigh属性也可以是百分数,表示字号的倍数

line-height:38px;
line-height:1.5;
line-height:150%;

设置行高-盒子高度,即可实现单行文本垂直居中,设置text-align:center,即可实现文本水平居中

font属性可以用来作为font-style,font-weight,font-size,line-height和font-family属性的合写

font:28px/1.5 Arial, "微软雅黑";
font:italic bold 28px/1.5 Arial, "微软雅黑";

继承性

文本相关的属性普遍具有继承性,只需要给祖先标签设置,即可在后代所有标签中生效

color
font-开头的
list-开头的
text-开头的
line-开头的

因为文字相关属性有继承性,所以通常会设置body标签的字号、颜色、行高等,这样就能当做整个网页的默认样式了

就近原则

在继承的情况下,选择器权重计算失效,而是"就近原则"

盒模型

所有HTML标签都可以看成矩形盒子,由width、height、padding、border构成,称为“盒模型”
盒子的总宽度=width+左有padding+左右border
盒子的总高度=height+上下padding+上下border
width属性表示盒子内容的宽度，width属性的单位通常是px,移动端开发也会涉及百分数、rem等单位，当块级元素(div、h系列、li等)没有设置width属性时,它将自动撑满,但这并不意味着width可以继承。
height属性表示盒子内容的高度，height属性的单位通常是px,移动端开发也会涉及百分数、rem等单位，盒子的height属性如果不设置,它将自动被其内容撑开,如果没有内容,则height默认是0。
padding属性如果用四个数值以空格隔开进行设置,分别表示上、右、下、左的padding，顺时针。
padding属性如果用三个数值以空格隔开进行设置,分别表示上、左有、下的padding。 padding属性如果用二个数值以空格隔开进行设置,分别表示上下、左右的padding。
坚直方向的margin有塌陷现象:小的margin会塌陷到大的margin中,从而margin不叠加,只以大值为准。
一些元素(比如body、ul、p等)都有默认的margin,在开始制作网页的时候,要将他们清除。使用通配符选择器，但是通配符选择器有效率问题。

  * {
        margin: 0；
        padding: 0；
  }
  body, ul, p {
        margin: 0;
        padding: 0;
  }

将盒子左右两边的margin都设置为auto,盒子将水平居中

  .box {
        margin: 0 auto; /* 上下是0，左右自动 */
  }

盒子的垂直居中,需要使用绝对定位技术实现

将盒子添加了box-sizing:border-box;之后,盒子的width、height数字就表示盒子实际占有的宽高(不含margin)了,即padding、border变为“内缩”的,不再“外扩”。
box-sizing属性大量应用于移动网页制作中,因为它结合百分比布局、弹性布局等非常好用,在PC页面开发中使用较少。

行内元素和块级元素

display属性类型	是否能并排显示	是否能设置宽高	当不设置width属性时	举例
块级元素	否	是	width自动撑满	div、section、header、h系列、li、ul等
行内元素	是	否	width自动收缩	a、span、em、b、u、i等

img和表单元素是特殊的行内块,它们既能够设置宽度高度,也能够并排显示。

使用display:block;即可将元素转为块级元素

使用display:inline;即可将元素转为行内元素,将元素转为行内元素的应用不多见

使用display:inline-block;即可将元素转为行内块

使用display:none;可以将元素隐藏,元素将彻底放弃位置,如同没有写它的标签一样
使用visibility:hidden;可以也可以将元素隐藏,但是元素不放弃自己的位置

CSS3基础

# CSS3基础

# CSS3基本语法

# CSS3选择器

# 标签选择器

# class选择器

# 复合选择器

# 伪类

# 元素关系选择器

# 序号选择器

# 属性选择器

# CSS3新增伪类

# 伪元素

# 层叠性和选取权重计算

# CSS3文本和字体属性

# 段落和行相关属性

# 继承性

# 盒模型

# 行内元素和块级元素

CSS3基础

CSS3基本语法

CSS3选择器

标签选择器

class选择器

复合选择器

伪类

元素关系选择器

序号选择器

属性选择器

CSS3新增伪类

伪元素

层叠性和选取权重计算

CSS3文本和字体属性

段落和行相关属性

继承性

盒模型

行内元素和块级元素