CSS样式-层叠样式表

最新推荐文章于 2024-10-04 06:11:34 发布

逝水年华哎

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量103

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/qq_44572030/article/details/116720797

版权

style属性

<!-- 设置样式 -->
	<!-- style="属性名1:属性值1;属性名2:属性值2;" -->
	<div style="background-color: red;width: 100px;height: 100px;">hello world</div>

<!-- 最常用的标签 无意义 一般用来划分区域或者布局-->
	 <div style="width: 200px;height: 150px;background-color: yellow;font-size: 30px;color: pink">12345</div>
	 <!-- 段落 放置文字 -->
	 <p style="font-size: 25px; color: blue;">大郎，该吃药了</p>

	 <!-- 无序列表 -->
	 <ul>
	 	<!-- li 列表的项 -->
	 	<li>11</li>
	 	<li>22</li>
	 	<li>33</li>
	 	<li>44</li>
	 </ul>

	 <!-- 有序列表 -->
	  <ol>
	 	<li>C语言</li>
	 	<li>数据结构</li>
	 	<li>JAVA</li>
	 	<li>操作系统</li>
	 </ol>

	 <!-- h1到h6标题  h1标签只能有一个 h1最大 逐渐变小-->
	 <h1>hello</h1>
	 <h2>hello</h2>
	 <h3>hello</h3>

背景颜色：backround-color
字体大小：font-size
字体颜色：color
字体粗细：font-weight

外边距margin

margin-top上边距
margin-bottom下边距
margin-left左边距
margin-right右边距

内边距padding:同Margin用法一样

padding-top
padding-bottom
padding-left
padding-right

text-decoration:none;去掉文本下划线
text-decoration:blink;闪烁的文本
text-decoration:overline;文本上的一条线
text-decoration:underline;文本下的一条线
text-decoration:line-through;穿越文本的一条线

练习例子

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>豆瓣</title>
</head>
<body>
	<div style="width: 900px;">
		<!-- 导航栏 -->
		<div style="height: 100px;">
			<h2 style="display: inline-block;">豆瓣书店</h2>
			<span style="color: rgb(62,125,171);margin-left: 12px;">查看全部》</span>
			<hr>
		</div>

		<!-- 一本书 -->
		<div style="height: 250px;">
			<img src="img/7669.jpg" style="width:100px ;height:150px;float: left; ">
			<!-- <p style="display: inline-block;font-size: 25px;vertical-align: top;">慎余堂（签名本）</p> -->
			<h2 style="display: inline-block;">慎余堂（签名本）</h2>
			<p style="display: inline-block;color: rgb(229,104,79);">￥58.00 / 包邮</p>
			<p style="color: rgb(163,163,163);">李静睿首部长篇历史小说，签名本限量发售</p>
		</div>
		<!-- 一行图书 -->
		<div style="height: 150px">
			<div style="display: inline-block;">
				<img src="img/7631.jpg" style="height: 200px;width: 150px;margin-left: 10px;">
				<!-- <p style="color: rgb(62,125,171);">贝聿铭全集</p> -->
				<center style="color: rgb(62,125,171);">贝聿铭全集</center>
				<!-- <p>￥178.00</p> -->
				<center>￥178.00</center>
			</div>
			<div style="display: inline-block;">
				<img src="img/7592.jpg" style="height: 200px;width: 150px;margin-left: 10px;">
				<!-- <p style="color: rgb(62,125,171);">我在京都居酒屋</p> -->
				<center style="color: rgb(62,125,171);">我在京都居酒屋</center>
				<!-- <p>￥45.00</p> -->
				<center>￥45.00</center>
			</div>
			<div style="display: inline-block;">
				<img src="img/7566.jpg" style="height: 200px;width: 150px;margin-left: 10px;"> 
				<!-- <p style="color: rgb(62,125,171);">张枣诗文集</p> -->
				<center style="color: rgb(62,125,171);">张枣诗文集</center>
				<!-- <p>￥163.50</p> -->
				<center>￥163.50</center>
			</div>
			<div style="display: inline-block;">
				<img src="img/7400.jpg" style="height: 200px;width: 150px;margin-left: 10px;">
				<!-- <p style="color: rgb(62,125,171);">约翰·伯格四部绘本合辑</p> -->
				<center style="color: rgb(62,125,171);">约翰·伯格四部绘本合辑</center>
				<!-- <p>￥135.00</p> -->
				<center>￥135.00</center>
			</div>
			<div style="display: inline-block;">
				<img src="img/7113.jpg" style="height: 200px;width: 100px;margin-left: 10px;">
				<center style="color: rgb(62,125,171);">植物先生</center>
				<!-- <p>￥128.00</p> -->
				<center>￥128.00</center>

			</div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述