学习css的总结

1.什么是css？

CSS (cascading Style Sheet的缩写)，可译为层叠样式表或级联样式表，用于控制页面的外观。

2.css的语法格式：

选择器{

属性：值;

属性：值;

...

}

3.css的引入方式

--行内式/标签内

举例：

<div style='width:100px;height:100px;background:red;'></div>

--内嵌式

css内嵌式写法，写在head标签里面，title标签下面，用style标签包裹。

举例：

<style>

div{

width:100px;

height:100px;

background:red;

}

</style>

--外链接

先建一个css文件夹，在css文件夹里面创建css文件，html文件通过link标签里面的 href属性找到该css文件。

举例：

<link rel="stylesheet" type="text/css" href="css/index.css"/>

--@import链接（了解就行，被摒弃的引入方式）

举例：

<style type="text/css">

@import url("css/index.css");

</style>

4.引入方式的优缺点：

行内式/标签内：

--优点：

--优先级最高。

--加载速度快。

--缺点：

--书写不方便，不容易修改样式，代码量大。

--只能够控制单个标签。

--增加html页面的体积。

内嵌式：

--优点：

--加载速度快。

--可以控制多个相同标签的相同外观/样式。

--减少代码量，提高工作效率。

--缺点：

--不能够控制多个html页面。

--增加html页面的体积。

外链接：

--优点：

--可以控制多个相同标签的相同外观/样式。

--减少代码量，提高工作效率。

--能够控制多个html页面。

--不增加html页面的体积。

--缺点：

--加载速度相比较慢。

--优先级最低。

5.引入方式的优先级：

行内>内嵌>外链接

**浏览器解读代码的顺序是从上到下，从左到右依次解析。

**内嵌样式和外链接样式谁在下，谁的优先级大

6.css继承特点：

--子标签继承父标签及祖父标签以上的特点

--标签必须是嵌套关系

--一般情况下，子标签只能继承字体属性

7.html控制页面结构，css控制页面外观，js控制页面行为