前端速通（CSS）

1.CSS介绍

1.什么是CSS

CSS（Cascading Style Sheets，层叠样式表）是一种用于控制网页的外观和布局的样式表语言。它与HTML（超文本标记语言）紧密配合，负责页面元素的样式定义，如字体、颜色、尺寸、排版和布局等。

总之，HTML负责网页的结构和内容，而CSS则负责网页的视觉展示，使网页更加美观和易于使用。

CSS的基本功能：

定义样式：CSS通过定义样式规则，控制网页上各个HTML元素的外观。样式规则可以包括颜色、字体、边距、相似、背景、位置、大小等属性。
布局管理：CSS可以控制元素在页面上的位置和布局，包括使用传统的盒模型（box model）、弹性布局（flexbox）和网格布局（grid）等技术。
响应式设计：通过CSS媒体查询（媒体查询），可以根据不同设备的屏幕大小、分辨率等条件，调整网页布局和样式，以实现适应各种设备（如手机、平板、桌面）的响应式设计。
视觉效果：CSS支持多种动画效果和过渡效果，可以为网页元素添加动态效果，提高用户体验。

CSS的核心概念：

选择器 ：用于选择要应用样式的HTML元素。常见的选择器有标签选择器（如h1、p）、类选择器（如.class-name）和ID选择器（如#id-name）。
属性和属性值 ：CSS规则由属性和属性值组成。属性指定要应用的样式效果，而属性值则定义具体的样式（如颜色、大小等）。例如，color: red;就是一个CSS属性值对，表示文本颜色为红色。
继承规则：当多个样式规则作用于同一个元素时，CSS会根据一定的优先级规则（优先顺序）来决定最终的样式。优先级规则通常由选择器的具体性（speciality）和声明的来源（如内部联样式、外部样式表等）来决定。

为什么要使用CSS？

分离结构和样式：利用CSS将网页的内容（HTML）和样式（CSS）分离，使得网页的结构更清晰、维护更方便。
提高页面加载速度：CSS文件通常是外部链接的，通过缓存技术，减少每次页面加载速度重复下载样式，提升页面加载。
增强可维护性和可复用性：通过集中管理样式，简化代码，使得样式的维护更加方便，多个页面可以共享同一个CSS文件，达到代码复用的效果。

2.CSS基本语法规范

1. CSS规则架构

CSS的核心构成是选择器 和声明，一个CSS规则由这几个部分组成：

选择器 （selector）：指定要应用样式的HTML元素。
声明（declaration）：指定该元素的样式。每个声明由一个属性和一个属性值组成。

注意:

CSS要写到style标签中(后还会介绍其他写法)

style标签可以放到任意位置.般放到head标签内.

CSS使/**/作为注释.(使ctrl+/快速切换).

CSS中，空格和换行字符的使用不会影响规则的解析，但为了提高代码的可执行性，通常会使用适当的缩进和换行。

2 引式

CSS有3种引式，语法如下表格所：

3种引式对:

1. 行内样式（Inline CSS）

内联样式等于CSS规则直接写在HTML元素的style属性中。这种方式的优先级最高，但不推荐大规模项目，因为它使得HTML和CSS代码混杂，不易维护。

2. 内部样式表（Internal CSS）

内部修改样式表只需将CSS规则写在HTML文档的<style>标签中，通常放在<head>部分。这种方式适用于单个HTML页面，需要多个元素样式时比较方便。

3.外部样式表（External CSS）

外部样式表将CSS代码写在单独的.css文件中，并通过<link>标签将其引入到HTML文件中。外部样式表是最常用的方式，特别是当你需要多个HTML页面共享同一个样式时。一种具有良好的可维护性的方式，可以由团队协作开发。

3.CSS样式书写规范

1.缩进与格式

使用空格符号制表符（Tab）进行缩进。通常建议使用两个空格进行缩进。
每个声明块的开头和结尾都要使用大逗号{}。
声明和属性值之间用冒号:分隔，属性值后面空白。
每条声明以分号;结束，即使是最后一条声明。

2.命名约定

选择器命名 ：采用有意义且描述性的名称，避免使用过少或模糊的类名或ID名。
- 类名通常使用小写字母 ，多个单词之间使用连字符-分隔（如.button-primary）。
- ID名通常也使用小写字母，但由于ID的唯一性，适当的简短命名也可以接受的（如#header、#footer）。
- 避免使用过多的警告类别，保持选择器的疑虑很简单。

3.声明顺序

将布局相关的属性放在一起，通常先设置display、position、top、left、width、height等布局属性。
将窗体的相关属性放在一起，如color、background、border、font、text等。
将其他的辅助属性，如transition、box-shadow、opacity等放在最后。

4.避免使用`!important`

尽量避免使用!important，它会打破CSS的覆盖规则，降低代码的可性。只有在极特殊的情况下，才可以使用维护!important来覆盖特定样式。

5.使用空格和换行

在大逗号{}内部使用空格来增加区别性，避免写成一行。
在规则之间使用换行，使每个选择器/规则块之间有适当的间隔。

6...代码

