css的基础知识-EW帮帮网

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述 HTML 或 XML 文档呈现样式的样式表语言，主要负责网页的视觉表现（如布局、颜色、字体等），实现“内容与样式分离”的开发模式。以下是 CSS 的核心基础知识体系：

一、CSS 的核心作用

控制样式：定义文字颜色、字体大小、背景、边框等视觉属性。
布局控制：通过盒模型、浮动、Flexbox、Grid 等实现元素的排列。
响应式设计：结合媒体查询（Media Query）适配不同设备（手机、PC 等）。
提升可维护性：集中管理样式，避免重复代码（如统一修改全局字体）。

二、CSS 的引入方式

CSS 有三种引入方式，根据需求选择：

1. 内联样式（Inline CSS）

直接在 HTML 元素的 style 属性中写 CSS，仅对当前元素生效。
示例：

<p style="color: red; font-size: 16px;">这是一段红色文字</p>

特点：优先级最高，但不利于复用和维护，不推荐大规模使用。

2. 内部样式表（Internal CSS）

在 HTML 的 <head> 标签内用 <style> 标签包裹 CSS 代码，对当前页面生效。
示例：

<head>
  <style>
    p {
      color: blue;
      font-size: 14px;
    }
    .title {
      font-weight: bold;
    }
  </style>
</head>

特点：适用于单页面样式，比内联更易管理。

3. 外部样式表（External CSS）

将 CSS 代码单独保存为 .css 文件（如 style.css），通过 <link> 标签引入 HTML 页面，对多个页面生效。
示例：

<head>
  <link rel="stylesheet" href="style.css">
</head>

style.css 内容：

/* 全局样式 */
body {
  margin: 0;
  font-family: Arial;
}
/* 类选择器 */
.btn {
  padding: 8px 16px;
  background: #007bff;
  color: white;
}

特点：复用性最强，推荐大型项目使用（符合“结构-样式-行为分离”原则）。

三、选择器（Selector）

选择器是 CSS 的核心，用于选中需要样式化的 HTML 元素。常见选择器类型如下：

1. 基础选择器

元素选择器：通过 HTML 标签名选中所有同类元素（如 p、div）。
```
p { color: red; } /* 所有 <p> 标签文字变红 */
```

类选择器：通过 class 属性选中元素（类名可重复，以 . 开头）。

.title { font-size: 20px; } /* 所有 class="title" 的元素 */
<h1 class="title">标题</h1> <!-- 生效 -->

ID 选择器：通过 id 属性选中唯一元素（ID 不可重复，以 # 开头）。

#header { height: 60px; } /* 仅 id="header" 的元素生效 */
<div id="header"></div> <!-- 生效 -->

通配符选择器：选中所有元素（*），通常用于重置默认样式。
```
* { margin: 0; padding: 0; } /* 清除所有元素的内外边距 */
```

2. 组合选择器

后代选择器：选中某元素的所有后代元素（用空格分隔）。
```
.container p { color: green; } /* .container 内部所有 <p> 标签 */
```
子选择器：仅选中某元素的直接子元素（用 > 分隔）。
```
ul > li { list-style: square; } /* <ul> 的直接 <li> 子元素 */
```
相邻兄弟选择器：选中某元素的下一个同级元素（用 + 分隔）。
```
h2 + p { margin-top: 0; } /* <h2> 后面紧接的 <p> 标签 */
```
通用兄弟选择器：选中某元素的所有后续同级元素（用 ~ 分隔）。
```
.box ~ .item { color: gray; } /* .box 之后所有 .item 元素 */
```

3. 属性选择器

根据元素的属性或属性值匹配元素（用 [] 包裹属性）。

/* 选中有 href 属性的 <a> 标签 */
a[href] { color: blue; }

/* 选中 href 属性以 "https://" 开头的 <a> 标签 */
a[href^="https://"] { color: green; }

/* 选中 href 属性以 ".pdf" 结尾的 <a> 标签 */
a[href$=".pdf"] { color: red; }

