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

CSS（展示效果）

news 2025/9/10 6:04:38

1.基本语法规范

2.引入方式

1.内部样式表

2.行内样式表

3.外部样式表

3.选择器

选择器的功能

选择器的种类

1. 基础选择器: 单个选择器构成的

标签选择器

类选择器

id 选择器

通配符选择器

在实际开发应用中用来针对页面中所有的元素默认样式进行消除，主要用来消除边距

基础选择器小结

2. 复合选择器: 把多种基础选择器综合运用起来.

后代选择器

子选择器

并集选择器

伪类选择器

复合选择器小结

4.常用元素属性(更多搜索)

字体属性

字体颜色

字体粗细样式

文本（对齐进行装饰行高）

控制文字水平方向的对齐

案例

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.r{text-align: right;}h1{text-align: center;font-weight: 700;}.z{text-align: left;text-indent: 2em;}#j{text-align: center;}</style>
</head>
<body><h1>卫星</h1><div><p class="r">2010年12月3日</p><hr><p class="z">试验二十九号卫星肩负着特殊使命，其核心任务是开展空间环境探测及相关技术验证工作。通过在轨运行，该卫星将收集关键的空间环境数据，为后续航天器的设计与运行提供重要参考，同时对相关技术进行实战检验，推动航天技术的持续进步。</p><p class="z">此次发射任务意义非凡，它是长征系列运载火箭的第592次飞行。自长征系列火箭诞生以来，凭借其可靠的性能和卓越的发射能力，一次次将各类航天器送入太空，为中国航天事业的发展立下了汗马功劳。每一次成功发射，都凝聚着无数航天人的智慧与汗水，也彰显了中国在航天领域的强大实力。</p><div id="j"><img src="./yangguang.png"></div><p class="r">卫星</p></div>
</body>

背景属性

颜色

图片

平铺

位置

圆角矩形

元素显示模式

块级元素

行内元素

让行内元素单独占一行

行内元素和块级元素的区别

5.盒模型

边框(border)

内边距（padding）

外边距(margin)

块级元素水平居中

去除浏览器默认样式

边框会撑大盒子

6.弹性布局

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{border:#d8dad8 solid 2px;width: 308px;height: 204px;}.gg{padding-left: 40px;border-bottom: 2px dotted #e8ebe8;}.ym{font-size: 16px;flood-color: #898b76;padding-left: 25px;line-height: 28px;padding-top: 10px;}</style>
</head>
<body><div class="box"><div class="gg">广告板</div><div class="ym">大清场 ，全场八折1</div><div class="ym">大清场 ，全场八折2</div><div class="ym">大清场 ，全场八折3</div></div>
</body>
</html>