避免不必要的选择器和样式，避免重复定义相同的样式。
如果多个元素的样式相同，使用组合选择器来简化代码。

4 CSS选择器

CSS选择器的主要功能就是选中指定的标签元素.选中了元素,才可以设置元素的属性

. 就好SC2,War3这样的游戏,需要先选中单位,再指挥该单位动.

CSS选择器主要分以下种:

1. 标签选择器

2. class选择器

3. id选择器

4. 复合选择器

5. 通配符选择器

1.元素选择器（标签选择器）

首表：

元素选择器直接通过HTML标签名称来选择元素。

这个规则将所有<p>元素的文本颜色设置为绿色。

2.类选择器（Class Selector）

类选择器通过HTML选择元素的class属性来选择元素，类选择器以.开始。

个类可以被多个标签使,个标签也能使多个类(多个类名要使空格分割,这种做法可以让代码更好复)

3. ID选择器（ID Selector）

ID选择器通过HTML元素的id属性来选择元素，ID选择器以#开始。每个页面的ID应该是唯一的。

id是唯的,不能被多个标签使(是和类选择器最的区别)

4.后代选择器（Descendant Selector）

子代选择器通过空格来选中一个元素内部的所有子元素（不管深度）。

所有在<div>元素内部的<p>元素都会变成红色。

以上三个标签选择器ul li a 中的任意,都可以替换成类选择器,或者id选择器,可以是任意选择器的组合,也可以是任意数量选择器的组合
不定是相邻的标签,也可以是"孙"标签
如果需要选择多种标签,可以使 , 分割,如p, div { } 表同时选中p标签和div标签. 逗号前后可以是以上任意选择器,也可以是选择器的组合.

5.通配符选择器（Universal Selector）

通配符选择器*选择页面上的所有元素。

3 常用的CSS样式介绍

1.颜色和背景：color，background-color

color用于设置文本的颜色的属性

background-color属性用于设置元素的背景颜色，常见于设置网页或特定元素的背景颜色。

常见单位：

颜色名称 ：如red、blue、green、black等。
十六（HEX） ：如#FF5733、#000000（表示黑色）。
RGB ：如rgb(255, 0, 0)，表示红色。
RGBA ：如rgba(255, 0, 0, 0.5)，红色，且间隙为50%。
HSL ：如hsl(0, 100%, 50%)，表示红色。
HSLA ：如hsla(0, 100%, 50%, 0.5)，红色，且间隙为50%。

2 字体大小（font-size）

font-size属性用于设置文本的大小。可以使用多种单位来表示字体大小。

常见单位：

px（像素）：绝对单位
em：相对于父元素的字体大小
rem：相对于根元素的字体大小
%：相对于父元素的字体大小
vw 、vh：相对于视窗宽度和高度的百分比

3.边框（border）

border是一个简写属性，用于设置元素的所有已知 （上、右、下、左）的宽度、样式和颜色。

边框 ( `border-width`)

border-width用于设置身高的宽度，通常使用以下单位：

px：像素（常见的单位）
em：相对于元素字体的宽度
rem：相对于根元素的字体宽度

2.边框样式 ( `border-style`)

border-style用于定义未知的样式。常见的未知样式包括：

solid：实线边框
dashed：虚线边框
dotted：点状线边框
double：双线边框
none：没有边框
hidden：隐藏未知（仅用于表格元素）

4.宽度和高度（`width`和`height`）

width属性定义了元素的宽度，它可以概括所有可见元素（如div、img、button等）

height属性定义了元素的高度。分子width，height也可以使用像素、粒子、视口单位等单位来设置。

5. 内边距(padding)

padding常见的单位解释如下：

px：像素单位，用于精确控制内边距的大小。
% ：百分比，通常相对于元素的宽度计算内边距的大小。例如，padding: 10%令内边距占元素宽度的10%。
em ：相对于元素的字体大小。例如，如果字体大小是16px，则1em等于16px。
rem ：相对于根元素（通常是<html>标签）的字体大小。

2.`padding`的简写和下一步设置

初始值：

当只设置一个值时，表示四个方向的内边距都相同：

div { padding: 20px; /* 四个方向的内边距都是 20px */ }

两个值：

当设置两个值时，第一个值表示垂直方向（上和下）的内边距，第二个值表示水平方向（左和右）的内边距：

div { padding: 10px 20px; /* 上下内边距为 10px，左右内边距为 20px */ }

三个值：

当设置三个值时，第一个值表示上边的内边距，第二个值表示左右方向的第三个内边距，第一个值表示下边的内边距：

div { padding: 10px 20px 30px; /* 上 10px，左右 20px，下 30px */ }

四个值：

当设置四个值时，分别表示上、右、下、左四个方向的内边距：

div { padding: 10px 20px 30px 40px; /* 上 10px，右 20px，下 30px，左 40px */ }

3.设置每个方向的内边距

你也可以单独为每个边设置内边距，使用padding-top、padding-right、padding-bottom和padding-left来分别指定方向的内边距：

div {

padding-top: 10px;

padding-right: 20px;

padding-bottom: 30px;

padding-left: 40px;

}