CSS（层叠样式表）

作用

修饰HTML页面，美化

CSS代码规范

放置规范
- 在<style>标签内容体中书写样式代码
- <style>标签放置在<head>标签内、
格式规范
- 选择器名称{属性名:属性值; .....}
- 选择器：指定CSS样式作用在哪些HTML标签上
代码规范
- 属性名和属性值之间是键值对关系
- 属性名和属性值之前使用：连接，最后用;结束
- 如果一个属性名有多个属性值，那多个值之间使用空格分开
- CSS注释：/*注释内容*/

CSS选择器

元素选择器

就是以HTML中的标签名作为选择器名称
选择CSS代码作用于对应标签名的标签上
适用于将相同样式作用于多个同名标签上

类选择器

给相应的标签设置class属性

.类名{

    /*CSS样式代码*/

}

适用于将样式一次作用在相同类名的标签上

id选择器

每个HTML标签都有一个id属性，id属性值必须在本页面是唯一的

#id值{

    /*CSS样式代码*/

}

适用于将样式作用某个标签上

层级关系

对选择器进行组合，表现出层级关系，从而更加针对性把样式作用于某些标签上

/*选择器1下的选择器2*/

选择器1 选择器2...{

    /*CSS样式代码*/

}

常用样式

边框属性

border

/*1像素粗的 实线 红色边框*/

border:1px solid red;

/*

    线条形式：

        solid 实线

        none 无边

        double 双线

*/

width
```
/*宽度300像素*/

width:300px
```
height
```
/*高度100像素*/

height:100px
```

background-color

/*背景颜色红色*/

background-color:red

/*

背景颜色设置主流方式：

	1. 英文单词

	2. 颜色代码（每一个颜色用16进制位数表示）

*/

布局

/*浮动：居右*/

选择器{

    float:right;

}

常用属性值:

none 元素不浮动

left 元素向左浮动

right 元素向右浮动

注意：

设置浮动属性后，会脱离原有的文档流（即原有的板式），从而影响其它元素的样式，所以设置浮动后，页面样式需要重新调整

转换

块元素：以区域块方式出现，每个块标签独自占据一整行或多整行，块结束会自动换行
- 常见块级元素：
  
  <h1> <p> <div> <ul>
行内元素：根据内容多少来占用行内空间，不会自动换行
- 常见的行内元素<span> <a>

display属性可以使得元素在行内元素和块元素之间相互转换

选择器{

    display:属性值;

}

常用属性值：

	block:将元素变为块

	inline:将元素变为行内元素

	none:此元素将被隐藏，不显示，也不占用空间

字体

/*设置字体大小*/

font-size:

/*设置字体颜色*/

color:

CSS盒子模型

所有的HTML元素都可以看成一个四边形

设置盒子的形式，就是盒子模型

边框(border)

HTML元素盒子的框体

上边框（border-top）
下边框（border-buttom）
左边框（border-left）
右边框（border-right）

通用设置(上下左右都设置)：border:1px solid;

内边距(padding)

HTML元素里的内容体到HTML元素边框的距离

左边距（padding-left）
右边距（padding-right）
上边距（padding-top）
下边距（padding-buttom）

通用设置：padding:10px;

外边距(margin)

一个HTML元素框体到另一个HTML元素框体的距离

上边距（margin-top）
下边距（margin-buttom）
左边距（margin-left）
右边距（margin-right）

通用设置：margin:10px;

CSS与HTML的结合方式

内部样式

在标签内书写style属性

<a style="color：red;">这是一个样式示例</a>

使用style标签，在此标签体内书写CSS样式

<style>

    a{

        color:red;

    }

</style>

外部样式

适用于不同页面的CSS样式复用

抽成一个CSS文件，然后在HTML中调用

如何调用？使用link标签（写在head标签当中）

<link rel="stylesheet" type="text/css" href="css文件路径"/>

<!--

	rel属性：固定值，表示样式表

	type属性：固定值，表示CSS类型

	href属性：表示CSS文件位置

-->

巴特西

CSS相关知识及入门