这都2020年了，还没了解CSS？

对于新人来说想要了解css，就要从最基本的入手了解，讲真的学习css入门很简单，学习html 和css短时间后你就可以制作一个网页，深入的去学习的话，就会很难。他就是从简——深——深——简的一个过程，如果你真正熟悉掌握之后，就可以轻松对付日常工作。

不管是传统的Web开发或者是现代的Web应用开发，至少到今天为止还是离不开CSS。这篇文章带你们认识一下css.

什么是CSS？

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称就是样式表，

1、 用于html文档中元素样式的定义，实现了将内容与变现分离，提高了代码的可重用性和可维护性

例如：

效果图片：

html:页面结构

css:页面美容

2、 文件后缀是.css

3、 样式通常存储在样式表中

4、 外部样式表可以极大提高工作效率

5、 外部样式通常存储在CSS文件中

6、 多个样式定义可层叠为一

CSS与HTML 之间的关系是什么？

1、 HTML用于构建网页的结构

2、 CSS用于构建HTML元素的样式

3、 HTML是页面的内容组成，CSS是页面的变现

结构层：HTML 表示层：CSS 行为层：JavaScript

怎样使用CSS样式表的方式？

1、内联方式
使用style属性，只是对当前标签有效，页面内容和样式高度耦合(直接把CSS代码用style属性添加到开始标签中)

2、内部样式表
在head中使用style标签，当前页面有效，内容和样式一定程度分离，但是不彻底(直接把CSS代码添加到头部的style标签中)

3、 外部样式表
将样式写到一个单独CSS文件中，需要用到HTML文件，引用它即可。

4、 导入式

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

css*加载方式link和@import的区别，为什么不推荐使用@import？

1、@import是CSS提供加样式的一种方式，只能用于加载CSS。Link标签除了可以加载CSS外，还可以做很多其他的事情，比如定义rel连接属性等。

2、加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览器@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会比较明显。

3、兼容性的差别。@import在IE5以上才能识别，而link标签无此问题。

4、使用dom控制样式时的差别。当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为dom操作元素的样式时，用@import方式的样式也许还未加载完成。

5、使用@import方式会增加html请求，会影响加载速度，所以谨慎使用该方法。

CSS语法

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

1、 css是以属性/值对形式出现

2、 属性（property）是您希望设置的样式属性（style atribute）。每个属性都有一个值，属性和属性值之间用冒号（：）连接

如：selector{property**：**value}

3、 多对属性之间用分号（；）隔开

如：h1{color:red;font-size:14px;}
在这里插入图片描述

注释格式：<!—html注释语句–>

​ /*css注释语句 */

​ Html/css注释快捷键：Ctrl+/ 单行注释/取消注释

​ Ctrl+shift+/ 多行注释/取消注释

基本属性：

字体属性：

font-style：字体（斜体）

font-variant ：字体的变化（大小写）

font-weight ：字体粗细

font-size：字体大小

font –family：字体名称

**文本相关属性：**主要包含颜色color、对齐方式text-algin、修饰效果text-decorationt

尺寸属性：

height：设置元素的高度

line-height：设置行高

max-height：设置元素的最大高度

max-width：设置元素的最大宽度

min-height：设置元素的最小高度

min-width：设置元素的最小宽度

width：设置元素的宽度

背景相关：

CSS说简单也很简单，无非就是记和练。记得全了，练习的多了，自然而然就会用了。说难也难，因为它涉及面比较广。所以说先从简单的学起，边学边记边练，只要把最常用的牢记并且熟练应用，基本的任务也就可以轻松应对。