目录
CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）
作用：
- 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
1. 引入位置
-
行内式(内联样式)
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>实际上任何HTML标签都拥有style属性，用来设置行内式。
-
注意
style是标签的一种属性，样式属性和值中间是
:，样式之间;隔开，只能控制当前标签样式属性
-
-
内部样式(内嵌式)
<head> <style type="text/CSS"> 选择器（选择的标签） { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } </style> </head><style> div { color: red; font-size: 12px; } </style>
注意
style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方，type=“text/css” 在html5中可以省略，且只能控制当前页面信息
-
外部样式表(链入式)
就是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中，通过link标签将外部样式表链接到HTML中
<head> <link rel="stylesheet" type="text/css" href="css文件路径"> </head>注意
link是单标签，link标签需要放在head头部标签中，并且指定link标签的三个属性
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定“stylesheet”,表示所链接的文档是一个样式表 |
| type | 定义所链接文档的类型，这里指定为“text/css”，但可省略 |
| href | 定义URL，可以是绝对地址也可以是是相对地址 |
2. CSS选择器
2.1 标签选择器
例如：
h3 {
color: red;
}
先选择出标签，在对该类标签进行操作，对页面中所有的标签都设置统一的颜色
2.2 类选择器
语法
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
<p class='类名'></p>
注意
- 类选择器使用
.加类名 - 不要纯数字、中文等命名， 尽量使用英文字母来表示。
多类名选择器
各个类名中间用空格隔开。例如
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>
2.3 id选择器
语法
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
...
<p id="id名"></p>
注意
- id值是唯一的，只能对应于文档中的唯一确定元素
- 用法基本与类选择器相同
2.4 通配符选择器
通配符选择器用*号表示， * 就是 选择所有的标签 他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
语法
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
常用于清楚HTML默认标记
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
-
注意
会匹配页面所有的元素，降低页面响应速度，不建议随便使用
3. CSS字体样式
3.1 font字体
1. font-size字体大小
p {
font-size:20px;
}
2. font-family字体
p{ font-family:"微软雅黑";}
-
网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑
-
可以设置多个字体，但第一个字体不支持时，开始适配后续字体
p{font-family: Arial,"Microsoft Yahei", "微软雅黑";} -
Unicode字体
- 在CSS中设置字体一般可以直接使用中文设置，但是在文件编码时容易出现乱码的错误，例如 xp系统则不支持微软雅黑的中文写法
- 解决方法：可以直接些英文，例如
font-family:"Microsoft Yahei"或者使用Unicode编码
| 字体名称 | 英文名称 | Unicode 编码 |
|---|---|---|
| 宋体(常用) | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑(常用) | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
3. font-weight字体粗细
可以使用b或者strong标签实现，也可以通过font-weight实现
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100~900 | 400 等同于 normal，而 700 等同于 bold 我们重点记住这句话 |
4. font-style字体风格
| 属性 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 font-style: normal; |
| italic | 浏览器会显示斜体的字体样式。 |
当然可以直接使用i和em标签
5. 综合设置字体样式
选择器 {font: font-style font-weight font-size/line-height font-family;}
注意
必须按照以上格式顺序书写，各属性间以空格隔开，不需要设置的可以省略，取默认值，但必须保留font-size 和font-family 属性，否则font属性无效
3.2 CSS外观属性
1. color颜色
| 表示表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue，还有我们的御用色 pink |
| 十六进制 | #FF0000，#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
主要使用16进制
2. text-align文本水平对齐方式
| 属性 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
- 注意 是让内容水平居中而不是盒子本身
3. ine-height行间距
line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px，一般大于字体7 8像素即可
4. text-indent首行缩进
- 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,
- 建议使用em作为设置单位。1em就是一个字的宽度，首行缩进两个字就是
2pm
5. text-decoraton文本装饰
| 值 | 描述 |
|---|---|
| none | 默认，定义标准文本，取消下划线 |
| underline | 定义下划线 |
| overline | 定义文本上划线 |
| line-through | 定义穿过文本的线 |
6. 行高 line-height
文字的行高等于盒子的高度
行高 = 上距离 + 内容高度 + 下距离
设置文本垂直居中
- 行高等于盒子高度 文字垂直居中
- 行高大于盒子高度 文字会偏下
- 行高小于盒子高度 文字会偏上
4. sublime快捷操作emmet语法
-
生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成
-
如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
-
如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
-
如果有兄弟关系的标签，用 + 就可以了 比如 div+p
-
如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
-
如果生成的div 类名是有顺序的， 可以用 自增符号 $
.demo$*3 <div class="demo1"></div> <div class="demo2"></div> <div class="demo3"></div>
5. CSS复合选择器
5.1 后代选择器
父级 子级{属性:属性值;}
当标签发生嵌套时，内层标签则就成为外层标签的后代，且子孙后代都可选择
5.2 子选择器
子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。
父子标签通过>连接
.class>h3{color:red;font-size:14px;}
5.3 交集选择器
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
例如：
p.nav 选择的是： 类名为 .nav 的 段落标签。
中间用.不能有空客
5.4 并集选择器
并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。
.class, h1, #1 {属性 :属性值; }
主要用于集体声明，通过,相隔
5.5 链接伪类选择器
伪类选择器：
为了和我们刚才学的类选择器相区别
类选择器是一个点 比如 .demo {}
而我们的伪类 用 2个点 就是 冒号 比如 :link{}
用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。因为伪类选择器很多，比如链接伪类，结构伪类等等。
a:link /*未访问链接*/
a:visited /*已访问链接*/
a:hover /*鼠标移动到链接上*/
a:active /*选定的链接*/
注意
书写时尽量按照l v h a 的顺序
love hate 爱上了讨厌
6. 标签显示模式
6.1 块级元素(block-level)
例如
常见的块级元素 h1-h6 ,p div, ul ,ol,li等
特点
-
独占一行
-
宽高、外边距以及内边距都可以控制
-
宽度默认父级容器的100%
-
是一个容器 ，可以方行内或者块级元素
注意’
只有文字才能组成段落或者标题，因此在p中无法放任何的块级元素
6.2 行内元素
a,strong,b,em,span等等
特点
- 相邻的行内元素，显示在同一行
- 宽高设置无效，默认为内容宽
- 行内元素只能容纳文本或者其他的行内元素
6.3 行内块元素
<img /> ,<imput />, <td />可以设置宽高和对齐方式
特点
- 一行可以显示多个行内块元素，之间会有空白
- 宽度默认为内容，其余属性可以直接设置
6.4 标签模式的转换
display:inline; /*块转行内*/
display:block; /*行内转块*/
display:inline-block; /*块、行内转为行内块*/
7.CSS背景 background
7.1 背景颜色
background-color: 颜色值 默认值transparent
7.2 背景图
background-image: none | url(url)
7.3 背景平铺（repeat）
background-repeat : repeat | no-repeat |repeat-x 、repeat-y
| 参数 | 作用 |
|---|---|
| repeat | 默认纵向横向平铺 |
| none | 不平铺 |
| repeat-x | 在横向平铺 |
| repeat-y | 在纵向平铺 |
7.4 背景位置
background-position : length || length
background-position : position || position
| 参数 | 值 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
注意
- 必须先有background-image
- position后两个方位名词，顺序无关
- 若指定一个方位词，另一个默认为center
- 坐标必须时x在前y在后，若只有一个坐标默认为x坐标，y为垂直居中
7.5 背景附着
background-attachment : scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
7.6 背景简写
backgrond : transprat url(url) repeat scroll center top
书写顺序不严格要求，建议按照以上顺序
7.6 背景透明
background : rgba(0,0,0,0.3);
最后一个值是透明度，取值0-1之间，可以0.3写为 .3，透明值是让盒子背景透明，而非内容
8. CSS三大特性
1. CSS层叠性
层叠性指多种css样式的叠加，处理原则是样式冲突时执行就近的原则，不冲突时不会层叠
2. css继承性
子标签会继承父标签的某些样式，比如text-,font- line-
3. css优先级‘
选择器相同会执行层叠性，不同时优先级有不同
权重计算公式
| 标签选择器 | 计算公式 |
|---|---|
| 继承或者* | 0，0，0，0， |
| 每个元素 （标签选择器） | 0，0，0，1 |
| 每个类 伪类 | 0，0，1，0 |
| 每个id | 0，1，0，0 |
| 每个行内样式 style=“” | 1，0，0，0 |
| 每个!important | 无穷大 |
- 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
- 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
权重叠加
-
div ul li ------> 0,0,0,3
-
.nav ul li ------> 0,0,1,2
-
a:hover -----—> 0,0,1,1
-
.nav a ------> 0,0,1,1
直接相加不会进位，0，0，0，5+0，0，0，5 =0，0，0，10
继承的权重是0
黑马前端全栈教程
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
