您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
CSS（Cascading Style Sheets）：层叠样式表，又叫级联样式表，简称样式表
CSS实现了将结构与表现分离
提高了代码的可重用性和可维护性
CSS与XHTML之间的关系
XHTML用于构建网页的结构
CSS用于构建HTML元素的样式
XHTML是结构，CSS样式是表现
XHTML属性与CSS样式的使用原则
W3C建议尽量使用CSS样式取代XHTML属性
如果属性为XHTML特有属性，则使用XHTML属性
如果属性为CSS样式特有属性，则使用CSS样式属性
链接到外部CSS文件
创建CSS文件，并且书写CSS规则
-CSS文件的拓展名.css
链接到外部CSS文件
在HTML文档的<head>元素内添加<link/>元素
<link type="text/css" rel="stylesheet" media="媒体类型" href="" />
书写于头部文档中
在<head>元素内部书写<style>元素
在<style>元素中添加样式规则
<style type="text/css">
h2 {color:blue;}
</style>
书写于标记内部
内部CSS样式是通过XHTML标记的style属性来实现的
<p>普通段落</p>
<p >段落（内部样式）</p>
CSS应用方式的优先级
内联样式最高
内部样式其次
外部样式最低
内部样式和外部样式冲突的话，取决于二者的书写顺序
CSS选择器
类型选择器
类型选择器也被称为元素选择器
类型选择器匹配文档树中的特定的HTML元素
<style>
p{
text-align: left;
color: red;
}
</style>类选择器
类选择器以点开头，类名称不能以数字开头。
类选择器匹配使用指定类的元素
类选择器的使用通过元素的class属性来实现
多个类名称之间以空格分隔
<style>
.class{
text-align: left;
color: red;
}
<style>
span.class{
text-align: left;
color: red;
}仅对具有class属性的span元素生效
ID选择器
ID选择器以#开头
ID选择器匹配文档中的唯一元素
ID选择器的使用通过HTML元素的ID实现
注：某HTML元素存在ID属性，那么该ID可以应用于
-CSS样式
-JavaScript
-jQuery
群组选择器
群组选择器是具有相同属性的选择器的简写方式
选择器之间以逗号分隔
后代选择器
后代选择器也被称为派生选择器
依据元素在其位置的上下文关系来定义样式
后代选择器要求选择器之间至少存在父子关系
选择器之间以空格分隔
子代选择器
依据元素在其位置的上下文关系来定义样式
后代选择器要求选择器之间只能存在父子关系
选择器之间以大于号分隔
伪类选择器
CSS伪类用于向某些选择器添加特殊的效果
CSS伪类选择器的语法是：
选择器：伪类选择器
CSS伪类选择器可以分为
-动态元素
-UI元素状态伪类
动态伪类是基于HTML元素的特征进行分类
动态伪类不能出现在文档源代码或者文档树
动态伪类又可以分为
-链接伪类
：link，适用于尚未访问的链接
：visited，适用于访问过的链接
-用户动作伪类，用于呈现用户操作
：hover，用户指定HTML元素
：active，HTML元素被用户激活
：focus，应用于HTML元素获取焦点
a:link {
color : red;
text-decoration : none;
}
a:visited{
color : black;
text-decoration : underline;
}UI元素状态伪类
：enabled，表示处于启用状态的UI元素
：disabled，表示处于禁用状态的UI元素
：checked，表示被选定的UI元素
伪元素选择器
CSS伪元素用于向某些选择器设置特殊效果
：before，用于在呀un苏的内容前面插入新内容
：after，用于在元素的内容后面插入新内容
选择器的优先级
| 选择器类型 | 权值 |
| 类型选择器 | 0,0,0,1 |
| 伪元素选择器 | 0,0,0,1 |
| 类选择器 | 0,0,1,0 |
| 伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 内联样式 | 1,0,0,0 |
选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。