CSS
文章目录
- CSS（层叠样式表）
- 结构 #：包括选择器以及声明。每个声明以;结束，用{}括起来
- [注释 # ：以/*开始，以*/结束](# ：以/开始，以/结束)
- 选择器
- 创建
- 背景
- 文本与字体
- 链接
- 列表
CSS（层叠样式表）
用来渲染html元素，改变页面的布局和外观
结构 #：包括选择器以及声明。每个声明以;结束，用{}括起来
选择器 声明 声明
h1 {color：blue;font-size:12px;}
属性 属性
例：
p
{
color:red;
text-align:center;
}
注释 # ：以/开始，以/结束
选择器
id选择器：为标有特定id的元素指定特定的样式。以#来定义。（id属性不要以数字开头）
例：#para1
{
text-align:center;
color:red;
}
Hello World!
class选择器：描述一组元素的样式，可以在多个元素中使用。以.显示.(多个class选择器以空格或者换行分开）第一个字符不能使用数字
例：.center {text-align:center;}
p.center {text-align:center;}
创建
可以通过以下方式添加：
1.内联样式-在html元素中使用style属性。由于要将表现和内容混合，可能会损失部分优势
2.内部样式表-在html文档头部区域使用
3.外部样式表-使用外部CSS文件。适用于多页面，通过改变一个文件来改变整个站点的外观，每个页面使用标签链接到样式表。（标签在文档的头部） 例： 4.多重样式：当某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中继承过来。 例：外部样式表对h3有三个属性 h3 { color:red; text-align:left; font-size:8pt; } 内部样式表对h3有两个属性 h3 { text-align:right; font-size:20pt; } 如果拥有内部样式表的这个页面同时与外部样式表链接，那么h3的样式为： color:red; text-align:right; font-size:20pt; 即颜色属性被继承于外部样式表，文字排列和大小被内部样式表中的规则取代。 优先级：内联样式>内部样式>外部样式>浏览器默认样式
背景
页面背景的颜色在body的选择器中使用，例：body {background-color:#b0c4de;}
颜色的定义方式：
1.十六进制。如："#ff0000"
2.RGB。如"rgb(255,0,0)"
3.颜色名称。如："red"
文本与字体
文本颜色的使用与背景颜色使用类似。例：
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
链接
链接状态：
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 /
a:hover {color:#FF00FF;} / 鼠标移动到链接上 /
a:active {color:#0000FF;} / 鼠标点击时 */
顺序规则：a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面