第三节：CSS 核心基础-CSDN博客

本文链接：https://blog.csdn.net/qq_41952539/article/details/107784293

引言：

CSS 以 HTML 为基础，提供了丰富的功能，如：字体、颜色、背景的控制及整体的排版等，而且还可以针对不同的浏览器设置不同的样式

第一课时：CSS3 入门

主流浏览器的私有属性

内核类型	相关浏览器的私有属性	私有前缀
Trident	IE8 / IE9 / IE10	-ms
Webkit	谷歌（Chrome）/ Safari	-webkit
Gecko	火狐（Firefox）	-moz
Blink	Opera	-o

注意：

运用 CSS 私有属性时，要遵从一定的书写顺序，即先写私有的 CSS3 属性，在写标准的 CSS3 属性

当 CSS3 属性成为标准属性，并被主流浏览器的最新版兼容时，就可以省略私有的 CSS3 属性

第二课时：CSS3 核心基础

2.2.1 CSS 样式规则

选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

注意：

CSS 样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将 “选择器、属性和值” 都采用小写的方式
多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号
- ```
p {font-famliy: "Times New Roman"; }
```
在编写代码时，为了提高代码的可读性，通常会加上 CSS 注释
- ```
/* 这是注释，不会在浏览器页面显示 */
```
在 CSS 代码中，空格是不被解析的，花括号及分号前后的空格可有可无，可以利用空格、Tab键来对代码进行格式化，提高可读性
- ```
p {
    /* 定义字体大小 */
    font-size: 24px;
    /* 定义字体颜色 */
    color: red;
}
```

2.2.2 引入 CSS 样式表

标记样式的 3种引用方式

行内式

样式写在HTML标签里，利用style属性引入

语法格式：
<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>


<h2 style="font-size: 36px; color: red;"> </h2>

内联式

style 标签用于为 HTML 文档定义样式信息，位于头部标记中，并用

   语法格式：
   <style 属性="属性值">
   	选择器 {
           属性1:属性值1;
           属性2:属性值2;
           属性3:属性值3;
       }
   </style>
   
   
   <style type="text/css">
       h2{color:red;}
   </style>

链入式

链入式是将所有的样式放在一个或多个以 .css 为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到 HTML 文档中

语法格式：
<link href="css文件路径" type="text/css" rel="stylesheet" 属性="属性值" />


<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/javascript" href="style.js" />

属性名	常用属性值	描述
href	URL	指定引用外部文档的地址
rel	stylesheet	指定当前文档与引用外部文档的关系，该属性值通常为stylesheet，表示定义一个外部样式表
type	text/css	引用外部文档的类型为CSS样式表
type	text/javascript	引用外部文档的类型为JavaScript脚本

解释：

href：定义所有链接外部样式表文件的 URL，相对路径、绝对路径都可
type：定义所链接文档的类型，在这里需要指定为 “text/css”，表示链接的外部文件为 CSS 样式表
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为 “stylesheet”，表示被链接的文档是一个样式表文件

2.2.4 CSS 基础选择器

要想将 CSS 样式应用于特定的 HTML 元素，首先要找到该目标元素

在 CSS 中，执行这一任务的样式规则部分被称为选择器

CSS 基础选择器有：标记选择器、类选择器、id 选择器、通配符选择器、标签指定式选择器、后代选择器和并集选择器

标记选择器
标记选择器是指用 HTML 标记名称作为选择器，按标记名称分类，为页面中某一类标记制定统一的 CSS 样式

优缺点：
- 标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时也是最大的缺点，不能设计差异化样式
```
语法格式：
标记名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }


h2 {font-size: 36px; color: red; }
```
类选择器
类选择器使用 “.” 进行标识，后面紧跟类名

类名即为 HTML 元素的 class 属性值，大多数 HTML 元素都可以定义 class 属性
- 类名第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符
优缺点：
- 类选择器最大的优势是可以为元素对象定义单独或相同的样式
```
语法格式：
.类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }


<head>
    <style type="text/css">
        .title {
            font-size: 36px;
        }
    </style>
</head>
<body>
    <h3 class="title"> 标题 </h3>
</body>
```

