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 标签。
相关推荐
weixin_472339462 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
zwjapple2 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
枯萎穿心攻击2 小时前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
DKPT3 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
Eiceblue4 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762904 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
像风一样自由20204 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
巴伦是只猫4 小时前
【机器学习笔记Ⅰ】13 正则化代价函数
人工智能·笔记·机器学习
aiprtem5 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊5 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php