引言
CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页文档外观和格式的样式表语言。它主要用于控制网页的布局、颜色、字体、间距等视觉效果，使开发者能够将内容与设计分离。
一，CSS的基本概念
-
选择器（Selector）：
- 用于指定要应用样式的HTML元素。
- 常见选择器包括类选择器（如
.classname）、ID选择器（如#idname）和类型选择器（如div,p）。
-
属性（Property）和值（Value）：
- 选择器应用样式时，使用属性和值的配对来定义样式，例如：
css">h1 { color: blue; font-size: 30px; }
- 选择器应用样式时，使用属性和值的配对来定义样式，例如：
-
层叠机制（Cascading）：
- CSS的“层叠”特性允许多个样式规则应用于同一元素，依据特定优先级确定最终样式。优先级通常取决于选择器的权重、来源（内联样式、外部样式表等）和顺序。
-
盒子模型（Box Model）：
- 每个HTML元素在CSS中都被视为一个盒子，这个盒子由外边距（margin）、边框（border）、内边距（padding）和内容（content）组成。
-
响应式设计：
- CSS可以通过媒体查询（media queries）来创建响应式网页，使内容在不同设备和屏幕尺寸下都能良好显示。
CSS的常用特性
- 布局：使用 Flexbox 和 Grid 布局模型来创建灵活的页面布局。
- 动画和过渡：可以通过 CSS 动画和过渡效果，为网页元素添加动态效果。
- 变量：CSS 变量可以让开发者更方便地管理主题色或其他常用值。
使用CSS的好处
- 增强可维护性：样式与内容的分离使得后期维护和修改变得更加简单。
- 提高加载速度：通过外部样式表，可以缓存 CSS，提高网页的加载效率。
- 适应多设备：可以轻松创建响应式设计，改善用户体验。
接下来我们直观感受一段CSS代码
css"><!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS入门</title><style>img{width: 40px;height: 50px;}</style></head><body><img src="./img/heiwukun.jpg" /><img src="./img/tmall-01.jpg" /></body></html>在<style>中，给img标签规定了宽度和高度后，<body>中的<img>标签都会自动按照规定的宽度和高度放置。
二，三大选择器
选择标签使用指定的css效果
标签选择器
根据标签名称选择css操作。
font-size: 字体大小
css"><html>
<head><meta charset="utf-8"><title>css-标签选择器</title><style>span{font-size: 32px;}</style>
</head>
<body><p><span>今天</span>是个好<span>天气</span></p>
</body>
</html>id选择器
标签内加入一个唯一id属性
tips： id不能使用数字开头
css"><!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css-id选择器</title><style>#shangId{font-size: 32px;font-family: 华文楷体;}#shuId{font-size: 32px;font-family: 华文彩云;}</style></head><body><p>《〈尚书〉学文献集成·朝鲜卷》共35册，入选2019年度国家出版基金资助项目，是由扬州大学钱宗武教授及其团队整理的一套关于朝鲜学者用汉文撰写<span id="shangId">《尚书》</span>学文献的集成性著述。程兴丽老师独立整理第12册<span id="shuId">《书经讲义》</span>。《书经讲义》乃朝鲜第二十二代国王正祖所著，正祖在位时期极力推进科举制度的改革，以达到毓养人才的目的，所以正祖躬临课试，形式主要是正祖问难、文臣答解，而《书经讲义》所收录的就是正祖关涉《尚书》的提问及文臣的答辩。《书经讲义》较好地折射了正祖时期朝鲜官方学术关于《尚书》学研究的主要内容及显著特点，对于我们了解朝鲜《尚书》学乃至经学研究的概貌具有重要的价值和意义。</p></body>
</html>span ： 行内插入数据
如果要对行内的内容修饰，不妨用span标签并使用ID选择器。
class(类)选择器
定义好css内容，由内容自行选择。 ----框架
font-weight: 字体粗细。
css"><!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css-class选择器</title><style>.my-font{font-size: 38px;}.my-font-famliy{font-family: 华文彩云;font-weight: bold;}</style> </head><body><p>君不见<span class="my-font my-font-famliy">黄河</span>之水天上来，奔流到海不复回。</p></body>
</html>效果如下：
css"><!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css-class选择器</title><style>.my-font{font-size: 38px;}.my-font-famliy{font-family: 华文彩云;font-weight: bold;}</style></head><body><p>君不见<span class="my-font">黄河</span>之水天上来，奔流到<span class="my-font-famliy">海</span>不复回。</p></body>
</html>效果图如下：
在<style>中创建类名，然后在<body>中的标签引用。
三，CSS中常用的样式属性
1. 背景属性
background：设置背景的简写属性，可以同时设置颜色、图像、位置、大小等。background-color：设置背景颜色。background-image：设置背景图像。background-position：设置背景图像的位置。background-size：控制背景图像的大小。background-repeat：设置背景图像是否重复。
2. 排版属性
color：设置文本颜色。font-family：定义字体。font-size：设置字体大小。font-weight：设置字体粗细。line-height：设置行间距。text-align：设置文本对齐方式（左、中、右）。
3. 盒模型属性
width：设置元素的宽度。height：设置元素的高度。margin：设置元素外部的空白。padding：设置元素内部的空白。border：设置元素的边框样式、宽度和颜色。
4. 布局属性
display：定义元素的显示方式（如block、inline、flex、grid）。position：设置元素的定位类型（static、relative、absolute、fixed）。top、right、bottom、left：对于绝对或固定定位元素，设置相对位置。flex、grid：用于现代布局方法，可以创建响应式设计。
5. 边框属性
border-color：设置边框颜色。border-style：定义边框的样式（如solid、dashed、dotted）。border-width：设置边框宽度。
6. 文本属性
text-decoration：设置文本装饰（如下划线、删除线）。text-transform：设置文本的转换方式（如大写、小写）。letter-spacing：设置字母间距。word-spacing：设置单词间距。
7. 过渡和动画
transition：控制属性变化的过渡效果。animation：定义动画效果。
8. 阴影和光晕
box-shadow：设置元素的阴影效果。text-shadow：设置文本的阴影效果。
9. 透明和叠加
opacity：设置元素的透明度。z-index：设置元素的堆叠顺序。
这些属性可以组合使用，创建复杂的布局和样式。