/* 选中 type 属性等于 "email" 的 <input> 标签 */
input[type="email"] { border: 1px solid #ddd; }

4. 伪类（Pseudo-class）

用于定义元素的特殊状态（如鼠标悬停、聚焦等），以 : 开头。
常见伪类：

:hover：鼠标悬停时生效。
```
button:hover { background: darkblue; }
```
:focus：元素获得焦点时（如输入框被点击）。
```
input:focus { outline: none; }
```
:nth-child(n)：选中第 n 个子元素（n 可以是数字、even 偶数、odd 奇数）。
```
tr:nth-child(odd) { background: #f5f5f5; } /* 表格奇数行背景色 */
```
:first-child/:last-child：选中第一个/最后一个子元素。

5. 伪元素（Pseudo-element）

用于创建虚拟的 HTML 元素（不存在于 DOM 中），以 :: 开头（部分旧浏览器支持 :）。
常见伪元素：

::before：在元素内容前插入虚拟内容。

.alert::before {
  content: "警告："; /* 必须定义 content，否则不生效 */
  color: red;
}

::after：在元素内容后插入虚拟内容。
::first-letter：选中元素的第一个字母（用于首字放大）。

四、盒模型（Box Model）

CSS 中每个元素都被视为一个矩形盒子，由以下部分组成：

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c5d3f4f3d3d4e4a8e4b4c4d4e4f4a4b~tplv-k3u1fbpfcp-zoom-1.image

1. 核心属性

内容区（Content）：元素的实际内容（文字、图片等），尺寸由 width 和 height 控制（默认仅控制内容区宽度）。
内边距（Padding）：内容区与边框之间的空白区域，由 padding 控制（可分别设置上下左右：padding-top、padding-right 等，或简写为 padding: 上右下左）。
边框（Border）：围绕内容和内边距的线条，由 border 控制（需指定宽度、样式、颜色，如 border: 1px solid #000）。
外边距（Margin）：元素与其他元素之间的空白区域，由 margin 控制（规则同 padding）。

2. 标准盒模型 vs IE 盒模型

标准盒模型（默认）：width 和 height 仅包含内容区，总宽度 = width + padding-left + padding-right + border-left + border-right。
IE 盒模型（怪异盒模型）：width 和 height 包含内容区、内边距和边框，总宽度 = width（已包含 padding 和 border）。

切换盒模型：通过 box-sizing 属性控制：

.box {
  box-sizing: content-box; /* 标准盒模型（默认） */
  box-sizing: border-box; /* IE 盒模型（常用） */
}

3. 外边距折叠（Margin Collapse）

垂直方向的外边距（margin-top/margin-bottom）可能会合并为较大的那个值（水平方向不会折叠）。常见场景：

相邻的兄弟元素。
父元素与第一个/最后一个子元素（无边框、内边距或内容分隔时）。
空块级元素（无内容、边框、内边距时，上下 margin 折叠）。

五、布局（Layout）

布局是 CSS 的核心能力，用于控制元素在页面中的位置和排列方式。常见布局方案：

1. 文档流（Normal Flow）

默认布局方式，元素按 HTML 顺序排列：

块级元素（Block）：独占一行（如 div、p），宽度默认撑满父容器。
行内元素（Inline）：在同一行排列（如 span、a），宽度由内容决定，无法设置 width/height。

2. 浮动（Float）

通过 float 属性让元素脱离文档流，实现多列布局（常用于早期网页）。

.left {
  float: left; /* 左浮动 */
  width: 200px;
}
.right {
  float: right; /* 右浮动 */
}

注意：浮动元素会导致父容器高度塌陷（需清除浮动），常用解决方案：

父容器添加 overflow: auto 或 overflow: hidden。
父容器末尾添加空元素并设置 clear: both。

3. 定位（Position）

通过 position 属性控制元素的定位方式，常见值：

static（默认）：不定位，遵循文档流。
relative（相对定位）：相对于自身原位置偏移（top/left/right/bottom），不脱离文档流。
absolute（绝对定位）：相对于最近的已定位祖先元素（非 static）偏移，脱离文档流。
fixed（固定定位）：相对于浏览器视口偏移（如导航栏固定顶部），脱离文档流。
sticky（粘性定位）：结合 relative 和 fixed，滚动到特定位置时固定（如滚动时导航栏吸附顶部）。

4. Flexbox（弹性盒模型）

现代一维布局方案（一行或一列），用于快速实现元素的对齐、排列和空间分配。
父容器设置：display: flex 或 display: inline-flex。
常用属性：

flex-direction：主轴方向（row 水平 / column 垂直）。
justify-content：主轴对齐方式（flex-start 左对齐 / center 居中 / space-between 两端对齐）。
align-items：交叉轴对齐方式（stretch 拉伸 / center 居中）。
flex-wrap：换行（nowrap 不换行 / wrap 换行）。

子元素属性：

flex：flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基准宽度）的简写（如 flex: 1 表示均分空间）。

5. Grid（网格布局）

现代二维布局方案（同时控制行和列），适合复杂网格结构（如仪表盘、卡片墙）。
父容器设置：display: grid。
常用属性：

grid-template-columns：定义列（如 1fr 2fr 1fr 表示三列，比例为 1:2:1）。
grid-template-rows：定义行。
gap：网格间距（grid-gap 的简写）。

六、常用 CSS 属性

以下是开发中最常用的 CSS 属性分类：

1. 文本样式

color：文字颜色（支持颜色名、十六进制 #ff0000、RGB rgb(255,0,0)、HSL hsl(0,100%,50%)）。
font-size：字体大小（如 16px、1.2rem）。
font-family：字体系列（如 'Microsoft YaHei', sans-serif）。
font-weight：字体粗细（normal 正常 / bold 加粗 / 700 数字值）。
text-align：文本对齐（left 左 / center 居中 / right 右 / justify 两端对齐）。
line-height：行高（如 1.5 表示字体大小的 1.5 倍）。

2. 背景样式

background-color：背景颜色（如 #f8f9fa、transparent 透明）。
background-image：背景图片（url('img/bg.jpg')）。
background-repeat：背景重复（no-repeat 不重复 / repeat-x 水平重复）。
background-position：背景位置（center 居中 / top left 左上）。
background-size：背景尺寸（cover 覆盖 / contain 包含 / 100px 200px 具体尺寸）。

3. 边框与圆角

border-width：边框宽度（如 2px）。
border-style：边框样式（solid 实线 / dashed 虚线 / dotted 点线）。
border-radius：圆角半径（如 8px 或 50% 圆形）。

4. 其他常用属性

opacity：元素透明度（0 完全透明 / 1 完全不透明）。
visibility：元素可见性（visible 可见 / hidden 隐藏，但保留空间）。
display：元素显示类型（block 块级 / inline 行内 / none 隐藏且不占空间）。
cursor：鼠标指针样式（pointer 手型 / text 文本型）。

七、响应式设计基础

通过 媒体查询（Media Query） 让页面适配不同屏幕尺寸（如手机、平板、PC）。
核心语法：

/* 当屏幕宽度小于等于 768px 时生效（移动端） */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 10px;
  }
  .nav {
    display: none; /* 移动端隐藏导航栏 */
  }
}

