【CSS】4-css文字，文本，列表，背景样式

最新推荐文章于 2024-08-12 22:06:26 发布

JeffHan^_^

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量127

点赞数

分类专栏： CSS教程文章标签： css 前端 html

本文链接：https://blog.csdn.net/Jeffhan_java/article/details/125993219

版权

CSS教程专栏收录该内容

12 篇文章 0 订阅

订阅专栏

4-css样式

1.css文字样式

文字特效：
    font-family: 字体类型
    font-size: 字体大小
    font-style: 字体风格 italic斜体
    font-weight: 字体粗细，border加粗
    复合写法: font: style weight size fanily

实例：

<head>
	<meta charset="utf-8">
	<title>css文字样式</title>
	<style type="text/css">
		#div1 {
			font-family: "楷体";
			font-size: 30px;
			font-style: italic;
		}
		#div2 {
			font-family: "楷体";
			font-size: 30px;
			font-weight: bolder;
		}
		#div3 {
			font: italic bolder 30px "楷体";
		}
	</style>
</head>
<body>
	<div id="div0">
		Hello HTML，你好 HTML！
	</div>
	<div id="div1">
		Hello HTML，你好 HTML！
	</div>
	<div id="div2">
		Hello HTML，你好 HTML！
	</div>
	<div id="div3">
		Hello HTML，你好 HTML！
	</div>
	
</body>

2.文本样式

文本样式：
    text-align: 文本对齐方式
    text-indent: 文本缩进
    text-decoration: 文本修饰，underline下划线 overline上划线 line-through删除线 none无效果 
    text-shadow：文本阴影 四个属性值：第一个向右偏移量 第二个向下偏移量，第三个模糊半径，第四个颜色
    line-height：文本行高
    word-spacing：单词间隙
    letter-spacing：字符间隙
    
    color： 文本颜色
    设置图片和文字居中对齐：
    vertical-align : middle 纵向排列

实例：

<head>
	<meta charset="utf-8">
	<title>css文本样式</title>
	<style type="text/css">
		#p1 {
			text-align: left;
			
			/* 首行缩进2字符 */
			text-indent: 2em; 
			
			text-decoration: underline;
			
			line-height: 30px;
			
			word-spacing: 200px;
			
			letter-spacing: 10px;
			
			color: green;
		}
		
		/* 文本在元素中左右上下居中 */
		#div1 {
			text-align: center;
			line-height: 300px;
		}
		
		/* 图片和文字居中对齐 */
		p img {
			/* 纵向排列 */
			vertical-align: middle;
		}
		
		h1 {
			text-align: center;
			/* 文本阴影 */
			text-shadow: 0px 0px 10px green;
		}
		
	</style>
</head>
<body>
	<h1>小米10发布了</h1>
	
	<p id="p1">hello xiaomi这次也是小米10的真机首次曝光在大众眼前，从小米官方的海报上可以看出，小米10的外观和之前爆料的可以说基本一致，摄像头采用了正面屏幕左上角单挖孔+后置竖向排列四摄的搭配组合，屏幕则采用了曲面屏玻璃设计，小米的LOGO标志依然印在机身背面下面，整机的质感相当不错。此前，红米负责人卢伟冰曾在微博上表示，此次小米10将会摆脱往常价格的限制，尽全力做好旗舰，树高端。而雷军今天同样表示，这次的小米10，将会是一部为梦想打造的高端旗舰手机，也是小米十年集大成之作。从这段话中，不难看出小米此次一心冲击高端旗舰的信心。</p>
	
	<a href="#" style="text-decoration: none;">这是一个超链接</a>
	
	<div id="div1" style="width: 300px;height: 300px;border:solid 1px green;">
		hello xiaomi
	</div>
	
	<p>
		我叫王子玉，这是我的照片。
		<img src="img/20190903012812_3d01f904da89301c28057023e326889f_4.gif" width="50px">
	</p>
</body>

3.列表样式

列表样式：
    1.list-style-type: 设置列表子项标识样式，比标签中的type属性多，如果设置为none，将无任何样式
    2.list-style-image：可以使用一张图片作为子项标识
    3.list-style-position：设置字标签标识的位置

实例：

<head>
		<meta charset="utf-8">
		<title>列表样式</title>
		<style type="text/css">
			#ul1 {
				list-style-type: none;
			} 
			#ul2 {
				list-style-image: url(img/箭头.png);
				list-style-position: outside;
			}
		</style>
	</head>
	<body>
		
		<ul id="ul1">
			<li>子项1</li>
			<li>子项2</li>
			<li>子项3</li>
			<li>子项4</li>
			<li>子项5</li>
			<li>子项6</li>
			<li>子项7</li>
		</ul>
		<ul id="ul2">
			<li>子项1</li>
			<li>子项2</li>
			<li>子项3</li>
			<li>子项4</li>
			<li>子项5</li>
			<li>子项6</li>
			<li>子项7</li>
		</ul>
	</body>

4.背景样式

背景样式：
    1.background-color: 背景颜色
    2.background-image: 背景图片
    3.background-position: 背景图片的位置
    4.background-repeat:背景图片是否重复，no-repeat不重复，repeat-x仅x轴重复，repeat-y仅y轴重复，repeat重复（默认值）
    5.background-size：背景图片的大小
    6.background-attachment：背景图片是否随页面滚动，fixed固定背景图片不随页面滚动，scroll背景图片随页面滚动（默认值）
    7.元素透明度：
    opacity:0.5;
    8.填充颜色透明度
    rab(0,0,0,0.5)；最后一个数值是背景透明度

实例：

<head>
	<meta charset="utf-8">
	<title>css背景样式</title>
	<style type="text/css">
		#h1-1 {
			color: white;
			
			background-color: green;
			background-image: url(img/箭头.png);
			
			background-repeat: no-repeat;
			background-position: 300px 7px;
			background-size: 30px 30px;
		}
		#span-1 {
			background-color: red;
		}
		
		#div1 {
			width: 600px;
			height: 2000px;
			border: solid 1px black;
			
			background-image: url(img/spider.jpg);
			background-attachment: scroll;
		}
	</style>
</head>
<body>
	
	<h1 id="h1-1" align="center">
		hello world
	</h1>
	<span id="span-1">你好世界</span>
	
	<div id="div1">
		
	</div>
	
</body>