CSS样式基础

目录

1.概念

2.引入方式

3.CSS选择器

4.盒子模型（Box Model）

---

1.概念

• 美化我们的HTML页面
• 层叠样式

---

2.引入方式

 内嵌方式(内联方式)
把CSS样式嵌入到html标签当中，类似属性的用法，示例如下：

<div style="color:blue;font-size:50px">This is my HTML page. </div>

内部方式
在head标签中使用style标签引入css,示例如下:

<style type=“text/css”> //告诉浏览器使用css解析器去解析
div{color:red;font-size:50px}
</style>

外部方式
将css样式抽成一个单独文件，谁用谁就引用，示例如下：

单独文件div.css

div{color:green;font-size:50px}
引用语句写在head标签内部

<link rel="stylesheet" type="text/css" href=“div.css"></link>
    rel:代表当前页面与href所指定文档的关系
    type:文件类型，告诉浏览器使用css解析器去解析
    href:css文件地址

---

3.CSS选择器

3.1标签选择器 

 此种选择器影响范围大，建议尽量应用在层级选择器中。举例：

3.2 属性选择器

根据元素的属性及属性值来选择元素。

格式为 htm标签[属性=‘属性值']{css属性:css属性值;}或html标签[属性]{css属性:css属性值;}

3.3 id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置顶只能对应页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

3.4 类选择器

 通过类名来选择元素，一个类可应用于多个元素，一个元素也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。举例：

 3.5通配符选择器

通配符选择器用 * 号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

例如下面的代码，使用通配符选择器定义 CSS 样式，清除所有 HTML 标记的默认边距。

* {
    	margin:0;   /*清除外边距*/
    	padding: 0; /*清除内边距*/
	}

---

4.盒子模型（Box Model）

盒子的组成
一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

盒子成分分析
margin
margin，盒子的外边框，他是完全透明的，开发者只可以设置它的边距

margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距

padding
padding表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。

padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充

border
border表示盒子的边界，它可以设置成可见的，样式多样的。

最基本的，border像margin和padding一样可以分别对每一条边进行设置，也可以使用简写属性border进行设置。

border-top：上边界
border-bottom：下边界
border-left：左边界
border-right：右边界

border-sytle属性可取值：

none：定义无边框。
hidden：与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted：定义点状边框。在大多数浏览器中呈现为实线。
dashed：定义虚线。在大多数浏览器中呈现为实线。
solid：定义实线。
double：定义双线。双线的宽度等于 border-width 的值。
inherit：规定应该从父元素继承边框样式。
border-top-width：上边界宽度
border-top-style：上边界样式
border-top-color：上边界颜色
border-bottom-width：下边界宽度
border-bottom-style：下边界样式
border-bottom-color：下边界颜色
border-left-width：左边界宽度
border-left-style：左边界样式
border-left-color：左边界颜色
border-right-width：右边界宽度
border-right-style：右边界样式
border-right-color：右边界颜色