HTML开发 - CSS 风格基本语法解析
什么是 CSS
- CSS（层叠样式表，Cascading Style Sheets）用于控制网页的外观和布局。通过 CSS，可以控制 HTML 元素的样式，如颜色、字体、布局、间距等
CSS 基本语法
-
CSS 的基本语法包括选择器、属性和属性值。它的基本结构如下：
~~~css selector { property: value; } ~~~
1. 选择器（Selector）
什么是选择器
- 选择器用于指定哪些 HTML 元素需要应用样式。它可以是标签、类、ID 或其他更复杂的选择器
元素选择器
-
直接选择 HTML 元素，如
div、h1、p等；下面这段 CSS 会将所有<p>元素的文本颜色设置为蓝色p { color: blue; }
类选择器
-
通过类名选择元素。类选择器前面有一个点 (
.)，如.class-name；下面这段 CSS 会应用到所有 class 为button的元素.button { background-color: #007bff; color: white; }
ID 选择器
-
通过 ID 选择元素。ID 选择器前面有一个井号 (
#)，如#element-id；下面这段 CSS 会应用到 ID 为header的元素。ID 在页面中应该是唯一的#header { font-size: 20px; }
通用选择器
-
*表示选中所有元素；下面这段 CSS 会应用到页面上的所有元素，清除它们的默认外边距和内边距* { margin: 0; padding: 0; }
后代选择器
-
选择某个元素(父元素)的后代元素(子元素)；下面这段 CSS 会将所有
<div>元素中的<p>元素的文本颜色设置为红色div p { color: red; }
组合选择器
-
组合多个选择器，用逗号分隔；下面这段 CSS 会将所有
<h1>、<h2>和<h3>元素的字体加粗h1, h2, h3 { font-weight: bold; }
2. 属性（Property）
什么是属性
- 属性用于定义元素的样式特征。CSS 中有许多常见的属性
颜色相关的属性
-
color：文本的颜色 -
background-color：背景颜色 -
border-color：边框颜色
字体相关的属性
font-size：字体大小font-family：字体类型font-weight：字体粗细
布局相关的属性
-
width：元素的宽度 -
height：元素的高度 -
padding：元素的内边距 -
margin：元素的外边距 -
display：元素的显示类型（如block,inline） -
position：元素的定位方式（如static,absolute,relative,fixed） -
top,right,bottom,left：设置定位元素的具体位置
其他常用属性
-
border：设置元素的边框 -
text-align：设置文本的对齐方式 -
overflow：设置溢出内容的处理方式（如hidden,scroll） -
box-shadow：添加阴影效果
3. 属性值（Value）
什么是属性值
- 属性值指定特定的样式值，可以是固定的数值、颜色、百分比等
颜色值
-
可以使用颜色名称、十六进制颜色、RGB 或 RGBA 等格式
color: red; /* 颜色名称 */ background-color: #ff5733; /* 十六进制颜色 */ color: rgb(255, 0, 0); /* RGB 颜色 */ color: rgba(255, 0, 0, 0.5); /* RGBA 颜色 */
长度单位
-
CSS 使用多种长度单位，包括
px（像素）、em、rem、%、vw（视窗宽度）、vh（视窗高度）等width: 100px; margin: 2em; font-size: 1.5rem;
时间单位
-
常用于动画、过渡等，单位为
s（秒）或ms（毫秒）transition: all 0.3s ease;
百分比
-
常用于宽度、高度、位置等，百分比是相对于父元素的尺寸
width: 50%; /* 父元素宽度的 50% */
4. CSS 规则的多重声明
-
可以在一个选择器中声明多个属性，每个属性和值之间用分号 (
;) 分隔。例如：h1 { color: blue; font-size: 20px; text-align: center; margin-top: 20px; }
5. 层叠性（Cascading）
-
CSS 中的“层叠”是指多个样式规则可能同时影响一个元素。CSS 会根据特定的优先级规则决定应用哪个样式。优先级从低到高的顺序是：
-
浏览器默认样式
-
用户样式（由用户设置）
-
外部样式表
-
内部样式表
-
内联样式（
style属性）
-
-
如果有多个样式规则对同一个元素应用，浏览器会根据优先级和来源选择应用的样式。内联样式具有最高优先级，通常会覆盖其他样式
6. 注释（Comment）
-
CSS 中的注释用
/* 注释内容 */包裹，可以用于解释代码、调试或注释掉某些部分的样式/* 这是一个注释 */ h1 { color: blue; /* 设置文本颜色为蓝色 */ }
简单示例
-
下面这段 CSS 设置了网页的背景色，所有标题为蓝色，段落的字体大小为 16px，
button类的元素有一个蓝色背景和白色字体/* 设置网页背景色 */ body { background-color: #f4f4f4; } /* 设置所有标题为蓝色 */ h1, h2, h3 { color: blue; } /* 设置所有段落的字体 */ p { font-size: 16px; line-height: 1.6; color: #333; } /* 设置 class 为 .button 的元素 */ .button { background-color: #007bff; color: white; padding: 10px 20px; border-radius: 5px; text-align: center; cursor: pointer; }
总结
-
选择器：用于指定哪些元素应用样式
-
属性和值：描述元素的外观，如颜色、大小、布局等
-
层叠性：多个样式的优先级规则决定哪个样式被应用
-
注释：帮助解释代码，但不会影响代码执行
-
掌握 CSS 的基本语法后，可以进一步学习高级特性如 响应式设计、CSS 动画、Flexbox、Grid 布局 等，以便更加灵活地设计页面
