CSS的初步学习

一、CSS 概述

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

二、CSS 的核心概念

1. 选择器 (Selectors): 用于选择要设置样式的 HTML 元素。

2. 属性 (Properties): 要设置的样式特性，如颜色、字体大小、边框等。

3. 值 (Values): 为属性设置的具体值，例如颜色值 (red, #0000FF)，字体大小 (16px, 2em)，边框样式 (solid, dashed) 等。

4. 声明 (Declarations): 由属性和值组成，例如: color: red;。

5. 规则集 (Rulesets): 由选择器和声明块组成，例如:

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

三、CSS 语法

1.基本结构:

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 元素。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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): 选择不匹配给定选择器的元素。

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: 选择用户选中的文本。

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 属性中定义样式。 (不推荐，不利于维护) 

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

 2.内部样式表 (Internal style sheets): 在 <style> 元素中定义样式，位于 <head> 标签内。 (适用于单个 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):

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

 CSS (style.css):

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

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

@import "other-styles.css";