id 选择器

id 选择器使用 “#” 进行标识，后面紧跟 id名

id 名即为 HTML 元素的 id 属性值，大多数 HTML 元素都可以定义 id 属性

优缺点：

元素的 id 值是为的，只能对应于文档中某一个具体的元素

语法格式：
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }


<head>
    <style type="text/css">
        #title {
            font-size: 36px;
        }
    </style>
</head>
<body>
    <h3 id="title"> 标题 </h3>
</body>

通配符选择器
通配符选择器用 " * " 号标识，它是所有选择器中作用范围最广的，能匹配页面中所有的元素

优缺点：
- 实际开发中不建议使用通配符选择器，因为它设置的样式对所有 HTML 标记都生效，不管是否需要该样式，这样反而降低了代码的执行速度
```
* {
    /* 清空外边距 */
    margin: 0;
    /* 清空内边距 */
    padding: 0;
}
```

标签指定式选择器

标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为 class 选择器或 id 选择器，两个选择器之间不能有空格

语法格式：
标记名.类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标记名#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }


<head>
    <style type="text/css">
        h3 {
            font-size: 36px;
        }
		h3.title {
            font-size: 42px;
        }
    </style>
</head>
<body>
    <h3> 普通标题 </h3>
    <h3 class="title"> 类标题 </h3>
</body>

后代选择器

后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔

当标记发生嵌套时，内层标记就成为了外层标记的后代

后代选择器不限于使用两个元素，可以一直嵌套标记，只需要加上空格即可
```
<head>
    <style type="text/css">
        p strong {
            color: red;
        }
    </style>
</head>
<body>
    <p>这是一段话 <strong> 嵌入了一些文字 </strong> </p>
    <strong> 对此段文字没有影响 </strong>
</body>
```

并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器，都可以作为并集选择器的一部分

如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为它们定义相同的 CSS 样式

<head>
    <style type="text/css">
        p,.txt,#titie {
            color: red;
        }
    </style>
</head>
<body>
    <h3 id="title"> 标题 </h3>
    <p> 这是一段话 </p>
    <strong class="txt"> 乱入的一些文字 </strong>
</body>

2.2.5 文本样式属性

字体样式属性

font-size: 字体大小

设置字体字号，可以使用相对长度单位，也可以使用绝对长度单位

相对长度单位比较常用，推荐使用像素单位 px，绝对长度单位使用较少

相对长度单位说明
em 相对于当前对象内文本的字体尺寸
px 像素，最常用，推荐使用

绝对长度单位说明
in 英寸
cm 厘米
mm 毫米
pt 点
```
p { font-size: 24px;}
```
font-family: 字体
设置字体，常用的字体有：宋体、微软雅黑、黑体（实际开发使用时注意字体版权问题）

注意：
- 各种字体之间必须使用英文状态下的用逗号隔开
- 中文字体需要加英文状态下的引号，英文字体一般不需要加引号，当设置英文字体时，英文字体名必须位于中文字体名之前
- 如果字体中包含空格、#、$ 等符号，则该字体必须加上英文状态下的单引号或双引号
- 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示
```
p {font-family: "思源宋体";}


可以设置多个字体，中间用逗号隔开，当浏览器不支持第一个字体时，则会尝试下一个，直到找到合适的字体

p {font-family: "思源宋体", "微软雅黑", "黑体";}
```

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素，最常用，推荐使用

绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

font-weight: 字体粗细

实际开发中，常用的属性值为 normal 和 bold，用来定义正常或加粗显示的字体

可用属性值	描述
normal	默认值。定义标准的字符
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900（100的整数倍）	定义由细到粗的字符，其中 400 等同于 normal，700 等同于 bold，值越大字体越粗

font-style: 字体风格

定义字体风格，如：斜体、倾斜或正常字体

其中 italic 和 oblique 都用于定义斜体，两者在显示效果上并没有本质区别，实际开发中常使用 italic

