1、样式表
样式名 |
样式 |
描述 |
优点 |
缺点 |
使用情况 |
控制范围 |
内嵌式样式表 |
<style> css语句 </style> |
在html里面嵌套一个style标签,将css语句都写在style标签里面 |
部分结构和样式相分离 |
没有彻底分离 |
较多 |
控制一个页面(中) |
外链式样式表 |
<link rel="stylesheet" href="css文件的地址" /> |
单独创建一个后缀名为.css的文件,在html文件里面通过link标签引入css文件 |
完全实现结构和样式相分离 |
需要引入 |
最多,强烈推荐 |
控制整个站点(多) |
行内式样式表 |
<div style="color:green; font-size:20px;"></div> |
将样式直接写在标签本身上,以属性的形式存在 |
书写方便,权重高 |
没有实现样式和结构相分离 |
较少 |
控制一个标签(少) |
2、标签的三种显示模式
模式 |
特点 |
代表标签 |
用法 |
块级元素 |
可设置宽和高; 独占一行; 默认宽度是父级标签的宽度; 高度不继承 |
div,p,ol,li,ul,dt,dd,dl,header,footer,aside,nav,article,section display:block; |
一般用来作为布局容器,内部可以包含其他块级和行内,p标签除外 |
行内元素 |
不能设置宽高; 行内标签允许其他的行内标签排一排; 默认大小由内容撑开 |
a,span,b,u,s,i,strong,ins,del,em display:inline |
一般用来包裹文字,不要用行内元素包裹块级元素,a链接除外(建议把a转换成块级元素) |
行内块元素 |
允许其他的行内元素排一排; 可以设置宽高 |
input,img display:inline-block |
行内块标签其实本质上是一种特殊的行内标签 (text-align和line-height都可以控制行内块元素; |
3、复合选择器
选择器 |
描述 |
语法 |
交集选择器 |
既要满足选择器1,同时也要满足选择器2 |
选择器1选择器2{} |
并集选择器 |
将多个选择器合并在一起 |
选择器1,选择器2,…{} |
后代选择器 |
空格前面的元素和后面的元素必须是嵌套关系 |
.选择器1 .选择器2{} |
子代选择器 |
>前面的元素和后面的元素必须是父子关系 |
.father>.son{} |
4、背景
属性 |
值 |
描述 |
background-color |
16进制或者rgb,transparent(默认,透明) |
背景颜色 |
background-image |
URL,none(默认,不显示) |
背景图片 |
background-repeat |
repeat:默认,平铺的 repeat-x:水平平铺 repeat-y:垂直平铺 no-repeat:不平铺 |
背景平铺 |
background-attachment |
scroll:默认,图片跟随盒子一起滚动 fixed:图片不跟随盒子一起滚动 |
背景滚动 |
background-position |
1.方位名词 right top left center bottom 、 2、像素 以当前盒子的左上角为原点构建坐标系 3.百分比 百分比参照的自身盒子的宽高: 4.还可以混写 混写是需要考虑顺序 |
背景位置 |
背景的简写
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 如:background: #fff url() no-repeat scroll center center;
img和背景图片的区别
img不需要专门写宽高就能够显示在页面上 而背景图片默认是撑不开容器的 需要专门写宽高 一般产品插入图都推荐使用img 而一些小的icon 或者很少更新的图片 再或者超大的图片推荐使用背景图 而且背景图可以让内部的文字盖在上面,但是img不行(除非后期用定位)
5、CSS三大特性
特性 |
描述 |
备注 |
继承性 |
后代元素会继承祖先元素的一些样式 跟文字相关属性可以继承 color font- line- text- 可以继承 块元素可以继承父级元素的宽度, |
高度不继承; a链接的颜色不予继承,需要单独写; 如果元素自身有该css样式,那么该样式不予继承 |
层叠性 |
后渲染的css样式会覆盖掉先渲染的css样式 |
权重相同的情况下 |
优先级(权重) |
不同的选择器之间会有不同的优先级 |
继承 < 通配符 < 标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important |
权重叠加
关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下:
specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
继承或者* 的贡献值 |
0,0,0,0 |
每个元素(标签)贡献值为 |
0,0,0,1 |
每个类,伪类贡献值为 |
0,0,1,0 |
每个ID贡献值为 |
0,1,0,0 |
每个行内样式贡献值 |
1,0,0,0 |
每个!important贡献值 |
正无穷 |