CSS介绍
我们为什么需要CSS?
使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要逐个修改,费心费力。是时候做出改变了,所以CSS就出现了。
CSS的出现解决了下面两个问题:
1、将HTML页面的内容与样式分离。
2、提高web开发的工作效率。
什么是CSS?
CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。
css的优势
1.内容与表现分离 2.网页的表现统一,容易修改 3.丰富的样式,使页面布局更加灵活 4.减少网页的代码量,增加网页浏览器速度,节省网络带宽 5.运用独立页面的css,有利于网页被搜索引擎收录
如何使用CSS?
我们通常会把样式规则的内容都保存在CSS文件中,此时该CSS文件被称为外部样式表,然后在HTML文件中通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件,并按照该文件中的样式规则渲染HTML文件。
CSS三种引入方式
一、三种方式的书写规范
1、行间式
2、内联式
div{width:100px;height:100px;background-color:red;
}
3、外联式
file: zero.css
div{width:100px;height:100px;background-color:red;
}file: zero.html
二、三种方式间的"优先级"
与样式表的解析顺序有关
样式与长度颜色
1、基本样式
div{width:100px;height:100px;background-color:red;
}
2、长度
px:像素(pixel),屏幕上显示的最小单位,用于网页设计,直观方便
mm:毫米
cm:厘米
in:英寸
pt:点(point),一个标准的长度单位,1pt=1/72in,用于印刷业,非常简单易用;
em:相当长度,通常1em=16px,应用于流式布局
3、颜色
rgb():三个值可为[0-255]数值或百分比,以,相隔(r:Red g:Green b:Blue)
rgba():前三个值可为像素或是百分比,最后一个为[0, 1]数值,以,相隔(r:Red g:Green b:Blue a:Alpha)
hsl():第一个值为[0,360]数值,后二个值可为百分比,以,相隔(h:Hue s:Saturation l:Lightness)
hsla():第一个值为[0,360]数值,中间二个值可为百分比,最后一个为[0, 1]数值,以,相隔(h:Hue s:Saturation l:Lightness a:Alpha)
AABBCC:六个十六进制位,每两位一整体,分别代表Red、Green、Blue,可以简写#abc
常用样式
1、字体样式
font-family:字体族科,多值用于备用,以,隔开
font-family: "STSong", "Arial";
font-size:字体大小
font-style: 字体风格 normal | italic | oblique
font-weight:字体重量 normal | bold | lighter | 100~900
line-height:行高
font:字重 风格 大小/行高 字族
2、文本样式
color:文本颜色
text-align:横向排列
left 居左 | center 居中 | right 居右
vertical-align:纵向排列
baseline:将支持valign特性的对象的内容与基线对齐
sub:垂直对齐文本的下标
super:垂直对齐文本的上标
top:将支持valign特性的对象的内容与对象顶端对齐
text-top:将支持valign特性的对象的文本与对象顶端对齐
middle:将支持valign特性的对象的内容与对象中部对齐
bottom:将支持valign特性的对象的文本与对象底端对齐
text-bottom:将支持valign特性的对象的文本与对象顶端对齐
text-indent:字体缩减
text-decoration:字划线
letter-spacing:字间距
word-spacing:词间距
word-break:自动换行
normal:默认换行规则
break-all:允许在单词内换行
3、背景样式
background-color:颜色
background-image:图片
background-image: url(bg.png);
background-repeat:重复
repeat | no-repeat | repeat-x | repeat-y
background-position:定位
top | bottom | left | right | center
定位值可为方位词、百分比及固定值,值个数默认为两位(水平/垂直),一个值时垂直默认center
background-attachment:滚动模式
scroll | fixed
父级设置属性,子集内容超出父级范围
CSS选择器
一、基础选择器
1、通配选择器
*{border:solid;
}匹配文档中所有标签:通常指html、body及body中所有显示类的标签
2、标签选择器
div{background-color:yellow;
}匹配文档中所有与标签名匹配的标签:如div{}会匹配文档中全部div,span{}会匹配文档中所有span
3、类选择器
.red{color:red;
}匹配文档中所有拥有class属性且属性值为red的标签:如均会被匹配
4、id选择器
#div{text-align:center;
}匹配文档中所有拥有id属性且属性值为div的标签:如
均会被匹配二、基础选择器优先级
基础选择器优先级大致与选择器匹配范围成反比,匹配范围越小,优先级越高
基础选择器优先级大致与选择器匹配精度成正比,匹配精度越高,优先级越高
基础选择器优先级:id选择器 > 类选择器 > 标签选择器 > 通配选择器
id选择器必须保证单文档的唯一性
三、组合选择器
1、群组选择器
div, span, .red, #div{color:red;
}
一次性控制多个选择器
选择器之间以,隔开,每一个选择器位均可以为任意合法选择器或选择器组合
2、子代(后代)选择器
子代选择器用>连接
body > div{color:red;
}后代选择器用空格连接
.sup .sub{color:red;
}
一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
每一个选择器位均可以为任意合法选择器或选择器组合
子代选择器必须为一级父子嵌套关系,后代选择器可以为一级及多级父子嵌套关系
3、相邻(兄弟)选择器
相邻选择器用+连接
.d1 + .d2{color:red;
}兄弟选择器用~连接
.d1 ~ .d3{color:red;
}
一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
每一个选择器位均可以为任意合法选择器或选择器组合
相邻选择器必须为直接相邻关系,兄弟选择器可以为直接相邻或间接相邻关系
4、交集选择器
div.d#dd{color:red;
}
.d1.d2.d3{color:red;
}
四、组合选择器优先级
组合选择器优先级与权值相关,权值为权重和
权重对应关系
选择器权重
通配
1
标签
10
类、属性
100
id
1000
!important
10000
选择器权值比较,只关心权重和,不更新选择器位置
不同级别的选择器间不具备可比性:1个类选择器优先级高于n个标签选择器的任意组合
五、属性选择器
[attr]:匹配拥有attr属性的标签
[attr=val]:匹配拥有attr属性,属性值为val的标签
[attr^=val]:匹配拥有attr属性,属性值以val开头的标签
[attr$=val]:匹配拥有attr属性,属性值以val结尾的标签
[attr*=val]:匹配拥有attr属性,属性值包含val的标签