CSS简介

1.CSS语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

h1 {color : red;  font-size : 25px;}

2.CSS基础选择器

2.1 标签选择器

语法：

标签名{
    属性1： 属性值1；
    属性2： 属性值2；

}

2.2 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

语法：

.类名 {
    属性1： 属性值1;

}

结构需要用class属性来调用class类的意思

<div class='red'>变红色</div>

2.3 id选择器

HTML元素以id 属性来设置id选择器，CSS中id选择器以“#”来定义。

语法：

#id名 {
    属性： 属性值1；

}

2.4 通配符选择器

在CSS中，通配符选择器使用“*”定义，他表示选取页面中所有元素（标签）。

语法：

* {
    属性1： 属性值1；
}

3.CSS字体属性

CSS Fonts属性用于定义字体系列、大小、粗细和文字样式（如斜体）。

3.1 字体系列

CSS使用font-family属性定义文本的字体系列。

p {font-family:"微软雅黑";}
div{font-family:Arial,"Microsoft yahei","微软雅黑";}

3.2 字体大小

p {
    font-size: 20px;
}

3.3 字体粗细

font-weight:normal /bold /bolder /lighter /number

3.4 文字样式

p {
    font-style: normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式

3.5 字体复合属性

body {
    font: font-style font-weight font-size/line-height font-family;
}

使用font属性是，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开；

不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。 

4.CSS文本属性

4.1 文本颜色

div {
    color: red;
}

表示	属性值
预定义的颜色值	red,green,nlue
十六进制	#FF0000,#FF6600
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

4.2 对齐文本

text-align属性用于设置元素内文本内容的水平对其方式。

div {
    text-align: center;
}

4.3 装饰文本

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线。上划线等。

div {
    text-decoration: underline;
}

属性值	描述
none	默认。没有装饰线（常用）
underline	下划线。链接a自带下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

4.4 文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

p {
    text-indent: 2em;
}

4.5 行间距

line-height属性用于设置行间的距离，可以控制文字行与行之间的距离。

p {
    line-height: 26px;
}

5.CSS的引入方式

5.1 行内样式表（行内式）

在元素标签内部的style属性中设定CSS样式，适合修改简单样式。

<div style="color: red;font-size: 12px;">我爱中国</div>

5.2 内部样式表（嵌入式）

<style>
div{
    color: red;

}


</style>

5.3 外部样式表（链接式）

引入外部样式表分为两步：

1.新建一个后缀名为.css的样式文件，把素有CSS代码都放入此文件中；

2.在HTML页面中，使用<link>标签引入这个文件。

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