HTML只关注内容的语义，做样式时非常繁琐且不美观。

CSS（Cascading Style Sheets）称为CSS样式表或级联样式表，主要用于设置HTML页面中文本内容，段落设置，版面布局等。

让HTML专注于结构呈现，样式交给CSS，实现结构和样式的相分离。

一. CSS语法规范

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

属性和属性值之间以键值对形式存在，并且用冒号分隔，一定要加分号！

p {color: red;font-size: 12px;
}

二. CSS代码风格：不强制规范，只是方便开发

1. 样式格式书写

（1）紧凑型：一串（2）展开型：如上代码

2. 样式大小写风格：小写字母，特殊情况除外

3. 样式空格风格：属性值前面，冒号后面保留一个空格；选择器和大括号之间保留空格

三. CSS基础选择器

分为：基础选择器，复合选择器。

基础选择器：标签选择器，类选择器，id选择器和通配符选择器

1. 标签选择器：将HTML标签名作为选择器

标签 {属性1: 属性值1;属性2: 属性值2;...
}

不能设计差异化样式，只能统一设置。

2. 类选择器：单独选择其中的一个或某几个标签

.red（类名）{属性1: 属性值1;...
}<p class="red">yes</p>

多类名：一个标签由多个名字。多个类名中必须要用空格隔开。

3. id选择器

#id名 {属性1: 属性值1;...
}
#nav {color: red;
}

id选择器：样式通过#定义，结构id调用，只能调用一次，别人无法使用。

类选择器像人名，可以多次使用；id选择器像身份证号，唯一的。

4. 通配符选择器

用*定义，选取页面中所有标签。

* {属性1: 属性值1;...
}

四. CSS字体属性

CSS Fonts

1. 字体系列：font-family

p {font-family: '微软雅黑';
}
div {font-family: 'Microsoft Yahei', Arial;
}
//多个字体的兼容性好，如果第一个没有，就找第二个，以此类推，找不到就用系统默认字体。

2. 字体大小：font-size: 20px; px 为像素

可以给body指定整个页面文字的大小，其中标题的大小需要特定指定。

3. 字体粗细：

font-weight: normal/bold/bolder/lighter/number(number后不需要跟单位）

number=700为加粗。number=400为正常。

4. 文字样式：font-style

normal：正常值；italic：斜体值。

5. 复合属性：

body {//font: font-style font-weight font-size/line-height font-family;font: italic 700 16px 'Microsoft yahei';
}
//不能随意换位置

不需要设置的属性可以省略，但必须保留size和family的，不然font不起作用。

五. CSS文本属性

颜色，对齐文本，装饰文本，文本缩进，行间距等。

1. 颜色：color

2. 对齐文本：text-align: center 水平居中对齐。

div {text-align: center;
}
//可以为left,right,center

3. 装饰文本：text-decoration 下划线，删除线，上划线

div {text-decoration: underline;
}
//none, overline, line-through

4. 文本缩进：text-indent 段落首行缩进

em是一个相对单位，就是当前元素一个文字的大小。

p {text-indent: 2em;
}

5. 行间距：line-height 单位也为px

六. CSS的引入方式

1. CSS的三种样式表：行内样式表，内部样式表（嵌入式），外部样式表（链接式）

2. 内部样式表：放在HTML页面的style标签里，理论上可以放在任何地方，但一般放在head标签中，可以控制整个页面的样式。代码结构清晰，结构与样式相分离，但没完全分离。

3. 行内样式表：在行内操作。适合简单样式修改。

<p style="color: pink;">...</p>

4. 外部样式表：单独写到CSS文件中，再引入CSS文件到HTML页面中使用。

新建一个后缀名为.css的样式文件，将css样式放入。

在HTML页面中，使用link标签引入文件。

<link rel="stylesheet href="css文件路径">

七. Chrome调试工具

CSS3 自学笔记（一）相关推荐

CSS3 自学笔记（二）
一. Emmet语法:提高编写CSS和HTML的速度快速生成HTML: .demo$*5将会生成div class="demo1"至"demo5". div{ ...
深入理解弹性盒布局（fiex-box）——Web前端系列自学笔记
文章目录弹性盒布局弹性盒布局概述弹性盒布局属性 display flex-flow justify-content align-items order flex align-self 总结弹性 ...
C语言入门 —— 非科班大一学生的C语言自学笔记
初入前端的北京某211大一非科班生(没错上学期还是日语生)的C语言自学笔记本文约8k字,将介绍:编程基础数据类型表达式语句与控制流函数数组,指针结构体等会随着学习进度推进持续更新~ 学习 ...
HTML5+CSS3学习笔记（第1章）HTML基础
HTML5+CSS3学习笔记(第1章)HTML基础今天是居家隔离第一天,自学HTML5. 1.1HTML概述什么是HTML HTML是一种标记语言.(Hyper Text Markup langu ...
字节跳动大佬的Python自学笔记.pdf
1. 字节跳动大佬的Python自学笔记这是我的一个朋友自学资料包,通过这个资料包自学拿到了字节跳动的Offer, 下面是他之前入门学习Python时候的学习资料,非常全面,从Python基础.到w ...
JAVA自学笔记07
JAVA自学笔记07 1.构造方法 1) 例如:Student s = new Student();//构造方法 System.out.println(s);// Student@e5bbd6 2)功 ...
MySQL自学笔记2--select的5个子句
MySQL自学笔记使用的MySQL自带命令客户端,其中具体的操作是在自建的数据库下room303表中进行的,表中的列有:id.name.age.email.tel.salary.riqi.class ...
JAVA自学笔记24
JAVA自学笔记24 1.能使用同步代码块就使用同步代码块,除非锁对象是this,就可以考虑使用同步方法.静态方法的锁是类的字节码对象. 2.JDK5新特性 1)接口Lock void Lock()/ ...
怎么用vc采集ni卡数据_SystemLink自学笔记（6）：SystemLink架构和数据服务
1. SystemLink架构和数据服务 1.1. 架构和特点现在在对SystemLink的功能有了一个大概的了解后,可以进一步从它的整体架构学习这门新技术了.NI官网给出了白皮书,原文是英文资料, ...

CSS3 自学笔记（一）