CSS基础学习笔记
1.什么是CSS
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素 (美化网页)
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
2.CSS发展史
- css1.0
- css2.0 DIV(快) +css，HTML与CSS结构分离的思想，网页变得简单
- css2.1 浮动，定位
- css3.0 圆角，阴影，动画... ...
3.CSS实例
优先级：就近原则 内联>内部>外部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<!--
<style>
选择器{
声明1；
声明2；
声明3；
}
</style>
-->
<style>
div {
color: antiquewhite;
}
</style>
<!--外部样式-->
<!--link标签引入-->
<link rel="stylesheet" href="css/a.css"/>
</head>
<body>
<!--内联样式-->
<div style="color: aquamarine">你好啊！</div>
<div>你好啊！</div>
<h1>你好啊！</h1>
</body>
</html>
css的优势：
- 内容与表现分离
- 网页结构表现统一，可以重复使用
- 样式丰富
4.id 和 class 选择器
优先级：id选择器>类选择器>标签选择器
-
id选择器
<style> /*id 选择器以 "#" 来定义*/ #para1 { text-align:center; color:red; } </style> <p id="para1">Hello World!</p> <p>这个段落不受该样式的影响。</p> -
class选择器
<style> /*class 选择器有别于id选择器，class可以在多个元素中使用*/ /*在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示*/ .center{ text-align:center; } </style> <h1 class="center">标题居中</h1> <p class="center">段落居中。</p>
5.层次选择器
在 CSS3 中包含了四种组合方式:
-
后代选择器(以空格分隔)
-
选择
的所有后代标签为的元素
div p { background-color:yellow; }
-
-
子元素选择器(以大于号分隔）
-
选择
元素的所有直接子元素div>p { background-color:yellow; }
-
-
相邻兄弟选择器（以加号分隔）
-
选择紧接(不能间隔其他标签)在另一元素后的元素，且二者有相同父元素（选择一个弟弟）
div+p { background-color:yellow; }
-
-
后续兄弟选择器（以破折号分隔）
-
选取了所有
元素之后的所有相邻兄弟元素(弟弟妹妹们选择器)
div~p { background-color:yellow; }
-
6.伪类
-
first-child 伪类
<div> <p>These are the necessary steps:</p> <!--第一个<p>标签--> <ul> <li>Intert Key</li><!--第一个<li>标签--> <li>Turn key <strong>clockwise</strong></li><!--第一个<strong>标签--> <li>Push accelerator</li> </ul> <p>Do <em>not</em> push the brake at the same time as the accelerator.</p><!--第一个<em>标签--> </div>- 选择器匹配作为任何元素的第一个子元素的 <指定> 元素
-
nth-child伪类
p:nth-child(1){ background:yellow; }<p>的父类的第一个元素，且要是<p>元素
-
nth-of-type伪类
p:nth-of-type(1){ background:yellow; }<p>的父类的第一个<p>元素
-
anchor伪类
a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */-
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
-
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
-
注意：伪类的名称不区分大小写
-
7.属性选择器
-
选择含有某个属性的元素
[title] { color:blue; } -
选择特定属性值的元素
[title=runoob] { border:5px solid green; } -
CSS 属性选择器 *=, |=, ^=, $=, *= 的区别
-
"value 是完整单词" 类型的比较符号: ~=, |=
-
"拼接字符串" 类型的比较符号: *=, ^=, $=
1.attribute 属性中包含 value:
-
[attribute~=value] 属性中包含独立的单词为 value，例如：
[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" />
[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：
[title*=flower] --> <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
2.attribute 属性以 value 开头:
[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：
[lang|=en] --> <p lang="en"> <p lang="en-us">
attribute^=value] 属性的前几个字母是 value 就可以，例如：
[lang^=en] --> <p lang="ennn">
3.attribute 属性以 value 结尾:
[attribute$=value] 属性的后几个字母是 value 就可以，例如：a[src$=".pdf"]
8.盒子模型
-
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
-
Margin(外边距) - 清除边框外的区域，外边距是透明的。
-
Border(边框) - 围绕在内边距和内容外的边框。
-
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
-
Content(内容) - 盒子的内容，显示文本和图像。
浙公网安备 33010602011771号