选择器

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)

内边距（padding）

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

Padding属性包含了

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

外边框(margin)

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