文本,背景,列表,伪类,透明

最新推荐文章于 2024-09-13 23:28:46 发布

今晚吃火锅呀

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量145

点赞数 1

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/m0_51683428/article/details/109410103

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文本,背景,列表,伪类,透明

文本

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				color: #0000FF;
				font-size: 30px;
				font-family: 楷书;	
				text-align: left;
				/* text-decoration: line-through; */
				/* text-decoration: underline; */
				/* text-decoration: none; */
				/* font-style: italic; */
				/* font-weight: 900; */
				/* line-height: 8; */
				/* letter-spacing: 50px; */
				text-indent: 2em;	
			}
			/* 
			 color：字体颜色
			 font-size：字体大小
			 font-family：字体
			 text-align：文本对齐
			 text-decoration:line-through：定义穿过文本下的一条线
			 text-decoration:underline：定义文本下的一条线
			 text-decoration:none：定义标准的文本
			 font-style: italic;斜体文本
			 font-weight:字体粗细
			 line-height:设置行高
			 letter-spacing可以指定字符间距
			 text-indent用来设置首行缩进

			 */
		</style>
	</head>
	<body> 
	<p>
		春眠不觉晓,处处闻啼鸟.夜来风雨声,花落知多少.
		春眠不觉晓,处处闻啼鸟.夜来风雨声,花落知多少.
		春眠不觉晓,处处闻啼鸟.夜来风雨声,花落知多少.
		春眠不觉晓,处处闻啼鸟.夜来风雨声,花落知多少.
	</p>
	</body>
</html>

背景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width: 3000px;
				height: 2000px;
				background-color: aqua;
				background-image: url(img/12115987_1340604105848.jpg);
				background-repeat: no-repeat;
				background-size: 2500px 1500px;
				background-position: center;
			}
			/* 
			 background-color背景颜色
			 background-image背景图片
			 background-repeat背景重复
			 background-size背景尺寸
			 background- position 背景位置

			 */
		</style>
	</head>
	<body>
		<p></p>
	</body>
</html>

css列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				
				text-align: center;
				/* list-style: url(img/nike.gif); */
				list-style-position: inside;
				list-style-type: circle;
			}
			/* 
			 list-style-image     将图象设置为列表项标志。
			 list-style-position  设置列表中列表项标志的位置。
			 list-style-type      设置列表项标志的类型。

			 */
		</style>
	</head>
	<body>
		          <!-- list-style: 简写属性 ; -->
		<ul class="p1" list-style: url(img/nike.gif);>
			<li>列表项</li>   
			<li>列表项</li>
			<li>列表项</li>
		</ul>
		<ul>
			<li>列表项</li>
			<li>列表项</li>
			<li>列表项</li>
		</ul>
	</body>
</html>

css伪类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a:link{
				color: aqua;
			}
			a:visited{
				color: cadetblue;
			}
			a:hover{
				color: #FF0000;
			}
			a:active{
				color: #0000FF;
			}
			.p1:hover{
				background-color: black;
			}
			.p1:active{
				background-color: #FF0000;
			}
			.p2:hover{
				font-size: 30px;
				background-color: #000000;
			}
			.p2:active{
                background-color:#FF0000;
			}
			.p2:focus{
				background-color:#0000FF;
			}
			/* 
			伪类的语法:
			  :link表示普通的链接（没访问过的链接） 
			  :visited表示访问过的链接
			        浏览器是通过历史记录来判断一个链接是否访问过
			 		使用 visited伪类只能设置字体的颜色  
			  :hover伪类表示鼠标移入的状态 
			  :active表示的是被点击的状态
			注意：①visited放在 hover之前
			      ②active必须被置于 hover之后,才是有效的
			      ③hover和 active也可以为其他标签设置
			      ④focus向键盘输入焦点的标签添加样式
			 */
			
		</style>
		
	</head>
	<body>
		<a href="http://www.baidu.com" >百度</a>
		<a href="http://www.qq.com" >腾讯</a>
		<input type="button" value="按钮"  class="p1" />
		<input type="text" class="p2" />
	</body>
</html>

透明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background-color: #7FFF00;
               /* opacity 属性设置标签的不透明级别 值为1。
				规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明)*/
		        opacity: 0.1;
				font-size: 200px;
			}
		</style>
	</head>
	<body>
		今晚吃火锅
	</body>
</html>