CSS的初步学习

一、CSS 概述

CSS 是一种用于描述 HTML（或其他标记语言）文档样式 (外观) 的样式表语言。它允许你控制页面元素的颜色、字体、布局、以及其他视觉效果。 CSS 的核心目标是将内容与表现分离，这意味着 HTML 负责结构和内容，而 CSS 负责样式和呈现。

二、CSS 的核心概念

选择器 (Selectors): 用于选择要设置样式的 HTML 元素。
属性 (Properties): 要设置的样式特性，如颜色、字体大小、边框等。
值 (Values): 为属性设置的具体值，例如颜色值 (red, #0000FF)，字体大小 (16px, 2em)，边框样式 (solid, dashed) 等。
声明 (Declarations): 由属性和值组成，例如: color: red;。
规则集 (Rulesets): 由选择器和声明块组成，例如:

css 复制代码

p {             /* 选择器 */
    color: red;    /* 声明 */
    font-size: 16px; /* 声明 */
}

三、CSS 语法

1.基本结构:

css 复制代码

selector {
    property1: value1;
    property2: value2;
    /* ... more properties and values ... */
}

2.选择器 & 声明块:

（1）选择器指定要更改样式的 HTML 元素。

（2）声明块 ( { ... } ) 包含一个或多个声明。

（3）每个声明由属性和值组成，以冒号 (: ) 分隔。

（4）多个声明之间用分号 (;) 分隔。最后一个声明后面的分号是可选的。

3.注释

CSS 注释以 /* 开始，以 */ 结束。注释可以跨多行。

注意：不能使用 // 进行注释。

四、CSS 选择器 (Selectors) 详解

选择器是 CSS 中最重要的部分，用于决定哪些 HTML 元素将应用样式。以下是各种类型的选择器：

1.基本选择器:

元素选择器 (Element selector): 选择特定类型的 HTML 元素。

css 复制代码

p { ... }      /* 选择所有 <p> 元素 */
h1 { ... }     /* 选择所有 <h1> 元素 */

ID 选择器 (ID selector) : 选择具有特定 id 属性的 HTML 元素。 ID 在一个 HTML 文档中必须是唯一的。

css 复制代码

#myDiv { ... }  /* 选择 id 为 "myDiv" 的元素 */

类选择器 (Class selector) : 选择具有特定 class 属性的 HTML 元素。一个元素可以有多个类，不同的元素可以共享相同的类。

css 复制代码

.highlight { ... }  /* 选择 class 包含 "highlight" 的所有元素 */
.error { ... }     /* 选择 class 包含 "error" 的所有元素 */

通用选择器 (Universal selector): 选择所有 HTML 元素。

css 复制代码

* { ... }  /* 选择所有元素 (通常用于重置样式，但性能影响大，不推荐频繁使用) */

2.组合选择器 (Combinator selectors):

使用不同的组合方式来选择元素。

后代选择器 (Descendant selector): 选择作为指定元素后代的元素 (包括子元素、孙子元素等)。

css 复制代码

div p { ... }  /* 选择所有作为 <div> 元素后代的 <p> 元素 */

子选择器 (Child selector): 选择作为指定元素直接子元素的元素 (只选择一级子元素)。 ( > )

css 复制代码

div > p { ... }  /* 选择所有作为 <div> 元素子元素的 <p> 元素 */

相邻兄弟选择器 (Adjacent sibling selector): 选择紧跟在指定元素后的相邻兄弟元素 (共享同一个父元素)。 ( + )

css 复制代码

h1 + p { ... }   /* 选择紧跟在 <h1> 元素后的第一个 <p> 元素 */

通用兄弟选择器 (General sibling selector): 选择与指定元素相邻的兄弟元素 (所有共享同一个父元素的兄弟元素，无论顺序)。 ( ~ )

css 复制代码

h1  ~ p { ... } /* 选择 <h1> 后面的所有 <p> 元素 （同父元素）*/

3.伪类选择器 (Pseudo-class selectors):

选择处于特定状态的元素。

:link: 未访问过的链接。
:visited: 已访问过的链接。
:hover: 鼠标悬停时的元素。
:active: 鼠标点击时的元素。
:focus: 元素获得焦点时 (例如，输入框被选中)。
:first-child: 作为其父元素的第一个子元素的元素。
:last-child: 作为其父元素的最后一个子元素的元素。
:nth-child(n): 作为其父元素的第 n 个子元素的元素 (n 可以是数字、关键字 **odd**和 even，或者一个公式 an+b)。
:nth-last-child(n): 类似于 :nth-child(n)，但从最后一个子元素开始计数。
:first-of-type: 作为其父元素的第一个指定类型的子元素。
:last-of-type: 作为其父元素的最后一个指定类型的子元素。
:nth-of-type(n): 作为其父元素的第 n 个指定类型的子元素。
:nth-last-of-type(n): 类似于 :nth-of-type(n)，但从最后一个指定类型的子节点开始计数。
:empty: 没有子元素的元素。
:enabled: 启用的表单元素。
:disabled: 禁用的表单元素。
:checked: 被选中的表单元素 (例如，复选框)。
:not(selector): 选择不匹配给定选择器的元素。

css 复制代码

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: orange; }
a:active { color: red; }
p:first-child { font-weight: bold; }
li:nth-child(2n+1) { background-color: #f0f0f0; } /*  奇数行的列表项 */
input[type="text"]:focus { border: 2px solid blue; }

4.伪元素选择器 (Pseudo-element selectors):

选择元素的特定部分。

::first-line: 选择元素的第一行文本。
::first-letter: 选择元素的首字母。
::before: 在元素的内容之前插入内容。
**::after:**在元素的内容之后插入内容。
::marker 选择列表项的标记 (例如，项目符号、编号)。 (实验性质，浏览器支持有差异)
::selection: 选择用户选中的文本。

css 复制代码

p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }
h1::before { content: ">> "; }  /*在 h1 元素之前插入 ">> "  */
h1::after { content: " <<"; }  /*在 h1 元素之后插入 "<<" */
::selection { background-color: yellow; color: black; }

