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;
}
版权归原作者 study hard_day 所有， 如有侵权，请联系我们删除。