可用属性值描述
normal 默认值，浏览器会显示标准的字体样式
italic 浏览器会显示斜体的字体样式
oblique 浏览器会显示倾斜的字体样式
font: 综合设置字体样式

使用综合设置时，必须按照顺序进行书写，各个属性之间以空格隔开

不需要的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用
```
语法格式：
选择器 {font: font-style font-weight font-size / line-height font-family;}
			  字体风格		字体粗细	字体大小  /		行高		  字体

省略
选择器 {italic 18px / 30px "宋体";}
```
@font-face 属性
CSS3 新增属性，用于定义服务器字体，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体

使用步骤：
1. 下载字体，并存储到相应的文件夹中
2. 使用 @font-face 属性定义服务器字体
3. 对元素应用 “font-family” 字体样式
```
语法格式：
@font-face {
    font-family: "字体名称";
    src: 字体文件路径;
}


@font-face {
    font-family: "隶书";
    src: url(font/FZJZJW.TTF);
}
```

可用属性值	描述
normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式
oblique	浏览器会显示倾斜的字体样式

word-wrap 属性

实现长单词和 URL 地址的自动换行

在相同的宽度高度的盒子内，浏览器默认处理时 URL 地址会溢出边框，属性为 break-word 时，URL 地址会沿边框自动换行

可用属性值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）
break-word	在长单词或 URL 地址内部进行换行

