CSS 基础修行
前言
上一篇文章中，我们已经简单的认识了什么是CSS。这篇文章，我们将开始学习CSS基础中的核心知识。例如CSS的层叠原则和样式继承机制，即多个样式规则如何相互作用以及样式如何从父元素传递给子元素。还包括选择器、属性和值的基本结构。
选择器
CSS选择器是用于匹配HTML或XML文档中元素的方式，它们决定了哪些元素将接收特定的样式规则。
基础选择器
- 标签选择器
匹配特定 HTML 标签，如 h1 匹配所有的<h1>元素。
h1 {
color: blue;
}
- 类选择器
匹配具有特定class属性的元素，如.example匹配class="example"的所有元素。
.example {
font-weight: bold;
}
- ID选择器
匹配具有特定id属性的唯一元素，如#header匹配id="header"的元素。
#header {
background-color: lightblue;
}
- 通配符选择器
*匹配所有元素。
* {
margin: 0;
padding: 0;
}
组合选择器
- 后代选择器：空格分隔的两个选择器，如div p匹配
<div>内的所有<p>元素。
div p {
color: red;
}
- 子元素选择器：>分隔的两个选择器，如
div > p匹配<div>的直接子元素<p>。
div > p {
font-size: 18px;
}
- 相邻兄弟选择器：+分隔的两个选择器，如h1 + p匹配紧跟在
<h1>后的第一个<p>元素。
h1 + p {
text-indent: 2em;
}
- 一般兄弟选择器：
~分隔的两个选择器，如div ~ p匹配所有在<div>之后的<p>元素。
div ~ p {
margin-top: 1rem;
}
伪类与伪元素
- 伪类：表示元素的特定状态，如:hover、:active、:focus、:first-child等。
a:hover {
color: purple;
}
button:active {
transform: scale(0.9);
}
- 伪元素：表示元素的特定部分，如::before、::after。
p::before {
content: "Note: ";
color: green;
}
属性选择器
根据元素属性来选择元素，如[target="_blank"]匹配target属性值为_blank的链接。
a[target="_blank"] {
background-color: yellow;
}
选择器权重
CSS选择器有不同的权重，影响样式应用的优先级：ID选择器最高，接着是类选择器、属性选择器和标签选择器，最低的是通用选择器和子元素选择器。- 内联样式（如
style="..."）权重最高，然后是ID选择器，接下来是类、属性和标签，最后是通配符、子元素和相邻兄弟选择器。
CSS3新增选择器
nth-child(n)和nth-of-type(n)选择器：基于元素在父元素中的位置选择元素
li:nth-child(2) {
background: pink;
}
- :not() 选择器：排除特定选择器匹配的元素。
a:not(.disabled) {
color: blue;
}
CSS4新增选择器
:matches()或:any()选择器（CSS4，浏览器支持有限）：
div:matches(button, input[type="submit"]) {
cursor: pointer;
}
层叠与继承
层叠
层叠（Cascading）是指当一个元素同时匹配多个选择器时，CSS会根据选择器的权重、样式来源和重要性来决定最终应用哪一个样式。这是CSS名称中的"层叠样式表"的来源。
- 权重：权重由选择器类型决定，具体规则是：
- 内联样式的权重最高。
- ID选择器次之。
- 类选择器、属性选择器和伪类选择器接下来。
- 元素选择器和伪元素选择器权重最低。
- 通配符、子元素和相邻兄弟选择器的权重最小。
- 样式来源：CSS 样式有三种来源：
- 浏览器默认样式。
- 用户定义样式：用户通过浏览器设置或用户样式表定义的样式。
- 作者定义样式：我们在CSS文件中定义的样式。
- 重要性：使用
!important关键字可以提升某条样式的优先级，覆盖所有其他规则。
继承
继承（Inheritance）是指某些CSS属性可以从父元素传递给子元素，例如文本颜色、字体大小等。了解继承有助于减少冗余代码，简化样式表。
- 可继承属性：颜色（
color）、字体（font-family）、文字间距（letter-spacing）、行高（line-height）等。 - 不可继承属性：背景（
background）、边框（border）、外边距（margin）、内边距（padding）等。
示例：
body {
color: black;
font-family: Arial, sans-serif;
}
p {
font-size: 16px;
}
.note {
color: red;
}
在上述例子中，body元素的文本颜色和字体会被其所有子元素继承，但p元素的字体大小不会影响其子元素。.note类的颜色属性将覆盖继承自body的颜色属性。
属性
CSS 属性用于定义元素的样式。属性通常由一个属性名称和一个属性值组成，中间用冒号分隔。
文本
- color: 设置文本颜色。
- font-size: 设置字体大小。
- font-weight: 设置字体粗细。
- text-align: 设置文本对齐方式。
盒模型
盒模型是CSS布局的基础，包括元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。
- width 和 height: 设置元素的宽度和高度。
- padding: 设置元素内容与边框之间的内边距。
- border: 设置元素的边框。
- margin: 设置元素的外边距。
布局
- display: 设置元素的显示类型，如
block、inline、inline-block、flex等。 - position: 设置元素的定位方式，如
static、relative、absolute、fixed、sticky等。 - float: 设置元素的浮动方式。
- clear: 清除浮动元素的影响。
背景
- background-color: 设置背景颜色。
- background-image: 设置背景图像。
- background-position: 设置背景图像的位置。
- background-repeat: 设置背景图像是否重复。
视觉格式化模型
视觉格式化模型（Visual Formatting Model）定义了浏览器如何计算和渲染元素的布局，确保页面在不同的设备和屏幕上显示一致。模型涉及多个方面，包括块级格式化上下文（BFC）、行内格式化上下文（IFC）、浮动元素、绝对定位元素等。
- 块级格式化上下文（BFC）：
BFC是页面中的一个独立渲染区域，块级元素在 BFC 中按照盒模型进行布局。创建BFC的方法包括设置元素的float属性、position属性（非static）、display: inline-block或display: table以及overflow属性（非visible）。
.container {
overflow: hidden; /* 创建BFC */
}
- 行内格式化上下文（IFC）：
IFC是用于布局行内元素（如文本和内联元素）的渲染区域。行内元素在IFC中按行排列，行内框会根据内容自动调整宽度和高度。
span {
display: inline; /* 默认行为 */
}
- 浮动元素：使用
float属性将元素从正常的文档流中取出，使其向左或向右浮动，其他内容将围绕它流动。清除浮动（使用clear属性）可以避免布局问题。
.float-left {
float: left;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
- 绝对定位元素：使用
position: absolute将元素从正常文档流中完全移除，并根据最近的相对定位父元素进行定位。position: fixed将元素固定在视口的特定位置，不随滚动条滚动。
.absolute {
position: absolute;
top: 50px;
left: 100px;
}
.fixed {
position: fixed;
bottom: 0;
right: 0;
}
响应式设计
响应式设计（Responsive Design）是指使用 CSS 技术使网页在不同设备和屏幕尺寸上都能良好显示，提供最佳的用户体验。核心技术包括 媒体查询 、流体布局 、弹性盒布局（Flexbox） 和 网格布局（Grid） 等。
媒体查询
媒体查询（Media Queries）用于应用特定的样式规则到特定的设备或屏幕尺寸。
/* 针对宽度小于600px的设备 */
@media (max-width: 600px) {
.container {
width: 100%;
padding: 10px;
}
}
流体布局
流体布局（Fluid Layout）使用百分比来定义宽度，使布局能够根据视口宽度自动调整。
.container {
width: 80%;
margin: 0 auto;
}
弹性盒布局（Flexbox）
Flexbox 提供了一种高效的布局方式，尤其适用于一维布局（行或列）。
.flex-container {
display: flex;
justify-content: space-between;
}
.flex-item {
flex: 1;
margin: 10px;
}
网格布局（Grid）
Grid 提供了强大的二维布局能力，可以创建复杂的布局结构。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
通过结合这些技术，可以创建适应各种设备和屏幕尺寸的响应式网页，从而提升用户体验和页面的可访问性。
高级技术
动画与过渡
CSS可以通过transition和animation属性创建丰富的动画效果。
- transition: 定义属性的过渡效果。
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: green;
}
- animation: 定义关键帧动画。
@keyframes example {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.box {
animation: example 2s infinite;
}
web字体与图标
通过@font-face引入自定义字体，并使用图标字体（如Font Awesome）来增强网页的视觉效果。
- @font-face: 引入自定义字体。
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
}
body {
font-family: 'MyFont', sans-serif;
}
- 图标字体: 使用
Font Awesome等库。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<i class="fas fa-home"></i>
滤镜与效果
使用滤镜（filter）和其他效果（如阴影）增强元素的视觉效果。
- filter: 应用滤镜效果。
img {
filter: grayscale(50%);
}
- box-shadow: 应用阴影效果。
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
代码组织
代码结构
良好的代码结构使样式表更易于阅读和维护。通常按模块、组件或功能划分CSS文件。
/* 颜色 */
body {
background-color: #f0f0f0;
}
/* 布局 */
.container {
width: 80%;
margin: 0 auto;
}
/* 组件 */
.button {
background-color: blue;
color: white;
padding: 10px 20px;
}
命名约定
使用一致的命名约定（如BEM）使代码更具可读性和可维护性。
- BEM: 块（
Block）、元素（Element）、修饰符（Modifier）。
/* BEM示例 */
.button { }
.button--primary { }
.button__icon { }
预处理器
CSS预处理器（如Sass、LESS）增加了变量、嵌套、函数等高级功能，提升了CSS的可维护性和复用性。
- Sass示例:
$primary-color: blue;
.button {
background-color: $primary-color;
&:hover {
background-color: darken($primary-color, 10%);
}
}
性能优化
优化CSS性能可以提高网页加载速度和用户体验。
- 压缩CSS: 移除空格、注释等无用字符。
- 合并文件: 减少
HTTP请求次数。 - 使用CDN: 提高资源加载速度。
- 异步加载: 在需要时加载
CSS。
<link rel="stylesheet" href="styles.min.css">
这篇博客文章涵盖了CSS基础中的核心知识，包括选择器、层叠与继承、属性、视觉格式化模型、响应式设计、高级技术和代码组织等内容。希望这些内容能帮助你更好地理解和应用CSS。如果有任何疑问或需要进一步的解释，请随时联系我。
扫一扫
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
