04 CSS样式案例

最新推荐文章于 2024-04-12 02:57:04 发布

小鱼儿爱喝酒

最新推荐文章于 2024-04-12 02:57:04 发布

阅读量224

点赞数

分类专栏： WEB前端学习文章标签： html

本文链接：https://blog.csdn.net/dskfksdf/article/details/117388632

版权

WEB前端学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的选择器类型，包括标签选择器、类选择器、ID选择器和通配符选择器，并展示了如何使用它们来设置字体样式、文本颜色、装饰、对齐和缩进。此外，还探讨了内部样式表、行内样式表和外部样式表的优缺点及适用场景，最后通过一个案例展示了CSS在网页布局和文本修饰中的应用。

摘要由CSDN通过智能技术生成

1 选择器

1.1 标签选择器

p {color:red; font-size: 25px;}

1.2 类选择器

/* 类选择器 */
.red {color: red; width: 50px; height: 50px; background-color: red;}
.blue {color: blue; width: 50px; height: 50px; background-color: blue;}

对应：body

<div id="" class="red">红色</div>

<div id="" class="blue">绿色</div>

1.3 id选择器

/* id选择器,只能调用一次*/
#pink {color: pink;}

对应：body

<div id="pink">易小川</div>

1.4 通配符选择器

/* 设置所有标签*/

