CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

eg:

20190714B01.jpg
20190714B01.jpg

css代码格式：

20190714B02.jpg
20190714B02.jpg
1
2
3
4
5
6
7
多条声明需要用分号分隔
<style type="text/css">
p{
   font-size:12px;  /*css的注释语句这样写*/
   color:red;
}
<style>

css样式有三种形式：内联式、嵌入式和外部式
①内联式

1
<p style="color:red;font-size:12px">这里文字是红色，大小为12px</p>

②嵌入式

1
2
3
4
5
6
7
8
9
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">
span{  /*选择器*/
   color:red;  /*样式*/
}
</style>
</head>

③外部式

1
2
3
4
5
6
7
8
连接style.css，样式写在了该文件中

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

三种样式的优先级：内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href=”style.css” …>代码在代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。
【其实总结来说，就是–就近原则（离被设置元素越近优先级别越高）】

类选择器 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
语法：
.类选器名称{css样式代码;}

注意：
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文噢）

使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>

第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="stress">胆小如鼠</span>

第三步：设置类选器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/

eg:

20190714B03.jpg
20190714B03.jpg

ID选择器

1
2
3
4
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：

1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）

eg:

20190714B04.jpg
20190714B04.jpg

imooc 8-5 –>go