一、CSS简介
1.什么是CSS
CSS(Cascading Style Sheet)层叠样式表,是用来对网页元素进行格式化和布局。
2.用途
- 美化网页元素
- 网页元素布局
3.意义
内容与样式的分离,方便对内容进行复用,对样式进行修改
4.版本
- CSS1.0
- CSS2.0
- CSS3.0
二、CSS的使用
1.行内样式表(不推荐)
-
写法:
<element style="css属性:属性值;css属性:属性值;"></element>
-
特点:
-
优点:则针对性强 优先高
-
缺点:
- 没有实现内容和样式的分离
- 复用性差
- 可维护性差
2.内部样式表
<style>
选择器{
CSS属性:属性值;
CSS属性:属性值;
}
</style>
-
特点:
优点:实现单页面的集合央视管理,最大程度实现样式的复用
缺点:不利于多页面的样式复用和维护
3.外部样式表(推荐)
-
写法:
- 单独编写扩展名为CSS的样式表文件
- 在需要使用外部样式表文件的页面的head标签中用过使用
-
注意:
- 在样式表文件中,直接编写样式,不需要添加
- 如果页面中既引用外部样式表,又添加了内部样式表,按照最后解析的样式优先
-
特点:
- 内容和样式的分离,实现多张页面的杨师傅用,可维护性好
三、CSS选择器
-
作用:定位想要梅花的网页元素
-
分类:
-
CSS1.0选择器
-
基本选择器
-
标签选择器
- 定义:标签名{CSS属性:属性值;CSS属性:属性值}
- 应用:相同标签的元素自动应用样式
2.类选择器
- 定义:类选择器名{CSS属性:属性值;CSS属性:属性值}
- 应用:在需要应用样式的元素上添加属性class=“类选择器名”
3.id选择器
- 写法:#id名{css属性:属性值;css属性:属性值}
- 应用:在元素上使用id=“名称”
- 注意:id是唯一的,不能重复
-
-
伪类选择器
- :link 向未被访问的链接添加样式
- :visted 向已被访问的链接添加样式
- :hover 鼠标悬停在元素上方时添加样式
- :active 向被激活的元素添加样式
注意:超链接的不同状态时的样式设置,要严格按上面的顺序设置
-
-
四、优先级
- 行内>id>class>标签
- 如果一个元素有多个class眼视光hi,按照class样式定义的先后顺序,后面定义的优先级更高
五、CSS常用样式
- 字体样式
- font-famliy:设置字体系列
- font-size:设置字体尺寸
- font-style:设置字体风格
- font-weight:设置字体体重
- 文本样式
- color:文本颜色
- text-align:文本的水品对齐
- line-height:文本的行高
- text-decoration:文本的修饰效果
- text-indent:文本的首行缩进
- letter-spacing:字符间距