我要评论
外链样式 ID选择器 优先级
index.css文件内容
#p1{
color:blue;
}
#div1{
background-color:red;
}
#p2{
color:green;
}
#div2{
color:green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css基础</title>
<!-- 通过#id 查找元素 -->
<!-- <style type="text/css">-->
<!-- #p1{-->
<!-- color:blue;-->
<!-- }-->
<!-- #div1{-->
<!-- background-color:red;-->
<!-- }-->
<!-- </style>-->
<!-- 外部样式 -->
<link rel="stylesheet" href="css/index.css">
<!-- 内部样式 -->
<!-- *{} 修改默认样式 边界=0 -->
<style>
#div2{
color:red;
}
*{
margin:0;
padding:0;
}
p{
}
div{
}
</style>
</head>
<body>
<p id="p1">
今天天气真热
</p>
<div id="div1">
明天可能会下雨
<!-- 子类 继承父类样式 -->
<div>
我是一个子类元素
</div>
</div>
<p id="p2">
后天又是一个大晴天
</p>
<!-- 就近原则 样式 = 蓝色 内链样式 -->
<div id="div2" style="color:blue;">
我是一个测试的内容
</div>
</body>
</html>
群组选择器 后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>group组选择器</title>
<!-- 元素,元素,元素 { 样式 } -->
<!-- 后代选择器 空格 div(父类) p(子类){ 样式}-->
<style>
div,p,h3{
color:orange;
}
p,h3,figure,ul,ol{
margin: 0;
padding: 0;
}
div p{
color: greenyellow;
}
div p span{
color: red;
}
</style>
</head>
<body>
<div>今天</div>
<p>明天</p>
<h3>后天</h3>
<div>
<p>我是一个子类元素
<span>我是一个孙类元素</span>
</p>
</div>
</body>
</html>
伪类选择器 类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hover伪类选择器</title>
<!-- 伪类 依赖于box : 固有动作样式 hover鼠标移入变化-->
<style>
.box{
width: 260px;
background-color: blue;
color: white;
text-align: center;
}
.box:hover{
background-color: green;
}
#name:focus{
background-color: lightgray;
}
a:link{
color: green;
}
a:visited{
color: black;
}
a:hover{
color: blue;
}
a:active{
color: red;
}
</style>
</head>
<body>
<!-- 有一个div元素 默认一个背景色， 移动上后变成另外一个颜色 -->
<div class="box">
我会变背景色
</div>
<form action="#">
<label for="name">姓名:</label>
<input type="text" id="name", name="name">
</form>
<a href="https:www.baidu.com">百度</a>
</body>
</html>
本文地址：https://blog.csdn.net/weixin_45875105/article/details/109246552
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论