2021-02-08至2021-02-14复习css的笔记

CSS简介

一、HTML的局限性

1.HTML只关注内容的语义。

二、CSS —— 网页的美容师

1.CSS 是 层叠样式表(Cascading Style Sheets)。（有时也会称之为 CSS样式表 或者 级联样式表）

2.CSS也是一种标记语言。

3.CSS的主要作用：用于设置HTML页面中的 文本内容(字体种类、字的大小、文本的对齐方式等)、图片的外形(宽高、边框样式、边距等)、版面的布局、外观显示样式。

4.CSS让网页更加丰富多彩、布局更加灵活自如。简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。

三、HTML和CSS各司其职，共同构成前端

1.HTML主要做结构，显示元素内容。

2.CSS美化HTML，布局网页。

3.CSS最大的价值：让HTML专注做结构呈现，样式交给CSS，即让 结构(HTML) 与 样式(CSS) 相分离。

CSS语法规范与代码风格规定

一、CSS语法规范

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

2.示例：

​ h1{color: red; font-size: 25px;}

h1：选择器

color：属性

red：属性值

“color：red；”：一条声明

• 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。

• 属性和属性值以 键值对 的形式出现。

• 属性是对指定对象设置的样式属性，例如字体大小、文本颜色等。

• 属性和属性值之间用英文“:”分开

• 多个键值对之间用英文“;”进行区分

二、CSS代码风格（符合实际开发时的要求）

1.样式格式书写

【1】紧凑格式

h3 {
color: deeppink;
font-size: 20px;
}

【2】展开格式

h3 {
color: pink;
font-size: 20px;
}

【3】提倡使用展开格式，因为更直观。

2.样式大小写风格

【1】提倡 选择器、属性名、属性值 全部使用小写字母。特殊情况除外。

3.样式空格风格

【1】空格规范写法

h3 {
color: pink;
}

• 属性值前面，保留一个空格
• 选择器与大括号之间保留一个空格
  
  
  
  
  

CSS引入方式

一、CSS引入方式总览

样式表	优点	缺点	实际使用频率	能控制的范围
行内样式表（行内式）	书写方便，权重高	未分离结构与样式	较少（但常用于只为标签赋少量属性时）	能控制一个标签
内部样式表（嵌入式）	部分结构与样式分离	未彻底分离结构与样式	较多	能控制一个页面
外部样式表（外链式）	完全实现结构与样式相分离	需要引入	最多	能控制多个页面

二、行内式

1.定义

• 行内样式表(内联样式表) 是 在元素标签内部的style属性中设定CSS样式。（适用于修改少量、简单的样式）
• 使用行内样式表设定CSS，通常也被称为 行内式引入。

2.语法

< div style=“color:red; font-size:12px;”>示例文字< /div>

• style其实就是标签的属性。

3.优缺点与使用频率

• 由于行内式书写繁琐，并且没有体现出结构与样式分离的思想，所以不推荐大量地使用行内式。（只有当对元素添加少量、简单的样式的时候，才会为了方便而使用行内式）

4.能控制的范围

• 能控制所属的这一个标签。

5.注意

• 注意双引号里面定义样式时的格式要规范，要用冒号、要加上分号。

二、嵌入式

1.定义

• 内部样式表(内嵌样式表) 是 将CSS代码抽取出来，单独放到一个标签中，并写在HTML页面中。
• 使用内部样式表设定CSS，通常也被称为 嵌入式引入。

2.语法

• < style>标签理论上可以放在HTML页面的任何地方。（但一般都是放在标签中）

3.优缺点与使用频率

• 嵌入式代码结构清晰，但是并没有实现结构与样式完全分离。一般用于练习，而在实际开发中提倡使用链入式。

4.能控制的范围

• 能控制所属的这一个页面。

三、外链式

1.定义

• 外部样式表 的核心是 将样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
• 使用外部样式表设定CSS，通常也被称为 链接式引入 或者 外链式。

2.语法

引入外部样式表分为两步：

第一步：新建一个后缀名为.css的文件，把css代码放入此文件中。

第二步：在HTML页面中，使用标签引入这个文件。

< link rel=“stylesheet” href=“css文件的url”>

的属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定属性值为stylesheet，表示被链接文档是一个样式表文件
href	定义所链接的外部样式表文件的URL，可以是相对路径，也可以是绝对路径

3.优缺点与使用频率

• 完全实现结构与样式相分离，减少了HTML的代码量，在实际开发中最常用。常使用于样式比较多的情况。

4.能控制的范围

• 能控制多个页面。
  
  
  
  
  

CSS选择器（选择符）

一、CSS选择器的作用

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

二、CSS选择器的种类

1.选择器 分为 基础选择器和复合选择器。

2.基础选择器：

【1】基础选择器 是 由单个选择器组成的选择器。

【2】基础选择器 分为 标签选择器、类选择器、id选择器、通配符选择器。

3.复合选择器：

【1】复合选择器 是 由两个或多个基础选择器，通过不同的方式组合而成的选择器。（复合选择器是建立在基础选择器的基础之上，对基本选择器进行组合形成的选择器）

【2】复合选择器 分为 后代选择器、子选择器、并集选择器、伪类选择器 等等。

【3】复合选择器 可以 更准确、更高效地选择目标元素（标签）。