CSS简介
CSS 概述
- S 指层叠样式表 (Cascading Style Sheets)
- 定义如何显示 HTML 元素
- 通常存储在样式表中
- 式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 样式表可以极大提高工作效率
- 样式表通常存储在 CSS 文件中
- 样式定义可层叠为一
CSS基础语法
CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
h1 {color:red; font-size:14px;}CSS四种引入方式
1.行内式
<p style="hello yuan</p>2.嵌入式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>3.链接式
<link href="mystyle.css" rel="stylesheet" type="text/css"/>4.导入式
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</style>css选择器
基本选择器
标签选择器 p{}
ID选择器 #ID{}
class选择器 .class{}
通配选择器 *{}组合选择器
E,F 多元素选择器
E F 后代选择器, 选择E下的F元素
E>F 子元素选择器,匹配所有E下的子元素F
E+F 毗邻选择器,匹配E后最近的F属性选择器
E[att] 匹配所有具有att属性的E元素 E[att=val] 匹配att=val的元素 E[att~=val] 匹配att中有val属性的元素 E[att^=val] 匹配属性以指定值开头的元素 E[att$=val] 匹属性值以指定值结尾的元素 E[att*=val] 匹配属性值包含指定值的每个元素
伪类
anchor伪类
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }before after伪类
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
例：p:before{content:"hello";color:red;display: block;}选择器的优先级
1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1