一、CSS概述

CSS：（Cascading Style Sheet）级联样式表，表现HTML或XHTML文件样式的计算机语言，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。简单来说CSS就是用于美化网页的。

CSS的优势：

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收

二、CSS的基本样式介绍

color：设置文本颜色，例如green、red、blue等。
border：设置边框
width：设置宽度
height：设置高度
background：设置背景色
text-align：设置文本水平对齐方式，例如text-align:right;
text-align的值：left：默认值，把文本排列到左边；right：把文本排列到右边；center：把文本排列到中间；justify：实现两端对齐文本效果。
font：在一个声明中设置字体属性，例如font:italic bold 20px “宋体”
font-familly：设置字体类型，例如楷体、宋体等。
font-size：设置字体大小，例如20px（像素）。
font-style：设置字体风格，例如italic。
font-weight：设置字体的粗细，例如bold（加粗）
font-weight的值：normal：默认值，定义标准的字体；bold：粗体字体；bolder：更粗的字体；lighter：更细的字体；100~900：定义由细到粗的字体，400等同于normal，700等同于bold。

如果想要在一段文字中设置不同的样式，可以使用span标签
语法：

<p>如果想要在<span style=\"color:red;\">一段文字</span style=\"font-size:20px;\">中设置不同的<span>样式</span>，可以使用span标签。</p>

span标签可以将一部分文字包裹住统一设置样式。像strong、em、u标签一样，是行级标签。

三、CSS的三种样式

1、行内样式

行内样式：顾名思义，就是将style样式直接写在HTML标签中。

格式：

<p style=\"color: red;\">CSS行内样式</p>

<!DOCTYPE html><html><head><meta charset=\"utf-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>CSS行内样式</title></head><body><div><p>CSS行内样式例句1</p><!-- 行内样式 --><!-- style=\"key: value\" --><p style=\"color: red; font-size: 20px;\">CSS行内样式例句2</p></div></body></html>

优点：简单直接,每次给一个标签赋予某些样式
缺点：有些相同样式不能复用,并且标签多了的话样式写起来很乱很麻烦

2、内部样式

内部样式：将style样式使用style标签同一写在head标签中。

格式：

<head><style type=\"text/css\">h1{font-size:10px;}</style></head>

<!DOCTYPE html><html><head><meta charset=\"utf-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>CSS内部样式</title><style type=\"text/css\">p{color: greenyellow;font-size: 30px;font-family: 楷体;/* 加粗 */font-weight: bold;}</style></head><body><div><!-- 采用了内部样式 --><p>CSS内部样式例句1</p><!-- 行内优先级高于内部样式 因此颜色采用了行内样式 --><p style=\"color: darkmagenta;\">CSS内部样式例句2</p></div></body></html>

优点：本页面的CSS可以得到很好的复用
缺点：内部样式无法在文件与文件之间共享样式,而且内部样式写多了之后整个页面的可读性变差,内容全都耦合在一起不方便修改和阅读

3、外部样式

外部样式：将style样式写到css文件中，哪个HTML网页需要使用该样式就将css文件通过标签引入到head标签中即可。

格式：

<head><!-- href:css文件的路径 --><!-- rel：指定使用外部样式表 --><!-- type：指定文件类型 --><link href=\"style.css\" rel=\"stylesheet\" type=\"text/css\" /></head>

css文件：

/*** CSS外部样式* 样式写入到一个文件中，哪个html网页需要使用，直接将该css文件引入即可**/p{color: greenyellow;font-family: \"宋体\";font-weight: bold;font-size: 50px;align-content: center;}

html文件：

<!DOCTYPE html><html><head><meta charset=\"utf-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>CSS外部样式</title><link rel=\"stylesheet\" type=\"text/css\" href=\"css/css_style.css\"/><style type=\"text/css\">p{font-size: 30px;}</style></head><body><!-- 内部优先级高于外部样式 因此字体大小采用了行内样式 --><p>CSS外部样式例句1</p><!-- 行内优先级高于外部样式 因此颜色采用了行内样式 --><p style=\"color: red;\">CSS外部样式例句2</p></body></html>

4、3种样式的优先级

样式的优先级采用就近原则，哪个样式离HTML标签近就采用哪个样式。

行内样式优先于内部样式
内部样式优先于外部样式

优先级：行内样式 > 内部样式 > 外部样式

四、CSS的三种选择器

1、标签选择器

标签选择器：将HTML标签作为标签选择器的名称，覆盖的范围最大，优先级最低。

语法:

标签选择器{/* 声明 */属性：值；}p{font-size:10px;}

2、类选择器

类选择器：将HTML标签中的class属性作为选择器的名称，因为标签的class属性的值可以重复,所以通过class属性可以获取一个或者多个标签,从而来设置他们的样式。覆盖范围适中，优先级适中。

语法：

/* #id名称   id选择器 */#id{/* 声明 */属性：值；}.class{font-size:10px;}

3、id选择器

id选择器：将HTML标签中的id属性作为选择器的名称，通过HTML设置的id属性来获取表单,由于一个HTML页面中每个标签的id属性是唯一的,所以这个选择器每次只能获取一个标签。范围覆盖最小，优先级最高。

语法：

/* 标签.类名   类选择器 */标签.类名{/* 声明 */属性：值；}#id{font-size:10px;}

<!DOCTYPE html><html><head><meta charset=\"utf-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>CSS三种选择器</title><style type=\"text/css\">/* 标签选择器 可以选择body中所有相同的标签 选择范围最大 */p{color: red;}/* 类选择器 可以选择一个标签下同一组类名相同的标签 选择范围中等*/p.c1{font-family: 楷体;}/* id选择器 可以选择唯一id的标签 选择范围最小*/#i1{font-size: 20px;}</style></head><body><div><!-- 标签 选择全部， class 选择一组，	id 选择唯一 --><!-- class属性可以重复，id属性尽量不要重复（id应该是唯一标识） --><p class=\"c1\" id=\"i1\">CSS选择器例句1</p><p class=\"c2\" id=\"i2\">CSS选择器例句2</p><p class=\"c1\" id=\"i3\">CSS选择器例句3</p><p class=\"c2\" id=\"i4\">CSS选择器例句4</p></div></body></html>

4、CSS选择器的优先级

特点：哪个选择器单独影响范围小就执行哪个选择器

id选择器优先于类选择器
类选择器优先于标签选择器

不论哪种方式引入CSS样式，优先级一般都遵循：id选择器 > class类选择器 > 标签选择器

CSS简单应用