/* 当屏幕宽度在 769px 到 1024px 之间时生效（平板） */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    width: 90%;
    margin: 0 auto;
  }
}

视口元标签：在 HTML 头部添加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，确保移动端正确缩放页面。

八、最佳实践

分离结构与样式：尽量使用外部样式表，避免内联样式。
使用类选择器：减少对 ID 和元素选择器的依赖（ID 优先级过高，不利于覆盖）。
避免过度嵌套：CSS 选择器嵌套过深（如 div ul li a）会影响性能和维护性。
命名规范：使用语义化的类名（如 .header、.main-content，而非 .box1、.box2）。
兼容性处理：针对旧浏览器（如 IE）添加前缀（如 -webkit-、-moz-），或使用 Autoprefixer 工具自动处理。

掌握以上基础知识后，可进一步学习 CSS 高级特性（如变量、动画、预处理器 Sass 等），逐步提升前端开发能力。

css的基础知识

一、CSS 的核心作用

二、CSS 的引入方式

1. 内联样式（Inline CSS）

2. 内部样式表（Internal CSS）

3. 外部样式表（External CSS）

三、选择器（Selector）

1. 基础选择器

2. 组合选择器

3. 属性选择器

4. 伪类（Pseudo-class）

5. 伪元素（Pseudo-element）

四、盒模型（Box Model）

1. 核心属性

2. 标准盒模型 vs IE 盒模型

3. 外边距折叠（Margin Collapse）

五、布局（Layout）

1. 文档流（Normal Flow）

2. 浮动（Float）

3. 定位（Position）

4. Flexbox（弹性盒模型）

5. Grid（网格布局）

六、常用 CSS 属性

1. 文本样式

2. 背景样式

3. 边框与圆角

4. 其他常用属性

七、响应式设计基础

八、最佳实践

网站公告

今日签到

热门文章

最新发布

css的基础知识

​​一、CSS 的核心作用​​

​​二、CSS 的引入方式​​

1. ​​内联样式（Inline CSS）​​

2. ​​内部样式表（Internal CSS）​​

3. ​​外部样式表（External CSS）​​

​​三、选择器（Selector）​​

1. ​​基础选择器​​

2. ​​组合选择器​​

3. ​​属性选择器​​

4. ​​伪类（Pseudo-class）​​

5. ​​伪元素（Pseudo-element）​​

​​四、盒模型（Box Model）​​

1. ​​核心属性​​

2. ​​标准盒模型 vs IE 盒模型​​

3. ​​外边距折叠（Margin Collapse）​​

​​五、布局（Layout）​​

1. ​​文档流（Normal Flow）​​

2. ​​浮动（Float）​​

3. ​​定位（Position）​​

4. ​​Flexbox（弹性盒模型）​​

5. ​​Grid（网格布局）​​

​​六、常用 CSS 属性​​

1. ​​文本样式​​

2. ​​背景样式​​

3. ​​边框与圆角​​

4. ​​其他常用属性​​

​​七、响应式设计基础​​

​​八、最佳实践​​

网站公告

今日签到

热门文章

最新发布

一、CSS 的核心作用

二、CSS 的引入方式

1. 内联样式（Inline CSS）

2. 内部样式表（Internal CSS）

3. 外部样式表（External CSS）

三、选择器（Selector）

1. 基础选择器

2. 组合选择器

3. 属性选择器

4. 伪类（Pseudo-class）

5. 伪元素（Pseudo-element）

四、盒模型（Box Model）

1. 核心属性

2. 标准盒模型 vs IE 盒模型

3. 外边距折叠（Margin Collapse）

五、布局（Layout）

1. 文档流（Normal Flow）

2. 浮动（Float）

3. 定位（Position）

4. Flexbox（弹性盒模型）

5. Grid（网格布局）

六、常用 CSS 属性

1. 文本样式

2. 背景样式

3. 边框与圆角

4. 其他常用属性

七、响应式设计基础

八、最佳实践