* {color: #FF0000;}

2 字体样式

属性	表示	注意点
font-size	字号	通常用的单位px像素，一定要带单位
font-family	字体	实际工作中按照团队的约束写字体
font-weight	字体粗细	加粗为700或者bold，不加粗normal或400
font-style	字体样式	斜体为italic，不倾斜是normal
font	字体连写	不能颠倒顺序，不能随意删除，字体和字号必须同时出现

2.1 样式代码展示

		<style type="text/css">
			/* 字体使用font-family进行设置 */
			body {font-family: "microsoft yahei", arial;}
			/* 字体大小用font-size进行设置 */
			p {font-size: 12px;}
			/* 设置样本粗细，一般使用数字，700表示加粗（bold），400表示正常（normal）*/
			.bold {font-weight: bold;}
			.normal {font-weight: 400;}
			/* 文本风格使用font-style进行设置 */
			.nor {font-style:normal;}  /* 将斜体的字体变得正常normal，italic变倾斜 */
			/* 复合样式 */
			.san {
				/* font-style: italic;
				font-weight: 700;
				font-size: 25px;
				font-family: "microsoft yahei"; */
				/* 也可以使用复合样式: font: font-style font-weight font-size font-family;不可颠倒顺序，且至少要有font-size和font-family */
				font:italic 700 25px "microsoft yahei";
			}
		</style>
	</head>
	<body>
		<h2 class="normal">你好</h2>
		<p>刘德华和刘芙蓉</p>
		<p>张学友和洪七公</p>
		<p class="bold">郭富城和步惊云</p>
		<p>黎明和聂风</p>
		<!-- em表示倾斜 -->
		<em class="nor">张三丰</em>
		<div id="" class="san">三生三世，十里桃花</div>
	</body>

2.2 文本属性

2.1 颜色 color

表示	属性值
预定义的颜色值	red、green、blue，还有我们的御用色pink
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb（255,0,0）或rgb（100%，0%，0%）

2.2 文本装饰 text-decoration

属性值	描述
none	默认，没有装饰线（最常用）
underline	下划线，链接a自带下划线（常用） none表示取消下划线
overline	上划线（几乎不用）
line-through	删除线（不常用）

2.3 文本修饰 text-align

/* 水平居中center，左对齐left，右对齐right */
h2 {text-align: center;}
/* 装饰文本text-decoration属性规定添加到文本修饰,可以添加下划线,删除线,上划线 */

2.4 文本缩进 text-indent

/* 首行缩进 */
           /* p {text-indent: 100px;} */
           /* 首行缩进2字符 */
           p {text-indent: 2em;}

2.5 行间距 line-height

注：line-height = 上间距+下间距+文本高度

2.6 代码示例

<style type="text/css">
			div {color: blue;}
			/* 水平居中center，左对齐left，右对齐right */
			h2 {text-align: center;}
			/* 装饰文本text-decoration属性规定添加到文本修饰,可以添加下划线,删除线,上划线 */
			.pink {text-decoration: line-through;}
			/* 首行缩进 */
			/* p {text-indent: 100px;} */
			/* 首行缩进2字符 */
			p {text-indent: 2em;}
		</style>
	</head>
	<body>
		<div id="">你好</div>
		<h2>李寻欢</h2>
		<div class="pink">粉红色的回忆</div>
		<p>落霞与孤鹜齐飞，秋水共长天一色</p>
	</body>

2 样式表

2.1 内部样式表

<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>
			CSS文本样式
		</title>
		<style type="text/css">
			div {color: blue;}
			/* 水平居中center，左对齐left，右对齐right */
			h2 {text-align: center;}
			/* 装饰文本text-decoration属性规定添加到文本修饰,可以添加下划线,删除线,上划线 */
			.pink {text-decoration: line-through;}
			/* 首行缩进 */
			/* p {text-indent: 100px;} */
			/* 首行缩进2字符 */
			p {text-indent: 2em;}
		</style>
	</head>

2.2 行内样式表

<h3 style="color:red; text-align: center;">神雕侠侣</h3>

2.3 外部样式表

html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>外部样式表</title>
	    <link rel="stylesheet" type="text/css" href="./new_file.css"/>
	</head>
	<body>
		<p>你好，北京欢迎你</p>
	</body>
</html>

css部分

p {color:red; text-align: center;}

2.4 CSS样式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式分离	需要引入	最多，推荐	控制多个页面

3 样式案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>案例展示</title>
		<style type="text/css">
			body {font:16px/28px 'Microsoft Yahei';}
			h2 {font-weight: 400; text-align: center;}
			.gray {color:darkgray; font-size: 12px; text-align: center;}
			a {text-decoration: none;}
			.search {color:darkgrey;width: 170px;}
			.btn {font-weight: 700;}
			p {text-indent: 2em;}
			.img {text-align: center;}
			.bot {color: #A9A9A9;
			font-size: 15px;}
		</style>
	    
	</head>
	<body>
		<h2>让人倒吸一口凉气 这个邻国遇到大麻烦了！</h2>
		<div id="" class="gray">2021年5月31日 来源：<a href="#">中国天气网</a> <input type="" name="" id="" value="请输入查询条件：" / class="search"> <button type="button" class="btn">提交</button>
		</div>
		<hr>   <!-- 水平线标签 -->
		<h3>这个邻国，遇到大麻烦了！</h3>
		<p>不是印度，也不是日本，而是越南。因为与日本不同，更与印度的惨状大大不同，越南一直是全球抗疫优等生中的优等生。和中国一样，越南手段很到位，病例一直不多。因此，2020年，越南GDP仍增长了2.9%。别小看了这2.9%，比中国还高，环顾整个东南亚，越南也是唯一经济正增长的国家。</p>
		<h3>GDP情况</h3>
		<p class="img"><img src="../image/boke/BD.png" ></p>
		<p>抗疫也是生产力。哪个国家控制得好，全球订单就往哪个国家涌。今年前四个月，越南出口同比增长28.3%，创十年来新高。今年第一季度，越南GDP增长4.48%，按照IMF预测，2021年越南GDP增长可达6.5%，明年7.2%。越南，从某种程度上说，正在重复中国的奇迹，近1亿人口的体量，确实让世界刮目相看。</p>
		<h3>自今年4月底以来，疫情正在越南肆虐。</h3>
		<p class="img"><img src="../image/boke/BD1.png" ></p>
		<p>首都河内、南部胡志明市、中部岘港市，越南主要城市都出现了大量本土病例。在北部北江省，一家规模为4800人的公司里，据称就发现约五分之一工人确诊。据新华社援引越通社报道，截至当地时间29日12时，越南累计确诊新冠本土病例5213例，其中自4月27日以来新增确诊新冠本土病例3643例。看曲线，最近一个多月，几乎是直线上升。</p>
		<p class="bot">责任编辑：祝XX</p>　　
	</body>
</html>

4 展示效果

小鱼儿爱喝酒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
04 CSS样式案例

1 选择器1.1 标签选择器p {color:red; font-size: 25px;}1.2 类选择器/* 类选择器 */.red {color: red; width: 50px; height: 50px; background-color: red;}.blue {color: blue; width: 50px; height: 50px; background-color: blue;}对应：body<div id="" class="red">..
复制链接

扫一扫