本文详细介绍了CSS的基础知识，包括使用格式、选择器类型（如基础选择器、复合选择器）、CSS的引入方式（行内、内部、外部样式表）。此外，还讲解了字体属性、文本属性、元素显示模式、背景设置以及盒子模型等核心概念。文章还提到了VSCode中使用emmet语法提升HTML编写效率，并探讨了CSS的层叠性和优先级。最后，通过实例展示了如何利用CSS实现元素的布局与美化。
CSS
1.使用步骤
1.1 使用格式
选择器 {
属性: 属性值;
}
1.2 CSS的引入方式
（1） 行内样式表（行内式）
在标签中定义属性style后面属性值中间用；隔开：
<div style="display: inline-block;color: blue;">
（2） 内部样式表（嵌入式）
css代码放入head双标签里面的style双标签中。
<head>
<meta charset="utf-8">
<title>css嵌入式</title>
<style>
div {
color: pink;
}
</style>
</head>
（3） 外部样式表
在外部单独创建一个CSS文件，将CSS文件引入HTML页面中去。
第一步：创建一个后缀为.css的文件，将所有CSS代码放入其中。
第二部：在html页面中使用link标签引入css文件（）link标签在head 。
<link rel="stylesheet" href="文件名.css">
2. 选择器：
2.1 基础选择器
（1）标签选择器：标签名作为选择器。
（2）类（class）选择器：以（.+类名）做选择器，类名为自己定义的属性class的属性值。（开发使用最多，修改样式）。
类选择器-多类名：在标签属性class定义多个类名，类名必须用空格分开。一般用于相同的属性-属性值。
（3）id选择器：用（#+id名）做选择器，类名为自己定义的属性id的属性值。（只能调用一次，不允许别的标签调用，经常和js搭配使用）
（4）通配符选择器：以（*）做选择器，选取所有的标签。
类选择器部分用词：
头：header
内容：content
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局的宽度：wrapper
左中右：left center right
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
2.2 复合选择器
（1）后代选择器（重要）：可以选择父元素中的子元素
使用：父元素 子元素 {}；父元素 子元素 子元素{}
元素可以是任意的基础选择器，元素中间用空格隔开，等级依次递减。
（2）子选择器（重要）：只能选择某元素最近一级的子元素
使用：父元素>最近一级的子元素 {}
（3）并集选择器（重要）：可以选择多组任意选择器，同时为他们定义相同的样式，（通常用于集体声明）
使用：选择器，选择器 {}
（4）伪类选择器：给某些选择器增加特殊的效果。
（4.1） 链接伪类选择器：
a:link {} 表示所有未被访问过的链接
a:visited {} 表示所有已经被访问的链接
a:hover {} 表示鼠标触碰到后的链接（常用）
a:active {} 表示鼠标点击未松开时的链接
书写顺序LVHA：link，visited，hover，active。
（4.2） :focus伪类选择器
表示获取焦点，一般用于input表单元素，点击表单后显示的光标。
input:focus {}
3. CSS字体属性
（1） 字体属性：font-family；属性值：可以定义多个字体，字体之间用(,)隔开。
（2） 字体大小属性：font-size；属性值：数字+px。（标题标签需要单独指定文字大小）。
（3） 字体粗细属性：font-weight；属性值：normal正常，bold粗体，bolder特粗体，lighter细体，number数字无单位（实际应用中最常用数字，粗体： 700，正常：400）。
（4） 文字样式属性：font-style；属性值：normal正常，italic斜体。
（5） 字体复合属性：
顺序不能换,每个属性之间用空格隔开；必须保留font-size和font-family属性：font: font-style font-weight font-size/line-height font-family;
font: italic 700 16px "Microsoft yahei";
4. 文本属性（定义text文本的外观）
（1） 颜色：
属性：color；属性值：单词red；十六进制#ff0000；rag（255，0，255）。
（2） 对齐文本：
属性：text-align用于水平对齐；属性值：left左，center中，right右。
（3） 装饰文本：
属性：text-decoration；属性值：none默认没有装饰线，underline下划线，overline上划线，line-through删除线。
（4） 文本缩进：
属性：text-indent；属性值：数字px或者数字em（em是相对单位，是当前元素（font-size）的单位，2em就是两个单位大小）。
（5） 行间距：
属性：line-height；属性值：数字px
行间距是上间距，文字高度，下间距三部分组成。
5. CSS元素显示模式
（1） 块元素：独占一行，不能放在文字标签（p，h）中。
（2） 行内元素：一行多个，高宽无法设置，行内元素只能容纳文本或其他行内元素，不能放入块元素。
注意：链接a里面可以放入块元素，a最好转换一下块级模式
（3） 行内块元素：
行内元素中特殊的标签：img，input，td，他们同时具备块和行内元素的特点，一行可以放多个还能设置高宽。
（4）转换元素：
转换为块元素： display: block;
转换为行内元素： display:inline;
转换为行内块元素（重要）： display:inline-block;
小技巧：css中实现文字居中，可以让文字的行高等于盒子的高度，line-height=height
6.CSS背景
（1） 背景颜色（底部）
属性：background-color:属性值：transparent透明的，color颜色
（2） 背景图片
属性：background-image适用于小图片或超大背景图片，控制位置方便；属性值：url（图片地址）或 none无背景
（3） 背景图片平铺
属性：background-repeat；
属性值：
repeat：背景图片在纵向和横向上平铺
no-repeat：背景图片不平铺
repeat-x：背景图片在横向上平铺
repeat-y：背景图片在纵向上平铺
（4） 背景图片位置（重要）
属性：background-position:x y;属性值表示x坐标和y坐标
属性值
length：百分数，例如10px 10px（精确单位）
position：top，center，bottom，left，center，right方位名词（x，y顺序无关，只设定一个值第二个值默认居中对齐）
属性值还可以是混合使用：精确单位和方位名词，例如 10px center
（5） 背景图片固定
属性：background-attachment：设置背景图片是否固定或者随页面的其余部分滚动。后期用于视差滚动
属性值：scroll 背景图片随页面滚动的，fixed 背景图片固定的
（6） 背景复合写法
可以将background的所有属性写到一个属性中在，中间用空格隔开：background: 颜色 地址 平铺 滚动 位置;
（7） 背景色半透明
属性：background：rgba(0,0,0,0.3)；r：red对应0；g：green对应0；b：blue对应；a：alpha透明度对应0.3，取值在0~1之间。（盒子内容不受影响）
7. emmet语法（vscode软件）
（1） 输入标签名按Tab键即可生成
（2） 生成多个相同的标签：（标签名）+（*）+（数字）即可
（3） 生成父子关系标签：标签之间用>。例如ul>li
（4） 生成兄弟关系的标签：标签之间用+
（5） 生成带class或者id的标签：（标签名）+（.或者#）+（名），如果不加标签名默认标签是div。
（6） 生成类名排序标签：（标签名）+（.或者#）+（名）+（KaTeX parse error: Expected '}', got 'EOF' at end of input: …字：标签名{内容}。`div{}*5`
（8） 快捷键生成属性属性值：例如text-align: center;可以用tac，width : 100px;可以用w100。
（9） 保存时格式化代码（VS code）：
快捷键（Ctrl+,)打开设置，搜索emmet.include，找到在settings.json中编辑，在上一个语句结尾加一个（,）后直接添加
"editor.formatOnType": "true", "editor.formatOnSave": "true"
保存即可。
8. CSS三大特征：
（1） 层叠性
（2） 继承性
（3） 优先级
| 选择器 | 选择器权重 |
|---|---|
| 继承 and * | 0,0,0,0 |
| 标签选择器 | 0,0,0,1 |
| 类选择器 and 伪类选择器 | 0,0,1,0 |
| id选择器 | 0,1,0,0 |
| 行内式style | 1,0,0,0 |
| !important | 无穷大 |
权重叠加：
ul li {} 权重： 0,0,0,1+0,0,0,1（会叠加不会进位）
li {} 权重： 0,0,0,1
.ccc li {} 权重： 0,0,1,0+0,0,0,1
a:hover {} 权重： 0,0,0,1+0,0,1,0
9. 盒子模型
（1） border边框
属性：border-width：边框粗细；属性值：数字px
属性：border-style：边框样式； 属性值：solid（实线边框）dashed（虚线边框），dotted（点虚线）
属性：border-color：边框颜色；
border简写：border: 1px solid black;(无顺序)
重要!：（上top，下bottom。左left，右right）
属性：border-collapse：collapse。合并相邻边框
（2）content内容
（3）padding 内边距
属性：padding-left：左内边距；padding-right：右内边距；padding-top：上内边距；padding-bottom：下内边距。
padding简写：
padding: 5px; 表示上下左右为5px内边距。
padding: 5px 10px;表示上下为5px内边距，左右为10px。
padding: 5px 10px 15px;表示上为5px内边距，左右为10px，下为15px。
padding: 5px 10px 15px 20px;表示上为5px内边距，右为10px，下为15px，左为20px（顺序为顺时针：上右下左）
注意：当不定义width/height数据时，padding不撑开盒子
（4）margin 外边距
属性：margin-（上top，下bottom。左left，右right）
注意：margin与padding属性使用基本相同。
应用：
1，外边距让块盒子在页面水平居中条件（常用）：
（1）盒子必须有width。（2）盒子左右外边距设置为auto。
div { width: 300px; margin: 0 auto;}
2，行内元素水平居中：
增加text-align: center;。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
