30分钟学会css

CSS 基本语法

CSS（Cascading Style Sheets）是一种样式表语言，用于描述 HTML（或 XML）文档的呈现。它可以控制网页元素的颜色、字体、布局等外观样式，实现内容与表现的分离，让网页设计更加灵活和高效。

在线体验一下 CSS 在线编辑器。

千万不要被「样式表」、「语言」吓到，CSS 的语法也很直观，常用的规则结构并不复杂，用于日常网页美化绰绰有余，花一点时间就能建立基本概念。

就是这些基本的规则结构，却能让人优雅地控制网页的呈现，专注于样式设计而不是混淆内容结构，达到"心中有版，落笔生花"的境界。

CSS 选择器语法

要为 HTML 元素添加样式，首先需要选中这些元素。CSS 使用选择器来定位要应用样式的 HTML 元素。

CSS 语法	作用	示例
element	选择所有指定的 HTML 元素	p { color: blue; }
.class	选择带有指定 class 属性的所有 HTML 元素	.highlight { font-weight: bold; }
#id	选择带有指定 id 属性的 HTML 元素	#header { background-color: #eee; }
*	选择文档中的所有 HTML 元素	* { margin: 0; padding: 0; }
element, element	选择所有指定的 HTML 元素 (分组选择)	h1, h2 { color: green; }
element element	选择指定元素内的所有指定后代元素	div p { font-size: 16px; }
element > element	选择指定父元素下的直接子元素	ul > li { list-style-type: none; }
element + element	选择紧接在指定元素后的同级元素	h2 + p { text-indent: 2em; }
element ~ element	选择指定元素后的所有同级元素	h2 ~ p { color: gray; }
[attribute]	选择带有指定属性的 HTML 元素	a[target] { text-decoration: none; }
[attribute=value]	选择带有指定属性和值的 HTML 元素	input[type="text"] { border: 1px solid black; }
[attribute~=value]	选择属性值包含指定词的元素	a[class~="button"] { padding: 5px; }
`[attribute	=value]`	选择属性值以指定值开头的元素
element:pseudo-class	选择指定元素的特殊状态	a:hover { color: red; }
element::pseudo-element	选择指定元素的某个部分	p::first-line { font-weight: bold; }

可选语法 (无直接对应，此处强调选择器多样性)

CSS 的选择器机制非常强大，除了上述基本类型，还有更复杂的选择器组合和伪类/伪元素可以使用，以更精确地定位元素。

最佳实践

为了代码的可读性和维护性，建议使用语义化的 class 名称，避免过度使用 ID 选择器，并合理利用选择器的优先级规则。

✅ Do this	❌ Don't do this
.product-title { ... }	#productTitle { ... } (除非必要)
.btn-primary { ... }	.button1 { ... } (语义不明确)

CSS 属性与值

选中元素后，就可以使用 CSS 属性来设置元素的样式。每个属性都有一个或多个值，用于指定属性的具体表现。

CSS 语法	HTML (无直接对应，描述作用)	预览效果 (描述性)
color: blue;	设置文本颜色为蓝色	文本显示为蓝色
font-size: 16px;	设置字体大小为 16 像素	文本显示为 16 像素大小
background-color: #f0f0f0;	设置背景颜色为浅灰色	元素背景显示为浅灰色
width: 100px;	设置元素宽度为 100 像素	元素宽度为 100 像素
height: auto;	设置元素高度为自动	元素高度根据内容自动调整
margin: 10px;	设置元素外边距为 10 像素	元素周围有 10 像素的空白
padding: 5px;	设置元素内边距为 5 像素	元素内容与边框之间有 5 像素的空白
border: 1px solid black;	设置边框为 1 像素实线黑色	元素有 1 像素的黑色实线边框
text-align: center;	设置文本居中对齐	元素内的文本居中显示
display: block;	设置元素为块级元素	元素独占一行，可以设置宽高
display: inline;	设置元素为行内元素	元素与其他行内元素共享一行，无法设置宽高
display: inline-block;	设置元素为行内块级元素	元素像行内元素一样排列，但可以设置宽高

属性（Property）用法的最佳实践

合理使用 CSS 属性，遵循语义化原则，避免过度使用行内样式，并使用简写属性来提高效率。

✅ Do this	❌ Don't do this
margin: 10px 20px; (上下 10px，左右 20px)	margin-top: 10px; margin-bottom: 10px; margin-left: 20px; margin-right: 20px;
使用外部 CSS 文件	大量使用行内样式 (<p style="...">)

CSS 常用单位

在 CSS 中，许多属性值需要指定单位。常见的单位包括像素 (px)、百分比 (%)、em、rem 等。

CSS 单位	说明	示例
px	像素，绝对单位，在不同设备上大小固定	font-size: 16px;
%	百分比，相对于父元素的尺寸	width: 50%;
em	相对单位，相对于当前元素的字体大小	padding: 2em;
rem	相对单位，相对于根元素 (html) 的字体大小	font-size: 1.2rem;
vw	视口宽度 (viewport width) 的百分比	width: 50vw;
vh	视口高度 (viewport height) 的百分比	height: 100vh;
vmin	视口宽度和高度中较小者的百分比	max-width: 80vmin;
vmax	视口宽度和高度中较大者的百分比	max-height: 90vmax;
pt	磅，绝对单位，主要用于打印	font-size: 12pt;
pc	派卡，绝对单位，1pc = 12pt	font-size: 1pc;
in	英寸，绝对单位	width: 1in;
cm	厘米，绝对单位	width: 2.54cm;
mm	毫米，绝对单位	width: 10mm;

