文字、图片、背景、列表样式、列表项图片符号

byte~

于 2021-12-02 18:01:21 发布

阅读量350

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_45929209/article/details/121681224

版权

文字

字体（font-family）

字体的大小（font-size）

samll，medium，large，…
20px
0.8em(字体的比例)
0.6in（一般不太使用，主要用于印刷时用）
%
原则：固定布局，用px；不固定布局，用%或者em

字体颜色（color）

颜色名：red，green，black，…
#XXXXXX
rgb(DDD,DDD,DDD)
rgb(DD%,DD%,DD%)

字体粗细（font-weight）

normal（400），bold（700），bolder（900），lighter，…
100~900（越大，越粗）

字体倾斜（font-style）

normal，italic，oblique，…

字体的修饰

none，underline(下划线)，overline(顶划线)，line-through(删除线)，…
可以同时设置几个decoration

字体的对齐方式（text-align）

left，right，center

字体字间距（letter-spacing）、词间距（word-spacing）、行间距（line-height）

em，% ，px

图片

图片边框（border-style）

solid，dotted，dashed，…
border-color
border-width
可以为每条边设定

图片大小

width，hejght
一般来说只设定宽度或者高度
同时设定，如果长宽比不一致，会被拉伸

图片的对齐方式

横向对齐（text-align）
left，right，center
纵向对齐方式（vertical-align）
baseline，sub，super，top，middle，bottom
提示：可以使用该方法，使文字和图片进行对齐

文字环绕图片

使用浮动

背景

背景颜色（background-color）

body，div

背景图片

background-image
url()
background-repeat（图像是否反复出现）
repeat-x，repeat-y，no-repeat

列表样式（list-style-type）

decimal，square，disc

列表项图片符号（list-style-image）

url()

代码如下（示例）：以下代码都是对上面所提到的进行了测试，内容有点多，但是都不是很难

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				font-size: 30px;
				/*background-color: #0F0;*/
				/*background-image: url(images/1.png);
				background-repeat: repeat;*/
			}
			
			p {
				font-family: "微软雅黑", "book antiqua", arial, sans-serif, serif;
				/*font-size: 1.2em;相当于36px*/
				font-size: 120%;
				color: #FF7000;
				font-weight: bold;
				/*font-style: italic;*/
				/*text-decoration: line-through underline;*/
				/*text-align: center;*/
				/*line-height: 2em;*/
				text-indent: 2em;
				/*text-align: center;*/
			}
			
			a {
				text-decoration: none;/*去除链接的下划线*/
			}
			
			img {
				/*border-style: dotted;
				border-width: 2px;
				border-color: red green;*/
				border: dotted 2px red;
				
				/*width: 10000px;
				height: 100px;*/
				width: 30%;
				float: left;
			}
			li {
				/*list-style-type: disc;*/
				list-style-image: url(images/2.png);
			}
			
			.ellipsis {
				width: 300px;
				font-size: 20px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<p>1234 ABCD 万门大学数据的付款啦就是打飞机啊士大夫看见ask的啊觉得分厘卡圣诞节疯狂lads jfk拉萨的积分啊来看大家分厘卡机的是付款啦就是对方阿三地方了就拉开士大夫金龙卡士大夫坷拉三季稻分厘卡三季稻<!--<img src="images/1.png" />-->分厘卡即使的发生了咯觉得是付款啦时间的付款啦就是的饭卡就是的分厘卡似的发链接啊顺利打开</p>
		<a href="#">AAAAA</a>
		<ul>
			<li>111</li>
			<li>222</li>
			<li>333</li>
		</ul>
		<!--<p>
			baseline <img style="vertical-align: baseline;" src="images/1.png" />
		</p>
		<p>
			sub <img style="vertical-align: sub;" src="images/1.png" />
		</p>
		<p>
			super <img style="vertical-align: super;" src="images/1.png" />
		</p>
		<p>
			top <img style="vertical-align: top;" src="images/1.png" />
		</p>
		<p>
			middle <img style="vertical-align: middle;" src="images/1.png" />
		</p>
		<p>
			bottom <img style="vertical-align: bottom;" src="images/1.png" />
		</p>-->
		
		<p class="ellipsis">发生看到房价阿喀琉斯的飞机啊四道口附近啊士大夫看见啊四道口附近</p>
	</body>
</html>

CSS3新加属性

byte~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
文字、图片、背景、列表样式、列表项图片符号

文字字体（font-family）字体的大小（font-size）samll，medium，large，…20px0.8em(字体的比例)0.6in（一般不太使用，主要用于印刷时用）%原则：固定布局，用px；不固定布局，用%或者em字体颜色（color）颜色名：red，green，black，…#XXXXXXrgb(DDD,DDD,DDD)rgb(DD%,DD%,DD%)字体粗细（font-weight）normal（400），bold（700），bolder（900
复制链接

扫一扫