Css3重点知识讲解

选择器

优先级: id 选择器 > 类选择器 > 标签选择器

类选择器:
css 复制代码
.myClass {
  color: blue;
}
id 选择器(全局唯一):
css 复制代码
#myId {
  color: green;
}
标签选择器:
css 复制代码
p {
  color: red;
}
层次选择器:
css 复制代码
/* 后代选择器 A B */
.nav a {
  color: blue;
}

/* 子选择器 A > B */
.card > h2 {
  color: red;
}

/* 相邻兄弟选择器 A + B(相邻向下) */
h1 + p {
  font-size: 20px;
}

/* 通用兄弟选择器 A ~ B(向下所有兄弟元素) */
h1 ~ p {
  color: gray;
}

伪类选择器:

伪类选择器 作用
:hover 鼠标悬停时触发
:focus 元素获得焦点时触发(如 input
:first-child 选择父元素的第一个子元素
:last-child 选择父元素的最后一个子元素
:nth-child(n) 选择第 n 个子元素
:nth-of-type(n) 选择第 n 个特定类型的子元素
:checked 选择被选中的单选框/复选框
:disabled 选择禁用的表单元素

属性选择器:

选择器 作用 示例
[attr] 选择包含某个属性的元素 input[required]
[attr=value] 选择属性值等于某个值的元素 input[type="text"]
[attr~=value] 选择属性值中包含某个单词的元素 [class~="btn"]
[attr^=value] 选择属性值以某个字符串开头的元素 a[href^="https"]
[attr$=value] 选择属性值以某个字符串结尾的元素 a[href$=".pdf"]
[attr*=value] 选择属性值中包含某个字符串的元素 input[name*="user"]
示例:
css 复制代码
/* 选中所有 target="_blank" 的链接 */
a[target="_blank"] {
  color: red;
}
css 复制代码
/* 选中所有 href 以 https 开头的安全链接 */
a[href^="https"] {
  color: green;
}

CSS 的引入方式(优先级:就近原则)

  • 内联样式(行内样式):
html 复制代码
<p style="color: red; font-size: 16px;">天津科技大学</p>
  • 内部样式表:
html 复制代码
<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>天津科技大学</p>
</body>
</html>
  • 外部样式表:
html 复制代码
<!DOCTYPE html>
<html>
<head>
  <link href="styles.css" rel="stylesheet">
</head>
<body>
  <p>what are you doing.</p>
</body>
</html>

styles.css 内容:

css 复制代码
p {
  color: green;
  font-size: 20px;
}

盒子模型

组成:
  1. content(内容区域) - 盒子的实际内容,如文本、图片等。
  2. padding(内边距) - 内容与边框之间的间距,影响背景颜色的填充范围。
  3. border(边框) - 围绕内容和内边距的边界线,可设置颜色、样式和宽度。
  4. margin(外边距) - 盒子与相邻元素之间的间距,不影响背景颜色。
结构示意图:
复制代码
+-------------------------------+
|           margin              |  外边距
|  +-------------------------+  |
|  |        border           |  |  边框
|  |  +-------------------+  |  |
|  |  |    padding        |  |  |  内边距
|  |  |  +-----------+    |  |  |
|  |  |  | content   |    |  |  |  内容
|  |  |  +-----------+    |  |  |
|  |  +-------------------+  |  |
|  +-------------------------+  |
+-------------------------------+
相关属性:
属性 作用 示例
width 盒子内容区域(content)的宽度 width: 200px;
height 盒子内容区域(content)的高度 height: 100px;
padding 内边距(content 到 border) padding: 10px;
border 边框(border) border: 2px solid black;
margin 外边距(margin) margin: 20px;

HTML 嵌套规范注意点:

  • 块级元素 可嵌套文本、块级元素、行内元素,但 p 标签中不能嵌套 divph 等块级元素。
  • a 标签 内部可以嵌套任意元素,但不能嵌套 a 标签。
相关推荐
河畔一角1 分钟前
一些感悟
前端
PerfumerKarma5 分钟前
【WebGPU学习杂记】数学基础拾遗(2)变换矩阵中的齐次坐标推导与几何理解
学习·线性代数·矩阵
从0至16 分钟前
C++编程入门:从基础到复合类型
开发语言·c++
excel7 分钟前
理解 JavaScript 中的 for...in 与 for...of 的区别
前端
knight_202417 分钟前
嵌入式学习日志————对射式红外传感器计次
stm32·单片机·嵌入式硬件·学习
前端小巷子36 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑39 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了40 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
go546315846542 分钟前
基于分组规则的Excel数据分组优化系统设计与实现
人工智能·学习·生成对抗网络·数学建模·语音识别
##echo43 分钟前
嵌入式Linux裸机开发笔记9(IMX6ULL)GPIO 中断实验(1)
linux·c语言·笔记·单片机·嵌入式硬件