单位（Unit）用法的最佳实践

在网页设计中，推荐使用相对单位（如 em、rem、%）来实现页面的响应式布局和更好的用户体验。rem 通常用于设置字体大小，而 % 则常用于设置宽度和高度。

✅ Do this	❌ Don't do this
font-size: 1rem;	font-size: 16px; (不利于用户调整字体)
width: 100%;	width: 960px; (可能在小屏幕上溢出)

CSS 颜色表示

CSS 提供了多种表示颜色的方式。

CSS 语法	HTML (无直接对应)	预览效果 (描述性)
color: blue;	使用预定义的颜色名称	文本显示为蓝色
color: #0000FF;	使用十六进制颜色值	文本显示为蓝色
color: #00F;	使用三位十六进制简写	文本显示为蓝色
color: rgb(0, 0, 255);	使用 RGB 函数	文本显示为蓝色
color: rgba(0, 0, 255, 0.5);	使用 RGBA 函数 (带透明度)	文本显示为半透明的蓝色
color: hsl(240, 100%, 50%);	使用 HSL 函数	文本显示为蓝色
color: hsla(240, 100%, 50%, 0.5);	使用 HSLA 函数 (带透明度)	文本显示为半透明的蓝色

颜色（Color）用法的最佳实践

根据具体需求选择合适的颜色表示方法。十六进制颜色值常用于精确的颜色定义，而 RGBA 和 HSLA 则适用于需要透明度的场景。

✅ Do this	❌ Don't do this
background-color: rgba(0, 0, 0, 0.8);	background-color: black; opacity: 0.8; (可能影响子元素)
使用有意义的颜色变量	在代码中硬编码大量的颜色值

CSS 注释

CSS 注释用于在样式表中添加说明，不会被浏览器解析。

/* 这是一行 CSS 注释 */

/*
 * 这是一个
 * 多行 CSS 注释
 */

注释（Comment）用法的最佳实践

编写清晰的 CSS 注释，解释代码的作用和意图，提高代码的可读性和可维护性。

✅ Do this	❌ Don't do this
/* 设置导航栏的样式 */	/* 样式 */ (过于简单，没有提供足够的信息)
/* 修复了在 IE 浏览器下的显示问题 */	避免在注释中包含不友好的或攻击性的言论

CSS 盒模型

CSS 盒模型描述了 HTML 元素周围生成的矩形盒子。它由内容 (content)、内边距 (padding)、边框 (border) 和外边距 (margin) 组成。

+-----------------+
|     Margin      |  外边距
+-----------------+
|    Border       |  边框
+-----------------+
|    Padding      |  内边距
+-----------------+
|    Content      |  内容
+-----------------+

盒模型（Box Model）用法的最佳实践

理解盒模型对于进行网页布局至关重要。可以通过调整 box-sizing 属性来改变盒模型的计算方式，更方便地控制元素的尺寸。

✅ Do this	❌ Don't do this
使用 box-sizing: border-box;	混淆 content-box 和 border-box 的计算方式
合理设置 margin 和 padding 来控制间距	过度依赖 margin 或 padding 来实现布局

CSS 优先级与继承

当多个 CSS 规则应用于同一个 HTML 元素时，浏览器会根据优先级规则来确定最终应用的样式。继承是指某些 CSS 属性会从父元素传递到子元素。

优先级由高到低：

1. 内联样式 (HTML 元素中的 style 属性)
2. ID 选择器 (#id)
3. 类选择器 (.class)、属性选择器 ([attribute])、伪类选择器 (:hover)
4. 元素选择器 (element)、伪元素选择器 (::before)
5. 通配符选择器 (*)
6. 浏览器默认样式

优先级与继承用法的最佳实践

理解 CSS 的优先级和继承机制，可以避免样式冲突，并编写更简洁、可维护的 CSS 代码。

✅ Do this	❌ Don't do this
合理利用选择器的优先级来覆盖样式	过度使用 !important 来提升优先级 (除非必要)
充分利用 CSS 的继承特性，减少重复代码	在每个元素上重复设置相同的样式

CSS 引入方式

CSS 可以通过三种方式引入到 HTML 文档中：

1. 内联样式： 直接在 HTML 元素的 style 属性中定义样式。

   <p style="color: red;">这段文字是红色的。</p>

2. 内部样式表： 在 HTML 文档的 <head> 标签中使用 <style> 标签定义样式。

   <head>
     <style>
       p { color: blue; }
     </style>
   </head>

3. 外部样式表： 将 CSS 样式定义在一个单独的 .css 文件中，然后在 HTML 文档的 <head> 标签中使用 <link> 标签引入。

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

引入方式（Include）用法的最佳实践

推荐使用外部样式表来组织 CSS 代码，实现内容与样式的完全分离，提高代码的可维护性和可复用性。

✅ Do this	❌ Don't do this
使用外部 CSS 文件	在多个 HTML 文件中重复编写相同的内部样式表
少量、局部的样式可以使用内联样式	大量使用内联样式，导致 HTML 代码臃肿且难以维护

掌握这些简单的规则结构，你就能优雅地控制网页的呈现，专注于样式设计而不是混淆内容结构，达到"心中有版，落笔生花"的境界。