选择器

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

#id_1
{
	text-align:center;
	color:blue;
} 
//元素属性id="id_1"
<p id="id_1">Hello World!</p>

Hello World！呈蓝色居中

class 选择器用于描述一组元素的样式，class 选择器不同于id选择器，class 选择器可以控制多个元素。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。

.class_01
{
	text-align:center;
}
<h1 class="class_01" id="id_1">标题居中,呈红色</h1>
<p class="class_01">段落居中。</p>

class 选择器可以和 id 选择器结合使用

.class_01
{
	text-align:center;
}
#id_1
{
	
	color:red;
} 
<h1 class="class_01" id="id_1">标题居中,呈红色</h1>
<p class="class_01">段落居中。</p>

标签选择器

每一个 HTML 标签的名称都可以作为相应的标签选择器的名称。

div1
{
	color:red;
}
div2
{
	text-align:center;
}
p
{
	color:blue;
}
<div1>
	<p>abcd</p>
</div1>
<div2>
	<p>二段落</p>
</div2>

CSS链接

链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。

设置链接处于不同状态的样式
a:link {color:green;}   /* 未访问链接*/
a:visited {color:red;}  /* 已访问链接 */
a:hover {color:purple;} /* 鼠标移动到链接上 */
a:active {color:gray ;} /* 鼠标点击时 */

盒子模型

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器

CSS盒子模型本质上是一个盒子,封装周围的HTML 元素，它包括：边框，外边框，内边距和实际距离。

边框 (border)

border可以设置元素的边框，边框有三部分组成边框宽度（粗细）边框样式边框颜色

边框样式值(border-style)

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

内边距（padding）

padding 影响了盒子的实际大小，如果盒子已经有了宽度和高度，内边框会撑大盒子。

Padding属性包含了

padding left ：左补距离（设置距左内边距）
padding top：头顶补距离（设置距顶部内边距）
padding right ：右补距离（设置距右内边距）
padding bottom ：底补距离（设置距低内边距）

外边框(margin)

margin属性用于设置外边框，即控制盒子和盒子之间的距离。

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距

CSS选择器和标准盒子

选择器