5.属性选择器 (Attribute selectors):

根据元素的属性来选择元素。

[attribute]: 选择具有指定属性的元素。
[attribute=value]: 选择具有指定属性，且其值为指定值的元素。
[attribute~=value]: 选择具有指定属性，且其值包含指定单词 (以空格分隔) 的元素。
[attribute|=value]: 选择具有指定属性，且其值以指定值开头 (且后面跟着 "-") 的元素 (用于语言代码等)。
[attribute*=value]: 选择具有指定属性，且其值包含指定子字符串的元素。
[attribute^=value]: 选择具有指定属性，且其值以指定字符串开头的元素。
[attribute$=value]: 选择具有指定属性，且其值以指定字符串结尾的元素。

五、CSS 属性 (Properties) 和值 (Values) 详解

CSS 属性控制 HTML 元素的样式。以下是常用属性以及它们的值：

文本 (Text):

color:文本颜色 (例如：red, #0000FF, rgb(255, 0, 0), rgba(255, 0, 0, 0.5))
font-family:字体系列 (例如：Arial, Helvetica, "Times New Roman")。可以指定多个字体，用逗号分隔，浏览器会按顺序尝试。
font-size: 字体大小 (例如：16px, 2em, 1.5rem, 100%, large, small)。
font-style: 字体样式 (normal, italic, oblique)。
font-weight: 字体粗细 (normal, bold, lighter, bolder, 100 到 900)。
text-align: 文本水平对齐 (left, right, center, justify)。
text-decoration: 文本装饰 (none, underline, overline, line-through, blink)。
text-transform: 文本转换 (none, uppercase, lowercase, capitalize)。
letter-spacing: 字符间距 (例如：2px, 0.1em, -1px)。
word-spacing: 单词间距 (例如：5px, 0.2em)。
line-height: 行高 (例如：1.5, 20px, 150%)。
text-indent: 文本缩进 (例如：2em, 30px)。
text-shadow: 文本阴影 (例如：2px 2px 5px gray)

背景 (Background):

background-color: 背景颜色 (例如：red, #0000FF, rgb(255, 0, 0), rgba(255, 0, 0, 0.5), transparent)。
background-image: 背景图片 (例如：url("image.jpg"))。
background-repeat: 背景图片重复方式 (repeat, repeat-x, repeat-y, no-repeat)。
background-position: 背景图片位置 (例如：top left, center center, 20px 30px)。可以使用关键字和百分比，坐标。
background-size: 背景图片大小 (auto, cover, contain, width height)。
background-attachment: 背景附着 (scroll, fixed, local): 背景是否随页面滚动。
background: 简写属性 (background-color, background-image, background-repeat, background-position, background-size, background-attachment)

边框 (Border):

border-width: 边框宽度 (例如：1px, 3px, thin, medium, thick)。
border-style: 边框样式 (none, solid, dashed, dotted, double, groove, ridge, inset, outset)。
border-color: 边框颜色 (例如：red, #0000FF, rgb(255, 0, 0), rgba(255, 0, 0, 0.5))。
border-top, border-right, border-bottom, border-left: 指定各边的边框属性.
border-radius: 边框圆角 (例如：5px, 50%)。
border: 简写属性 (border-width, border-style, border-color)

尺寸 (Box Model):

width: 宽度 (例如：100px, 50%, auto)。
height: 高度 (例如：100px, 50%, auto)。
min-width: 最小宽度。
**max-width:**最大宽度。
min-height: 最小高度。
max-height: 最大高度。

内边距 (Padding):

元素内容与边框之间的空间。

padding-top: 上内边距。
padding-right: 右内边距。
padding-bottom: 下内边距。
padding-left: 左内边距。
padding: 简写属性 (可以指定 1-4 个值):
padding: 10px; - 所有边距都是 10px.
padding: 10px 20px; - 上下 10px，左右 20px.
padding: 10px 20px 30px; - 上 10px，左右 20px，下 30px.
padding: 10px 20px 30px 40px; - 上 10px，右 20px，下 30px，左 40px (顺时针方向).

外边距 (Margin):

元素边框与相邻元素之间的空间。

**margin-top:**上外边距。
margin-right: 右外边距。
margin-bottom: 下外边距。
**margin-left:**左外边距。
margin: 简写属性 (与 padding 类似)。
margin: auto; 用于水平居中块级元素（如果宽度设置了，margin-left和margin-right都会是auto）。

定位 (Positioning):

`1.position`: 定位类型 (`static`, `relative`, `absolute`, `fixed`, `sticky`)。

static: 默认值，元素按照文档流正常排列。
relative: 相对于其正常位置的定位。元素可以移动，但会保留其在文档流中的空间。
absolute: 相对于其最近的已定位祖先元素（position 不是 static 的元素）的定位。如果不存在已定位祖先元素，则相对于 <body> 元素的定位。元素从文档流中移除。
fixed: 相对于浏览器窗口的定位。元素总是位于窗口的指定位置，即使页面滚动。
sticky: 根据滚动位置在 relative 和 fixed 之间切换。在达到指定位置前是 relative，到达指定位置变为 fixed (例如，吸顶效果)。

2.`top`, `right`, `bottom`, `left`:

定位属性，用于指定元素的位置。

`3.z-index`:

堆叠顺序 (用于控制重叠元素的显示顺序，值越大，显示在越上面)。仅适用于已定位元素 (position != static)。

浮动 (Float):

float: 浮动 (left, right, none)。元素可以向左或向右浮动，允许文本和内联元素环绕它。
clear:清除浮动 (left, right, both, none)。用于防止元素受到浮动的影响。

Flexbox (弹性盒子)

用于创建灵活的、响应式的布局。

display: flex; 或 display: inline-flex; (将元素设置为弹性盒子，可以控制子元素的布局).
flex-direction: 定义主轴方向 (row, row-reverse, column, column-reverse)
justify-content:定义主轴上的对齐方式 (flex-start, flex-end, center, space-between, space-around, space-evenly)。
align-items:定义交叉轴上的对齐方式 (flex-start, flex-end, center, baseline, stretch)。
align-content: (多行对齐，适用于多行 flex 容器)定义交叉轴上的对齐方式，当 flex 容器有多行时。 (flex-start, flex-end, center, space-between, space-around, space-evenly, stretch)
flex-wrap: 是否换行 (nowrap, wrap, wrap-reverse)。
flex-grow: 子元素放大比例。
flex-shrink: 子元素缩小比例。
flex-basis: 子元素的初始大小。
order: 定义子元素的显示顺序。
align-self: 针对单个项目定义在其交叉轴上的对齐方式。

Grid 栅格布局：

用于创建复杂的二维 (行和列) 布局。

display: grid; 或 display: inline-grid; (将元素设置为网格容器)
grid-template-columns: 定义列的尺寸。
grid-template-rows: 定义行的尺寸。
grid-template-areas: 定义网格区域。
grid-column-gap: 定义列之间的间隙。
grid-row-gap: 定义行之间的间隙 (已废弃，使用 gap 代替)。
gap: 结合 grid-column-gap 和 grid-row-gap。
justify-items: 定义网格项在内容区域内的水平对齐方式。
align-items: 定义网格项在内容区域内的垂直对齐方式。
justify-content: 定义网格容器在网格轨道中的水平对齐方式，针对整个网格轨道。
align-content: 定义网格容器在网格轨道中的垂直对齐方式，针对整个网格轨道。
grid-column-start, grid-column-end, grid-row-start, grid-row-end: 定义网格项的位置和跨度。
grid-column, grid-row: 简写属性 (grid-column-start & grid-column-end, grid-row-start & grid-row-end).
grid-area: 定义网格项的名称和位置。使用 grid-template-areas 定义布局时，可以用名称来控制网格项的位置。
grid-auto-columns: 隐式轨道的高度
grid-auto-rows: 隐式轨道的宽度
grid-auto-flow: 定义自动放置的网格项的布局顺序。
grid: 简写属性 (各个属性的简写)。

其他特性:

display:定义元素的显示类型 (block, inline, inline-block, none, flex, grid, table, 等等, 以及其他的 HTML5 display 值)
visibility:元素的可见性 (visible, hidden, collapse (用于表格行/列))。
- display: none; 将完全移除元素及其所占空间。
- visibility: hidden; 隐藏元素，但仍然占据其所占用的空间。
opacity: 元素的透明度 (0.0 (完全透明) 到 1.0 (完全不透明))。
cursor: 鼠标指针样式 (例如：pointer, crosshair, wait, help, text, default)。
overflow: 控制内容溢出元素框时的处理方式 (visible, hidden, scroll, auto, clip)。
clip: 定义元素的裁剪区域（已废弃，最好使用 clip-path） (例如: rect(top, right, bottom, left), auto (表示无裁剪)). clip-path 更强大。
clip-path: 定义元素的裁剪路径 (例如：inset(10px, 20px, 30px, 40px) (类似于 clip),circle(), ellipse(), polygon(), url(#clipPathId)) - 可以创建更复杂的形状。
word-break: 定义如何处理单词内的换行 (normal, break-all, keep-all)。
word-wrap: 控制单词是否允许在行内断开换行 (也称作 overflow-wrap) (normal, break-word)。
box-shadow: 添加阴影效果 (例如：2px 2px 5px gray, inset 0 0 10px red).
filter: 应用图形效果 (例如：blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), drop-shadow(), url()).
transform: 对元素进行 2D 或 3D 转换 (例如：rotate(), scale(), translate(), skew(), perspective(), matrix()).
transition: 定义 CSS 属性的过渡效果 (例如：all 0.5s ease-in-out).
animation: 定义 CSS 动画 (定义动画的名称，持续时间，动画的计时函数，延迟时间，重复次数等).
content: 只有伪元素使用，表示生成的内容 ( ::before ::after), 可以是文本、图像或其他内容, 如果是静态内容,需要用引号 content: "Hello";
pointer-events控制元素对鼠标事件的响应。 none 表示元素不会响应鼠标事件，auto 默认值。

六、CSS 引入方式

1.内联样式 (Inline styles): 直接在 HTML 元素的 style 属性中定义样式。 (不推荐，不利于维护)

html 复制代码

<p style="color: red; font-size: 16px;">This is a paragraph.</p>

2.内部样式表 (Internal style sheets): 在 <style> 元素中定义样式，位于 <head> 标签内。 (适用于单个 HTML 页面)

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
</body>
</html>

3.外部样式表 (External style sheets): 将样式定义在独立的**.css** 文件中，然后在 HTML 文档中使用 <link> 标签链接到该文件。 (最佳实践，适用于多个 HTML 页面，易于维护)

HTML (index.html):

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>This is a paragraph.</p>
</body>
</html>

CSS (style.css):

css 复制代码

p {
  color: red;
  font-size: 16px;
}

导入样式表 (@import): 在 CSS 文件中使用 @import 规则链接到其他 CSS 文件。 (不推荐，因为会降低页面加载速度)

css 复制代码

@import "other-styles.css";

CSS的初步学习

一、CSS 概述

二、CSS 的核心概念

三、CSS 语法

1.基本结构:

2.选择器 & 声明块:

3.注释

四、CSS 选择器 (Selectors) 详解

1.基本选择器:

2.组合选择器 (Combinator selectors):

3.伪类选择器 (Pseudo-class selectors):

4.伪元素选择器 (Pseudo-element selectors):

5.属性选择器 (Attribute selectors):

五、CSS 属性 (Properties) 和值 (Values) 详解

文本 (Text):

背景 (Background):

边框 (Border):

尺寸 (Box Model):

内边距 (Padding):

外边距 (Margin):

定位 (Positioning):

1.position: 定位类型 (static, relative, absolute, fixed, sticky)。

2.top, right, bottom, left:

3.z-index:

浮动 (Float):

Flexbox (弹性盒子)

Grid 栅格布局：

其他特性:

六、CSS 引入方式

`1.position`: 定位类型 (`static`, `relative`, `absolute`, `fixed`, `sticky`)。

2.`top`, `right`, `bottom`, `left`:

`3.z-index`: