1. 简介
-
CSS (Cascading style sheets 层叠样式表)，是一种用来结构化文档为
HTML或xml添加样式的计算机语言，CSS 发展至今，不仅可以静态地修饰网页，还可以配合各种脚本语言动态得对网页各种元素进行格式化修改。 -
CSS 的特点：
- 丰富的样式定义
- 易于使用和修改
- 多页面应用
- 层叠
- 页面压缩
2. 调用方式
- CSS 样式设置 ：
属性:属性值
1. 内联样式
<p style="color:red;">段落</p> // 给这段文字设置为红色
2. 内部样式
在页面的head 头部中插入 style
<head>
<style>
p{color:red;}
</style>
</head>
3. 外包样式
<link rel="stylesheet" type="text/css" href="index.css">
rel：外部样式表
type="text/css"：引用文档类型
href：引入地址
3. 选择器
- 如果需要在HTML中设置 CSS 样式，你需要在元素中设置
id和class选择器
<div class="word" id="warp">我是一个div标签</div>
class 类名可以有多个 空格隔开
id 一个标签上只能设置一个id
调用：
<style>
1. id (#id)
2. 类选择 (.class)
3. 标签 (h1,p)
4. 相邻 (h1+p)
5. 子选 (ul>li)
6. 后代 (li a)
7. 通配符 (*)
8. 属性 (a[name="a"])
9. 伪类 (a:hove,li:nth-child)
</style>
3-1. 选择器的权重和优先级规则
- 优先级
1. 在属性值后添加 !important 这个属性会覆盖所有同等元素样式
p{color:red !important;} 相当于会把所有的p标签设置为红色
2. 在内联中直接添加style样式
<p style="color:pink;">我是一个段落</p>
3. id 选择器，通过唯一id去选中要修改的元素
4. class 类选择器 可以去写一些公共样式
例：<div class="odiv box" >div 1号</div> <div class="odiv">div 2号</div>
<style>
.odiv{
color:red; 把颜色都更改为红色
}
.box{background-color:yellow;} 加一个背景颜色
</style>
5. 元素选择器 div{属性:属性名}
6. 通配符 *{}
* 表示选中所有标签 对样式做统一处理，一般都用于清除默认样式
-
权重
-
当选择同一个标签对其进行样式修改时，就会对其权重进行比较，相同情况下如果一样的属性就会被后者覆盖。
8015
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
