CSS的初步学习
一、CSS 概述
CSS 是一种用于描述 HTML（或其他标记语言）文档样式 (外观) 的样式表语言。 它允许你控制页面元素的颜色、字体、布局、以及其他视觉效果。 CSS 的核心目标是将内容与表现分离，这意味着 HTML 负责结构和内容，而 CSS 负责样式和呈现。
二、CSS 的核心概念
选择器 (Selectors): 用于选择要设置样式的 HTML 元素。
属性 (Properties): 要设置的样式特性，如颜色、字体大小、边框等。
值 (Values): 为属性设置的具体值，例如颜色值 (red, #0000FF)，字体大小 (16px, 2em)，边框样式 (solid, dashed) 等。
声明 (Declarations): 由属性和值组成，例如:
color: red;。规则集 (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";