阿里云前端路线 | CSS快速掌握
1.1什么是CSS
翻译为“层叠样式表”或者“级联样式表”，
简称样式表。
1.2CSS的主要作用
它主要是用来给HTML网页来设置外观或者样式
外观或者样式：HTML网页中的文字的大小、颜色、字体，网页的背景颜色、背景图片！
1.3书写CSS的语法规则
|
Key |
|
values |
|
Key |
|
values |
,h1 {color:red; fornt-size:14px;}
|
选择器 |
|
声明 |
|
声明 |
l Css代码是由选择器和一对括号组成
l 大括号里面是由一条一条的声明语句组成
l 每一条语句都要使用英文装填下面的分号
l 每一句语句是由“key:values”组成
l Css中的属性值一般不加引号
l 在CSS中如果属性值为数值型数据的时候 一般情况需要加单位 单位一般都是px
l 在css中不能出现HTML标签
2.css代码的书写方式
2.1什么是书写方式
Css代码应该书写在什么地方！
书写方式分为三种：嵌入式、外链式、行内式
2.2嵌入式
什么是嵌入式？
将css代码嵌入到HTML文件中，嵌入式是通过HTML中<style>标签将CSS代码嵌入到HTML网页中！(<style></style>标签一般情况下可以放在任意位置，但通常情况下放在<head>标签中)
语法规则：
<head>
<style type=”text/css”>
/*书写CSS代码*/
选择器{属性:值;属性:值;}
</style>
</head>
Eg:
如果我们使用的是HTML5的文档 type属性可以省略不写！
2.3什么是外链式？
外链式是指单独写一个以 .css 为扩展名的文件，然后在<head></head>标签中使用<link />标签，将这个css文件链接到html文件中
注意：
Css文件不能单独的运行，必须依赖HTML文件！
Link标签可以有多个，一个HTML页面可以同时的引入多个单独的CSS
语法格式：
<link rel=”stylesheet“ type=”text/css” href=”CSS文件的地址“>
代码示例：
我们一定要确认.css文件被引入，怎么确认？
2.4什么是行内式？
将CSS代码书写HTML标签的style属性中
Style是一个通用属性，每一个标签里面都拥有这个属性！
语法格式：
<标签名 style=”key:value;key:value;”></标签名>
总结：
l 使用嵌入式的方式来书写css代码，它只能作用域当前的HTML文件
l 使用外链式的方式来书写css代码，它可以作用于多个HTML
3.注释
格式：
/*注释内容*/
Sumlime 快捷键注释 Ctrl+Shift +/
注意：
Css中只能使用/* */注释
❌<!-- --> 不能使用
4.选择器
4.1什么时选择器
选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式
选择器分为四大类：基本选择器、复合选择器、伪类选择器、属性选择器
4.2基本选择器
4.2.1通用选择器：
4.2.2标签选择器：
4.2.3类选择器
4.2.4Id选择器
4.3复合选择器
4.3.1多元素选择器
4.3.2后代元素选择器
效果：
4.3.3子元素选择器
效果图：
4.3.4相邻元素选择器
效果图：
5．尺寸样式属性
Eg:
问：<span></span>便签能够设置高度、宽度嘛？
答：不可以，因为span标签是一个行内元素，他不可以设置高度、宽度。只有块级元素才可以设置高度和宽度！
6.文本与字体属性
6.1文本属性
https://edu.aliyun.com/lesson_1895_16145#_16145
6.2字体属性
7.列表样式属性：
这里的列表指的是：无序列表和有序列表
因为在整个网页布局中无序列表是使用的最多的。
List_style_image:将列表前面的项目符号设置为一张图片 它的值是：： url(图片的地址)
List-style:这个属性是一个简写属性 它集成了上面三个属性的功能。可以同时设置上面的三个属性。每一个属性值之前使用空格分隔！它的属性值可以有一个也可以有两个也可以三个。其属性值个数不定，位置也不定！
