当前位置：首页 > news >正文

【JavaWeb学习 | 第二篇】CSS(1) - 基础语法与核心概念

news 2025/11/1 9:03:38

🌈 个人主页: Hygge_Code

🔥 热门专栏:从0开始学习Java | Linux学习| 计算机网络

💫 个人格言: “既然选择了远方，便不顾风雨兼程”

在这里插入图片描述

文章目录

- 一、CSS基础：语法与核心概念🥝
- - 1.1 语法结构
  - - 关键语法规则
  - 1.2 四种引入方式🤔
  - - 优先级特殊规则
  - 1.3 三大特性：层叠性、继承性、优先级🐦‍🔥
  - - 1. 层叠性
    - - 核心原则
      - 实际应用
    - 2. 继承性
    - - 可继承的样式类别
      - 继承性的实用技巧
      - 不可继承的典型属性
    - 3. 优先级：决定样式应用的权重规则
    - - 权重计算规则
      - 关键注意事项
    - 4. 综合案例：理解三大特性的协同工作
    - - 1. 以导航菜单为例，展示三大特性如何共同作用
      - 2. 综合代码演示
  - 1.4 CSS字体样式常用属性🍋‍🟩
  - - 1. font-family 设置字体
    - 2. font-size 设置字体的像素大小
    - 3. font-weight 设置字体粗细
    - 1.4 font-style 设置字体的样式
    - 1.5 字体属性之复合属性
  - 1.5 CSS常用文本属性🍋‍🟩
  - - 1. color 文本颜色
    - 2. text-align 文本对齐方式
    - 3. text-decoration 装饰文本
    - 4. text-indent 文本缩进
    - 5. line-height 行间距
  - 1.6 Emmet语法（快速生成HTML结构语法）🚀
  - - 1. 快速生成HTML结构语法
    - 2. 快速生成CSS指定样式语法

一、CSS基础：语法与核心概念🥝

1.1 语法结构

CSS最小功能单位是规则集，由「选择器」「声明块」「属性」「值」组成，语法需严格遵循规范：

/* 规则集 = 选择器 + 声明块 */
选择器 {属性1: 值1; /* 声明：冒号分隔属性与值，分号结尾（不可省略） */属性2: 值2; /* 多声明换行书写，提升可读性 */
}/* 实战示例：段落基础样式 */
p {font-size: 16px; /* 非0值必须带单位（px/em/rem） */color: #333; /* 十六进制颜色（缩写，等价#333333） */line-height: 1.5; /* 无单位：当前字体大小的1.5倍 */margin: 0; /* 0可省略单位 */font-family: "Microsoft YaHei", Arial, sans-serif; /* 字体族：优先使用前者 */
}

关键语法规则