<head>
    <style type="text/css">
        .title {
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <p> 这是一个网址http://www.baidu.com </p>
    <p class="title"> 这是一个网址http://www.baidu.com </p>
</body>


<!-- 效果展示： -->
<!-- normal 效果 -->
这是一个网址
http://www.baidu.com

<!-- break-word 效果 -->
这是一个网址
http://www.
baidu.com

文本外观属性

color: 文本颜色

定义文本颜色

颜色属性种类：
- 预定义的颜色值，如 red，green，blue 等
- 十六进制，如 #FF0000，#FF6600 等，实际工作中，十六进制是最常用的定义颜色的方式
  - 十六进制颜色值，每 2 位为一个颜色分量，分别表示红、绿、蓝
- RGB代码，如红色 rgb(255,0,0) 或 rgb(100%,0%,0%)
  - 如果使用 RGB 代码的百分比颜色值，取值为 0 时，也不能省略百分号
letter-spacing: 字间距

字间距就是字符与字符之间的空白。字间距的属性值可以为不同单位的数字，允许使用负数，默认为 normal

对英文使用时，定义的是字母之间的间距
word-spacing: 单词间距

定义英文单词之间的间距，对中文无效，属性值可以为不同单位的数字，允许使用负数，默认为 normal
line-height: 行间距

定义行与行之间的间距，即垂直间距，一般称为行高

常用的属性值单位有 3 种，分别为像素px、相对值em、百分比%，实际开发中使用最多的是像素px
text-transform: 文本转换

用于控制英文字符的大小写

常用属性值：
- none: 不转换（默认值）
- capitalize: 首字母大写
- uppercase: 全部字符转换为大写
- lowercase: 全部字符转换为小写
text-decoration: 文本装饰

用于设置文本的下划线、上划线、删除线等装饰效果

text-decoration 后可以赋多个值，属性值之间用空格隔开，用于给文本添加多种显示效果

常用属性值：
- none: 没有装饰（正常文本默认值）
- underline: 下划线
- overline: 上划线
- line-through: 删除线
text-align: 水平对齐方式

设置文本内容的水平对齐，相当于 HTML 中的 align 对齐属性

常用属性值：
- left: 左对齐（默认值）
- right: 右对齐
- center: 居中对齐
text-indent: 首行缩进

设置首行文本缩进，属性值可以为不同单位的数值，em 字符宽度的倍数，或相对于浏览器窗口宽度的百分比，允许使用负值，建议使用em 作为设置单位，无论字号多大，首行文本都会缩进两个字符

text-indent 属性仅适用于块级元素，对行内元素无效
white-space: 空白符处理

使用 HTML 制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白，使用 white-space 属性可设置空白符的处理方式

常用属性值：
- normal: 常规（默认值），文本中的空格、空行无效，满行后自动换行
- pre: 预格式化，按文档的书写格式保留空格、空行原样显示
- nowrap: 空格空行无效，强制文本不能换行，除非遇到换行标记 br，内容超出边界也不换行，若超出浏览器页面则会自动增加滚动条

text-shadow: 阴影效果

给页面中的文本添加阴影效果

当设置阴影的水平距离参数或垂直距离参数为负数时，可以改变阴影投射方向，但是阴影的模糊半径参数只能设置正值，并且数值越大，阴影向外模糊的范围也就越大

语法格式：
选择器 {text-shadow: h-shadow v-shadow:  blur color;}

h-shadow: 水平阴影距离
v-shadow: 垂直阴影距离
blur: 模糊半径
color: 阴影颜色


/* 可以给文本添加多个阴影效果，从而产生阴影叠加的效果，方法为设置多组阴影参数，中间用逗号隔开 */
p{
    text-shadow: 10px 10px 10x red, 20px 20px 20px blue;	/* 红、蓝阴影叠加 */
}

text-overflow: 标示对象内溢出文本
要想实现省略号标示溢出文本的效果，“white-space: nowrap;” “overflow: hidden;” “text-overflow: ellipsis” 三个样式必须同时使用，缺一不可

步骤如下：
- 应用 “white-space: nowrap;” 样式，强制文本不能换行
- 应用 “overflow: hidden;” 样式，隐藏溢出文本
- 应用 “text-overflow: ellipsis” 样式，显示省略标记
常用属性值：
- clip: 修剪溢出文本，不显示省略标记 “…”
- ellipsis: 用省略标记 “…” 标示被修剪文本，省略标记插入的位置是最后一个字符
```
语法格式：
选择器 {text-overflow: 属性值;}
```

2.2.6 CSS高级特性

CSS 层叠性和继承性

CSS 是层叠样式表的简称，层叠性和继承性是其基本特征。对于网页设计师来说，必须灵活使用这两个概念

层叠性

所谓层叠性是指多种 CSS 样式的叠加

当标记选择器和类选择器都定义了文本字号时，实际显示的效果是类选择器，因为类选择器的优先级高于标记选择器
继承性
所谓继承性是指书写 CSS 样式表时，子标记会继承父标记的某些样式

继承性非常有用，如果设置的属性是一个可继承的属性，只需将它应用于父元素即可，不必在每个后代上添加相同的样式
```
p,div,h1,ul,li,dl {color: blank;}

可简写成：
body {color: blank;}
```
文本属性等网页中通用的样式可以使用继承，如字体、字号、颜色、行距等可以在 body 元素中统一设置，然后通过继承影响文档中所有的文本

当为 body 元素设置字号属性时，标题文本不会采用这个样式，因为标题 h1~h6 有默认字号样式，这是默认字号覆盖了继承的字号

不具备继承性的属性：
- 边框属性
- 外边距属性
- 内边距属性
- 背景属性
- 定位属性
- 布局属性
- 元素高度属性

CSS优先级

定义 CSS 样式时，经常会出现两个或多个规则应用在同一元素上，这时就会出现优先级的问题

CSS 为每一种基础选择器都分配了一个权重，其中：

标记选择器具有权重 1
类选择器具有权重 10
id 选择器具有权重 100

注意：

继承样式的权重为 0。即，在嵌套结构中，不算父元素样式的权重多大，内子元素继承时，它的权重都为 0，也就是说子元素定义的样式会覆盖继承来的样式
行内样式优先。应用 style 属性的元素，其行内样式的权重非常高，可以理解为远大于 100，它拥有比上面提高的选择器都大的优先级
权重相同时，CSS 遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在后面的样式优先级最大
CSS 定义了一个 !important 命令，该命令被赋予最大的优先级。也就是说不管权重如何及样式位置的远近，!mportant 都具有最大优先级
```
#header {color: red !important;}
```