CSS（1）（学习笔记）

一、CSS简介

CSS的主要使用场景就是美化网页、布局页面的。

CSS是层叠样式表（Cascading Style Sheets）的简称。有时也会称为CSS样式表或级联样式表。

CSS也是一种标记语言。

CSS主要用于设置HTML页面中文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

1.1语法规范

css主要由主要的两个部分组成：选择器以及一条或多条声明。

• 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
• 属性和属性值以“键值对”的形式出现
• 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
• 属性和属性值之间用英文“:”分开
• 多个“键值对”之间用英文“:”进行区分

1.2选择器的作用

选择器（选择符）就是根据不同需求把不同的标签选出来，简单来说就是选择标签用的。

选择器分类：基础选择器和复合选择器两大类。

1.3基础选择器

基础选择器由单个选择器组成，基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器。

1.3.1标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

语法：

标签选择器可以把某一类标签全部选择出来，但不能差异化设计样式。

1.3.2类选择器

如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器。

类选择器在HTML中以class属性表示，在css中，类选择器以一个点“.”号显示。

语法：

结构需要用class属性来调用class类的意思。

我们可以给一个标签指定多个类名。

多类名使用方式：

（1）在标签class属性中写多个类名

（2）多个类名中间必须用空格分开

（3）这个标签就可以分别具有这些类名的样式

1.3.3id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

语法：

注意：id属性只能在每个HTML文档中出现一次。

类选择器和id选择器区别：

1.3.4通配符选择器

在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

语法：

通配符选择器不需要调用，自动给所有的元素使用样式。

总结：

1.4CSS属性

1.4.1字体属性

CSS使用font-family属性定义文本的字体系列：

1.4.2字体大小

使用font-size属性定义字体大小

1.4.3字体粗细

使用font-weight属性设置文本字体的粗细：

1.4.4字体样式

使用font-style属性设置文本的风格。

注意：平时很少给文字加斜体，反而要给斜体标签（em、i）改为不倾斜字体。

1.4.5字体复合属性

字体复合属性可以把以上文字样式综合来写，这样可以更节约代码：

1.5文本属性

1.5.1文本颜色

color用于定义文本的颜色：

1.5.2文本对齐

text-align属性用于设置元素内文本内容的水平对齐方式

1.5.3装饰文本

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等。

1.5.4文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

1.5.5行间距

line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。（可用来用于单行文字垂直居中，行高=盒子高度，如果行高<盒子高度，文字就会偏上，如果行高>盒子高度，则文字偏下）

1.6引入方式

按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类：

1. 行内样式表（行内式）
2. 内部样式表（嵌入式）
3. 外部样式表（链接式）

1.6.1内部样式表

是写道html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中。

1.6.2行内样式表

行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式。

1.6.3外部样式表

实际开发都是外部样式表，适合与样式比较多的情况。核心是：样式单独 写到CSS文件中，之后把CSS文件引入到HTML页面中使用。

1.7调试

二、CSS

2.1Emmet语法

快速生成HTML语法样式：

快速生成CSS样式语法：

2.2CSS的复合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

2.2.1后代选择器

后代选择器又称包含选择器，可以选择父元素里面子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分开。当标签发生嵌套时，内层标签就成为外层标签的后代。

2.2.2子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

2.2.3并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。

并集选择器是各种选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

2.2.4伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号（:）表示，比如：hover

伪类选择器很多，比如有链接伪类、结构伪类等。

①链接伪类选择器：

链接伪类选择器实际开发中的写法：

②:focus伪类选择器：

用于选取获得焦点的表单元素。

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

2.3.5复合选择器总结

2.3CSS的元素显示模式

作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

HTML元素一般分为块元素和行内元素两种类型。

①块元素

②行内元素

③行内块元素

在行内元素中有几个特殊的标签------<img />、<input />、<td>，他们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素。

④元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另一个模式的特性，比如想要增加链接<a>的触发范围。

Snipaste的使用：

2.4CSS的背景

①背景颜色：background-color

②背景图片：

③背景平铺

④背景图片位置

⑤背景图像固定（背景附着）

⑥背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。

⑦背景色半透明

CSS3为我们提供了背景颜色半透明的效果。

2.5CSS的三大特性

①层叠性：相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式的问题。

层叠性原则：

②继承性：子标签会继承父标签中的某些样式，如文本的颜色和字体

a链接不会继承：

行高的继承性:

③优先级

当同一个元素指定多个选择器，就会有优先级的产生。

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

优先级注意点：

2.6CSS的注释