注释：仅支持/* 内容 */（单行/多行），// 单行注释无效（会导致后续样式失效）。
大小写：属性/选择器不区分大小写（Color=,color），但值中路径（url(Image.jpg)）、字体名（"Microsoft YaHei"）区分大小写。
空格规范：选择器与{之间必须加空格（p{不规范），冒号与值之间建议加空格（font-size:16px→font-size: 16px）。

1.2 四种引入方式🤔

引入方式	语法示例	优先级	加载机制	适用场景	避坑点
内联样式	`<div style="color: red; font-size: 18px;">内容</div>`	最高	随元素加载	动态元素、临时样式调整	样式与HTML耦合，无法复用
内部样式	`<head><style>.box { width: 200px; }</style></head>`	中	随HTML头部加载	单页面网站、临时测试	仅当前页面生效，样式过多导致HTML臃肿
外部样式	`<link rel="stylesheet" href="style.css" media="all">`	中	并行加载	多页面网站、大型项目	需额外HTTP请求（可通过打包优化）
@import引入	`<style>@import url("reset.css");</style>`	最低	串行加载	样式模块化拆分（如导入重置样式）	必须放样式顶部，无法在@media中使用

优先级特殊规则

同权重选择器：后定义的样式覆盖先定义的（如先引入外部样式，再写内部样式，内部生效）。
!important：强制提升单个属性优先级（如color: red !important），但会破坏优先级逻辑，慎用。

1.3 三大特性：层叠性、继承性、优先级🐦‍🔥

CSS（层叠样式表）之所以能灵活控制网页样式，核心在于它的三大特性：层叠性、继承性和优先级。这些特性决定了样式如何应用、冲突如何解决以及元素如何继承样式规则。

1. 层叠性

层叠性是CSS名称中"层叠"二字的直接体现，它定义了如何处理多个样式规则应用到同一元素时的冲突问题。

核心原则

样式冲突时，遵循"就近原则"
当多个选择器对同一元素设置了相同属性时，距离元素结构更近的样式会覆盖较远的样式。

span {color: red;       /* 距离远，被覆盖 */font-size: 42px;  /* 不冲突，正常生效 */
}span {color: pink;      /* 距离近，生效 */
}

样式不冲突时，会叠加生效
不同属性的样式规则会同时作用于元素，不会相互影响。

实际应用

层叠性让我们可以：

先设置通用样式，再针对特定元素微调
按页面结构层级组织样式，后期修改更灵活
避免样式重复定义，简化代码结构

2. 继承性

继承性指子元素会自动获取父元素的某些样式属性，实现"子承父业"的效果，从而减少重复代码。

可继承的样式类别

并非所有CSS属性都能继承，主要可继承的属性集中在：

文本相关：text- 开头的属性（如 text-align、text-indent）
字体相关：font- 开头的属性（如 font-size、font-family）
行高相关：line-height
颜色相关：color

h3 {/* 父元素设置 */color: green;font: 32px/1.5 "Microsoft YaHei"; /* 字体大小32px，行高1.5 */
}div {/* 子元素继承了h3的行高设置 */font-size: 20px; /* 行高自动计算为 20px * 1.5 = 30px */
}

继承性的实用技巧

在 body 标签中设置全局样式（如字体、颜色、行高），让所有文本元素继承
利用行高继承的特性：父元素设置 line-height: 1.5，如果子元素没有设置行高，则会集成父元素的行高为1.5，此时子元素的行高是：当前这个子元素的文字大小*1.5
注意：块级元素的宽度默认继承父容器的100%，这也是一种特殊的继承表现

不可继承的典型属性

布局相关：width、height、margin、padding、border
定位相关：position、top、left 等
背景相关：background 系列属性

3. 优先级：决定样式应用的权重规则

当多个不同选择器作用于同一元素时，优先级规则决定了哪个样式最终生效。优先级通过"权重"来量化，权重高的样式会覆盖权重低的样式。

权重计算规则

CSS权重采用四组数字表示 (a,b,c,d)，从左到右优先级依次降低：

!important：无穷大（最高优先级）
行内样式 style=""：(1,0,0,0)
ID选择器：(0,1,0,0)
类选择器、伪类选择器：(0,0,1,0)
元素选择器：(0,0,0,1)
继承或通配符 *：(0,0,0,0)

关键注意事项

权重不会进位：例如10个元素选择器 (0,0,0,10) 仍小于1个类选择器 (0,0,1,0)

继承的权重为0：即使父元素权重很高，子元素通过继承获得的样式权重依然为0

#father {color: red; /* 父元素权重高，但子元素p通过继承获得的权重为0 */
}p {color: blue; /* 元素选择器权重(0,0,0,1) > 继承权重0，因此生效 */
}

复合选择器权重叠加：多个基础选择器组合时，权重为各部分之和

ul li { /* 两个元素选择器：0,0,0,1 + 0,0,0,1 = 0,0,0,2 */color: green;
}.nav li { /* 类选择器 + 元素选择器：0,0,1,0 + 0,0,0,1 = 0,0,1,1 */color: pink; /* 权重更高，生效 */
}

!important 的使用：添加在属性值后可强制提升优先级，但应谨慎使用
```
h4 {color: pink !important; /* 优先级最高，覆盖行内样式 */
}
```

4. 综合案例：理解三大特性的协同工作

1. 以导航菜单为例，展示三大特性如何共同作用

/* 1. 继承性：设置基础样式，被所有子元素继承 */
body {font-family: "Microsoft YaHei";line-height: 1.5;
}/* 2. 优先级：类选择器定义导航容器样式 */
.nav {color: #333;
}/* 3. 复合选择器权重叠加：.nav li (0,0,1,1) */
.nav li {color: #666;
}/* 4. 更高权重：.nav .active (0,0,2,0) */
.nav .active {color: #ff6700;
}/* 5. 层叠性：hover状态样式覆盖默认样式 */
.nav li:hover {color: #f00; /* 鼠标悬停时生效 */
}

这个案例中：

继承性减少了字体和行高的重复定义
优先级确保了特定菜单项（.active）的样式正确应用
层叠性让hover状态能动态覆盖默认样式

2. 综合代码演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS三大特性</title><!-- CSS三个特性：层叠性、继承性、优先级 --><style>/* 111.层叠性 *//* 给相同选择器设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式，层叠样式主要解决样式冲突的问题层叠性原则：1.样式冲突，遵循 就近原则 ，哪个样式离结构近，就执行哪个样式2.样式不冲突，不会重叠*/span {color: red;/* 这个font-size样式并没有和下面span存在样式冲突，正常生效 */font-size: 42px;}span {/* 这个color样式与前面div的color样式发生冲突，但这个距离更近，显示这个 */color: pink;}/* 222.继承性 *//*  1.恰当地使用继承可以简化代码，降低CSS的复杂性2.子标签会集成父标签的某些样式(text- ,font- ,line- 这些元素开头的可以继承，以及color属性)即 子承父业 */h3 {color: green;/* font-size: 25px; *//*  font复合简写 32px为字体大小 1.5px为行高 (1.5px也可以省略掉px)行高可以跟单位，也可以不跟单位 1.如果子元素没有设置行高，则会集成父元素的行高为1.5，此时子元素的行高是：当前这个子元素的文字大小*1.5一般在body{}里面统一设置行高（开发中常用），这里为了不和前面层叠性测试冲突，就换成h3,这样设置行高的最大优势就是里面的子元素可以根据自己的文字大小自动调整行高*//* font: 32px/1.5px "Microsoft YaHei"; */font: 32px/1.5 "Microsoft YaHei";}div {/* 这个font-size覆盖掉了h3里面设置的font-size *//* 继承了父标签h3的行高设置，此时 div里面文本的行高为20*1.5 */font-size: 20px;}/* 333.优先级 *//*      当同一个元素指定多个选择器，就会有优先级的产生1.选择器相同，按照层叠性执行2.选择器不同，根据选择器的权重执行权重： 1.继承 或 *(通配符选择器) ：0,0,0,02.元素选择器：0,0,0,13.类选择器，伪类选择器：0,0,1,04.ID选择器：0,1,0,05.行内样式 style="" ：1,0,0,06.!important 重要的 :无穷大注意：1. 权重由四组数字组成，(权重虽然会有叠加)但永远不会有进位例如：  div ul li ---》0,0,0,3 .nav ul li --->0,0,1,2  a:hover -->0,0,1,1(标签选择器+伪类选择器).nav a ---> 0,0,1,12.等级判断从左到右，如果某一位数值相同，则判断下一位数值3.! 继承的权重为0 !,如果该元素没有被直接选中，不管父元素权重有多高，子元素得到的权重都是0*/#demo {/* ID选择器 优先级高于类选择器 */color: skyblue;}.test {/*  类选择器  优先级高于元素选择器 */color: red;}h4 {/*  元素选择器  *//* color: pink; *//*  若加了!important，则优先级变为无穷大  */color: pink !important;}/* 父亲的自己的ID选择器的权重很高 */#father {color: red;}/* 但p继承的权重为0 */p {color: blue;}/* 对<a>进行测试 body继承的权重为0,a链接浏览器默认指定了一个样式，蓝色的 有下划线，a{color:blue;}*/body {color: aqua;}/* 444.复合选择器会有权重叠加的问题 *//* 1. 权重由四组数字组成，(权重虽然会有叠加)但永远不会有进位例如：  div ul li ---》0,0,0,3 .nav ul li --->0,0,1,2  a:hover -->0,0,1,1(标签选择器+伪类选择器).nav a ---> 0,0,1,1 *//* ul li 两个元素选择器权重叠加 0,0,0,1 + 0,0,0,1 = 0,0,0,2 所以优先级大于单独的li */ul li {color: green;}/* li为元素选择器，权重是0,0,0,1 (11)*/li {color: red;}/* .nav li 的权重： 0,0,1,0 + 0,0,0,1 = 0,0,1,1 (11) > 0,0,0,2 (2)*/.nav li {color: pink;}/* 单独的.cal中设置的color不会生效，因为.avl li 的权重比单独的.cal的权重高 *//* 而改成 .nav .cal 就会生效 (权重0,0,2,0(20)) 高于.nav li(0,0,1,1)*/.nav .cal {color: yellow;}</style>
</head><body><!-- 测验层叠性 --><span>长江后浪推前浪，前浪死在沙滩上</span><!-- 测验继承性 --><h3><!-- 这里的div继承父类h3设置的样式 --><div>龙生龙，凤生凤，老鼠生的孩子会打洞</div><div>龙生龙，凤生凤，老鼠生的孩子会打洞</div><!-- li 没有手动指定文字大小，则会继承父标签h3的设置的大小32px --><ul><li>我没有指定文字大小</li></ul></h3><!-- 测试优先级 --><!-- 行内样式 style="" 权重比前面几个选择器的优先级都要高,除了 !important --><div><h4 class="test" id="demo" style="color:purple">测试优先级</h4></div><!-- 继承的权重为0 --><div id="father"><p>你还是很好看</p></div><a href="#">我是单独的样式</a><!-- 测试复合选择器的权重叠加 --><ul class="nav"><li class="cal" class="change1">大猪蹄子</li><li>大肘子</li><li>猪尾巴</li></ul>
</body></html>

演示标果：
在这里插入图片描述

1.4 CSS字体样式常用属性🍋‍🟩

1. font-family 设置字体

属性：font-family  设置字体1.各种字体之间必须使用英文逗号隔开2.尽量使用系统默认自带字体，保证在任何用户的浏览器都能正确显示3.统一设置字体的话可以用   因为内容一般都是在body中
----------------------------------------------------------body{font-family:"Microsoft Yahei（微软雅黑，中英文都可以用）",arial(等等);}

2. font-size 设置字体的像素大小

属性：font-size 设置字体的像素大小 1.谷歌浏览器默认的文字大小为16px（字体大小参考）2.不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确的大小，不要默认大小3.统一设置字体大小的话可以在body标签中操作(不对标题(h1-h6)生效，标题需要单独指定大小，操作同理)
--------------------------------------------------------body{font-size: 20px; (切记，不要漏了px)}

3. font-weight 设置字体粗细


属性：font-weight  设置字体粗细 normal: 默认字体粗细为number=400bold: 粗体，相当于number=700bolder: 特粗体lighter: 细体number(自定义)：100|200|300|400|500|600|700|800|900注意数字后面不要跟px，实际开发时提倡用 数字 表示可以让标签/文字加粗，也可以让加粗标签（比如h和strong）不加粗--------------------------------------------------.bold {color: red;font-weight: 900;}

1.4 font-style 设置字体的样式

属性：font-style 设置字体的样式（如斜体） font-style属性值: normal(默认值，浏览器会显示标准的字体样式)或者italic(浏览器会显示斜体的字体样式，很少用)常用操作：把倾斜的变成不倾斜，比如把em或i属性的倾斜改为不倾斜的--------------------------------------------------div {font-style: italic;}em {font-style: normal;}

1.5 字体属性之复合属性

 复合属性---》简写的方式/语法要求:  font: font-style font-weight font-size/line-height(行高，即为行间距) font-family;1. 各个属性之间以空格隔开，并且严格按照顺序要求书写，不得颠倒！2. 不需要设置的属性可以省略(默认值)，但 必须保留font-size 和 font-family属性，否则font复合属性将不起作用------- 要求：想要span文字变倾斜 加粗 字号设置为36像素 微软雅黑 ----------span {
不复合写法：   font-style: italic;font-weight: 700;font-size: 36px;font-family: "Microsoft Yahei"; 复合写法：font: italic 700 36px "Microsoft Yahei";}

1.5 CSS常用文本属性🍋‍🟩

介绍：可定义文本的外观，如文本的颜色、对齐文本、装饰文本（如:下划线）、文本缩进、行间距等

1. color 文本颜色

color的两种表示方式：
1.预定义的颜色值（如red,green,blue等等）
2.十六进制(开发中最常用)(如#FF6600) 3.RGB代码（如：rgb(255,0,0)）

2. text-align 文本对齐方式

text-align 设置元素内文本的水平对齐方式
语法：xx(标签) {text-align:center;}
有三个值：left（默认左对齐）center(居中对齐) right(右对齐)

h4 {text-align: center;color:red;}

3. text-decoration 装饰文本

text-decoration 可以给文本添加下划线、删除线和上划线等
语法：xx(标签/类名) {text-decoration:属性;}
属性值：none(默认，啥都没有,常用) underline(下划线，链接a自带下划线(所以也可以用该属性去掉链接的下划线)，常用) overline(上划线，几乎不用) line-through(删除线)

h3 {/* text-decoration: underline; *//* text-decoration: line-through; */text-decoration: overline;
}a {text-decoration: none;
}

4. text-indent 文本缩进

text-indent 用来指定文本的第一行的缩进，通常是将段落的首行缩进
语法：xx{text-indent: 多少px}
em是一个相对单位，就是当前元素(font-size)一个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小,适合用于段落缩进两个文字大小的空格

正值往右边缩进，负值往左边缩进（可能会导致一些文字消失） p {text-indent: 20px; text-indent: 2em;
}

5. line-height 行间距

line-height 用于设置行间的距离（行高），控制文字行与行之间的距离
语法：xx{line-height:26px;}
注意：行间距包括=上间距+文本高度+下间距，而我们改变的是上下间距

p {line-height: 26px;
}

1.6 Emmet语法（快速生成HTML结构语法）🚀

有些操作可以助力我们快速生成需要的代码

1. 快速生成HTML结构语法

    1.生成标签直接输入标签名 按tab键即可，比如 div 然后tab键，就可以生成<div></div>2.如果想要生成多个相同的标签，加上*即可，比如 div*3 就可以快速生成3个div3.如果有父子级关系的标签，可以用> 比如 ul>li 就可以了4.如果有兄弟关系的标签，用 + 比如 div+p5.如果生成带有类名或者id名字的，直接用.demo(为类名) 或者 #two（为id名） 再tab键就可以了（默认生成的标签是div）6.如果想要用6实现div以外的标签，可以在 . 前面加上对应的标签名7.如果生成的div类名是有顺序的，可以用自增符号$8.如果想要生成的标签内部写内容可以用  xx(想要的标签名){}*number(生成多少个)  表示(也是默认div标签)

<!-- div 再tab键 -->
<div></div><!-- div*3 -->
<div></div>
<div></div>
<div></div><!-- div>p 再tab键 -->
<div><p></p>
</div><!-- ul>li -->
<ul><li></li>
</ul><!-- div+span -->
<div></div>
<span></span><!-- .nav (默认生成的标签是div)-->
<div class="nav"></div><!-- .man -->
<div class="man"></div><!-- #boy -->
<div id="boy"></div><!-- p.one -->
<p class="one"></p><!-- span.hello -->
<span class="hello"></span><!-- span#nihao -->
<span id="nihao"></span><!-- h1.demo$*5 -->
<h1 class="demo1"></h1>
<h1 class="demo2"></h1>
<h1 class="demo3"></h1>
<h1 class="demo4"></h1>
<h1 class="demo5"></h1><!-- div{使用emmet语法快速生层文段}*1 -->
<div>使用emmet语法快速生层文段</div>
<!-- div{你好啊$号}*5 -->
<div>你好啊1号</div>
<div>你好啊2号</div>
<div>你好啊3号</div>
<div>你好啊4号</div>
<div>你好啊5号</div>

2. 快速生成CSS指定样式语法

CSS基本样式采取简写形式即可

 1.比如 w200 按tab/enter键， 可以生成width:200px;2.比如 lh26 按tab/enter键， 可以生成line-height:26px;

<style>.one {/* ta:center */text-align: center;/* w200 */width: 200px;/* lh26 */line-height: 26;/* ti:200 */text-indent: 200px;/* td:none */text-decoration: none;}
</style>