当前位置：首页 > news >正文

前端三大件之CSS

news 2025/6/30 13:11:04

引言

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页文档外观和格式的样式表语言。它主要用于控制网页的布局、颜色、字体、间距等视觉效果，使开发者能够将内容与设计分离。

一，CSS的基本概念

选择器（Selector）：
- 用于指定要应用样式的HTML元素。
- 常见选择器包括类选择器（如.classname）、ID选择器（如#idname）和类型选择器（如div, p）。
属性（Property）和值（Value）：
- 选择器应用样式时，使用属性和值的配对来定义样式，例如：
```
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代码

<!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: 字体大小

<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不能使用数字开头

<!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: 字体粗细。

<!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>

效果如下：

<!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>

效果图如下：