<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1.全局选择器 通配符选择器 * 作用是去除盒子模型的默认结构*/
*{
margin: 0;
padding: 0;
}
/* 标签选择器 */
/* 2.list-style none;去除无序列表默认圆点 */
li{
list-style: none;
}
/* 3.类选择器class . */
.lili{
background-color: brown;
}
/* 4.id选择器 # 具有唯一性*/
#one{
background-color: blueviolet;
}
/* 5.群组选择器 ， */
div,p{
color: blue;
}
/* 6.层次选择器 */
/* 后代选择器 空格 */
/* ul li{
color: green;
}
ul a{
color: aquamarine;
} */
/* 子代选择器 */
/* li>a{
color: yellow;
}
body ul li a {
color: blanchedalmond;
} */
/* 相邻兄弟 + 挨着的下一位*/
/* div+a{
color: black;
} */
/* 通用兄弟 ~ 全部*/
/* ul li~p{
color: antiquewhite;
} */
/* 伪类选择器 */
/* 1.状态伪类 a */
/* 默认情况下的状态 */
a:link{
color: red;
}
/* 访问过后的状态 */
a:visited{
color: green;
}
/* 鼠标悬浮的状态 */
a:hover{
color: blue;
}
/* 鼠标按下去的那一刻 */
a:active{
color: orange;
}
/* 以上顺序不能改 */
/* after before*/
p::after{
content: "333333";
}
/* 结构伪类 数个数所有顺序*/
ul li:nth-child(5){
color: greenyellow;
}
/* 选择器中优先级
style > id > class > tag > * >继承
*/
</style>
</head>
<body>
<ul>
<li class="lili">sda</li>
<li class="lili">dadsd</li>
<li><a href="">sda</a></li>
<li id="one">dasd</li>
<p>4564654</p>
<li>dads</li>
</ul>
<a href="http://www.baidu.com">4564646</a>
<div>ddddd</div>
<a href="http://www.taobao.com">淘宝</a>
<p>jjjjjjjj</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*css注释*/
/*选择器{属性:属性值;}*/
/* 第一种内部引入样式 */
span{
color: brown;
font-family: "宋体";
font-size: 20px;
}
div{
background-color: hsl(120, 30%, 50%) !important;
}
</style>
<!-- 第三种写法外部样式表 -->
<link rel="stylesheet" href="./3d.css">
</head>
<body>
<span>文本标签</span>
<!-- css第二种写法为内联样式表，行内样式表 -->
<div style="width: 200px; height: 200px; background-color: blue;">
块
</div>
<h1>标题标签</h1>
</body>
</html>
<!-- 颜色的表示方法 -->
<!-- 英语单词 -->
<!-- 十六进制 -->
<!-- rgb（）取值范围0-255 -->
<!-- css3新增的颜色属性 -->
<!-- rgba a取值范围0-1 -->
<!-- hsl（）H：0/360红色 120绿色 240蓝色(0-360) -->
<!-- css如果遇到冲突的情况：对同一个标签设置了同一个样式例如文字颜色，那么我们遵循就近原则 -->
<!-- css层叠:设置几种样式层叠显示 -->
<!-- css继承文字相关样式可以被继承，布局相关样式不能被继承 -->
<!-- ！important强制优先 -->
1006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
