CSS 简介
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
CSS 语法
主要由两个部分组成，选择器和声明
选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
以下为一个实例
p
{
color:red;
text-align:center;
}在这个例子中，我们给p选择器 声明了两个属性：color和text-align，并给它们赋值，所以这段css样式的意思就是当我们在html中使用p标签时，p标签中的文字字体颜色会变为红色，且文字会居中对齐。
CSS样式表
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部
以下为一个实例，我们在外面链接了一个“mystyle.css”文件，并将他作为css样式表来使用
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表
以下为一个实例
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>在上面这个例子中，我们在head标签里添加了一个style标签，并在style标签了进行了样式的修改，我们选择了body，给它一个声明，将它的background-color属性改为了lightblue，所以在我们运行html文件的时候，我们的body的背景色就会变为浅蓝色。
内联样式
我们也可以直接在标签了使用style属性来进行样式的修改。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>在上面这个例子中，我们直接在p标签里添加了style属性，并在style属性里进行了样式的修改。
样式表的优先级
需要注意的的是：样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表，所以我们引入优先级
一般情况下，优先级如下：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
CSS选择器
常用的选择器
1.通配符选择器
语法：*{}
作用 : 让页面中所有的标签执行该样式,通常用来清除间距
例子 : *{
margin: 0; //外间距
padding: 0; //内间距
}
2.元素选择器
语法 : 标签名{}
作用 : 选中对应标签中的内容
例:p{} , div{} , span{} , ol{} , ul{} ......
3.类选择器
语法：.类名{}
作用：选中对应class属性值的元素
例：<p class="A">text</p> .A{}
4.id选择器
语法：#id属性值
作用：选中对应id属性值的元素
例：<p id="A">text</p> #A{}
选择器的优先级
通用选择器（*）>元素(类型)选择器 > 类选择器 > 属性选择器 > 伪类 > ID 选择器 > 内联样式
9125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
