HTML 样式- CSS 详解

HTML 样式主要通过 CSS（层叠样式表）实现，用于控制网页的外观和布局。以下是 CSS 的详细解析：

作用：CSS 用于描述 HTML 或 XML 文档的呈现样式，控制网页的布局、字体、颜色、间距等视觉效果，使网页更加美观和用户友好。
优势：
- 样式与结构分离：HTML 专注结构呈现，样式交给 CSS，便于维护和更新。
- 提高加载速度：通过外部样式表复用样式，减少页面体积。
- 增强灵活性：支持响应式设计、动画效果等高级特性。

基本结构： css selector { property: value; property: value; }
- 选择器（Selector）：用于选择需要应用样式的 HTML 元素，如 p、.class、#id 等。
- 声明块（Declaration Block）：包含一组属性和值，用于定义元素的样式。
- 属性（Property）：定义样式的特性，如 color、font-size、margin 等。
- 属性值（Value）：属性的具体值，如 red、16px、10px 等。

内联样式（Inline Styles）：
- 直接在 HTML 标签的 style 属性中定义样式。
  html ¨K12K
内部样式表（Internal Style Sheet）：
- 在 HTML 文档的 <head> 部分使用 <style> 标签定义样式。
  html <head> ¨K14K </head>
外部样式表（External Style Sheet）：
- 在独立的 CSS 文件中定义样式，然后在 HTML 文档的 <head> 部分使用 <link> 标签引入。
  html <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head>
  在 styles.css 文件中：
  css p { color: green; font-size: 12px; }

基本选择器：
- 元素选择器：如 p 选择所有 <p> 元素。
- 类选择器：以 . 开头，如 .class-name 选择所有 class="class-name" 的元素。
- ID 选择器：以 # 开头，如 #id-name 选择 id="id-name" 的元素。
- 全局选择器：* 选择所有元素。
组合选择器：
- 后代选择器：选择器之间用空格分隔，如 .nav li 选择 .nav 内的所有 <li> 元素。
- 子元素选择器：选择器之间用 > 分隔，如 .nav > li 选择 .nav 的直接子元素 <li>。
- 群组选择器：选择器之间用逗号分隔，如 body, ul, li 同时选择多个元素。
伪类选择器：
- 如 a:link 设置未访问链接的样式，a:hover 设置鼠标悬停时的样式。

字体属性：
- font-family：设置字体族科，如 "Arial", "Helvetica", sans-serif。
- font-size：设置字体大小，如 16px。
- font-style：设置字体风格，如 italic。
- font-weight：设置字体粗细，如 bold。
文本属性：
- color：设置文字颜色。
- text-align：设置文本对齐方式，如 center。
- text-decoration：设置文字修饰，如 underline。
- line-height：设置行高。
背景属性：
- background-color：设置背景颜色。
- background-image：设置背景图片。
盒模型属性：
- width、height：设置元素的宽度和高度。
- padding：设置内边距。
- border：设置边框。
- margin：设置外边距。

盒模型：每个元素被视为一个盒子，包含内容、内边距、边框和外边距。
浮动（Float）：通过设置 float 属性为 left 或 right，实现元素左右浮动，常用于图文混排。
定位（Position）：
- static：默认值，元素按照正常文档流排列。
- relative：相对定位，元素相对于其正常位置进行偏移。
- absolute：绝对定位，元素相对于最近的非 static 定位的祖先元素进行偏移。
- fixed：固定定位，元素相对于浏览器窗口进行偏移。
Flexbox 布局：使用 display: flex 实现灵活的布局，适合一维布局。
Grid 布局：使用 display: grid 实现强大的二维布局。

响应式设计：通过媒体查询（Media Queries）适配不同设备的屏幕尺寸。
css @media (max-width: 600px) { body { background-color: lightblue; } }
CSS 变量（Custom Properties）：通过定义变量简化样式管理。
css :root { --main-color: #3498db; } p { color: var(--main-color); }
动画与过渡（Animations and Transitions）：实现页面元素的动画效果。
css p { transition: color 0.5s; } p:hover { color: lightblue; }

发表评论 取消回复