HTML&CSS--样式

最新推荐文章于 2023-10-25 18:01:32 发布

lkfmiaomiao

最新推荐文章于 2023-10-25 18:01:32 发布

阅读量166

点赞数

本文链接：https://blog.csdn.net/lkfmiaomiao/article/details/100569760

版权

HTML–样式&选择器
例子代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格</title>
		<style>
			*{
				text-decoration: none;
			}
			.nav>li{
				width:228px;
				height:41px;
				line-height:41px;
				background:#eeeeee;
				border:1px solid darkgreen;
				text-align:center;
				list-style:none;
				background-image: url(img/nav1.png);
				background-repeat: no-repeat;
				background-position:158px;
			}
			.nav a:link{
				color:black;
			}
			.nav a:visited{
				color:black;
			}
			.nav a:hover{
				color:red;
				font-size:35px;
			}
			.nav a:active{
				color:blue;
				font-size:25px;
			}
			.nav li:hover{
				background:pink;
			}
			.nav li:active{
				background:yellow;
			}
					</style>
	</head>
	<body>
		<ul class="nav">
			<li><a href="#">语文</a></li>
			<li><a href="#">数学</a></li>
			<li><a href="#">英语</a></li>
			<li><a href="#">政治</a></li>
			<li><a href="#">历史</a></li>
			<li><a href="#">地理</a></li>
		</ul>
		
	</body>
</html>

效果图：
未被访问时：0
在这里插入图片描述
鼠标经过时的效果图：

鼠标点击时的效果图：

知识点
css样式
行内样式：

外联样式：

内部样式:

基本选择器
标签选择器：

div{
				width:200px;
				height:200px;
				border:2px  solid red ;/*像素、样式、颜色*/
			}

类选择器：

			.inner{
				width:200px;
				height:200px;
				border:2px  solid green;
				line-height:100px;
				background
			}

id选择器

选择器优先级
id选择器>类选择器>标签选择器

派生选择器
包含选择器（后代选择器）：

	.inner p{
				
			}

子选择器：

.nav>li{
				color:green;
				font-style: oblique;
				text-i
			}

通配符选择器：

*{
				background:lightpink;
				padding:0;/*外边距*/
				margin:0;
			}

字体样式
font-size：设置字体大小
font-style : italic/oblique
font-weight : bold/bolder;
font-family : “宋体”

文本样式
align:left/right/center(水平对齐)
color:字体颜色
text-indent:首行缩距
text-decoration:文本修饰
text-transform:大小写转换
line-height:垂直对齐（与高height等高）

背景样式
background-color : 设置背景颜色
background-image : 插入背景图，使用url()
background-repeat : 背景图平铺
background-position :背景图位置
background : red url() no-repeat 100px center;

列表样式
list-style : none；

超链接样式（超类选择器）
:link 只有超链接可以用（未被访问之前）
:visited 只有超链接可以用（访问过后）
:hover 可用于任意标签（鼠标经过时）
:active（鼠标点击时）