#引入样式
##行内
##内嵌
##外链
##导入
#选择器
##基本选择器
##包含选择器
##属性选择器
##伪类选择器
##伪属性选择器
**
引入样式
**
行内样式
<h1 style="color:red">行内</h1>
内嵌样式
<style type="text/css">
h1{
color: blue
}
</style>
外链样式
<link rel="stylesheet" type="text/css" href="css.css">
导入样式
<style type="text/css">head@import url(css.css)</style>
四种样式就近优先
**
选择器
**
基本选择器
id选择器(根据id属性获取)优先级最高
#idname{}
类选择器(class属性获取) 优先级第二
.classname{}
标签选择器(根据标签名获取) 优先级第三
div{}
通用选择器(通配符* 给所有都加)优先级最低
*{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
*{
color: green
} /*通用选择器*/
div{
color: purple
}
/*标签选择器*/
#first{
color: red
}
/*id选择器*/
.class1{
color: yellow
}
/*class选择器*/
</style>
</head>
<body>
<div id="first" class="class1">DIV</div>
<diV>DIV2.0</div>
<div class="class1">DIV3.0</div>
<h1>H1</h1>
<hr>
</body>
</html>
包含选择器
子代选择器(获取某个标签里的一级子标签 使用空格来分隔)
后代选择器(获取某个标签里的所有子标签 使用>来分隔)
分组选择器(逗号选择器 使用,来分隔)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>包含选择器</title>
<style type="text/css">
div.user>ul{
border-style: solid;
border-color: green;
}
/*子代选择器*/
.user li{
border-style: solid;
border-color: yellow;
}
/*后代选择器*/
.class1,div,#first{
border-style: solid;
border-color: blue;
}
/*分组选择器*/
</style>
</head>
<body>
<div id="first" class="class1">DIV</div>
<div>DIV2.0</div>
<div class="class1">DIV3.0</div>
<h1>H1</h1>
<hr>
<div class="user">
<ul>
<li>数据1</li>
<li>数据2</li>
<li>数据3</li>
</ul>
<li>数据4</li>
<li>数据5</li>
<li>数据6</li>
</div>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
.container[class]{
color: blue;
}
div[title]{
color: yellow;
}
input[type*="e"]{
color: green;
}
/*确切到某一个值*/
input[type^="e"]{
color: green;
}
/*以什么为开始*/
input[type$="rl"]{
color: green;
}
/*以什么为结束*/
.msg+p{
color: red;
}
/*表示下一个标签*/
[title="标题"]{
color: purple;
}
/*属性名称可以等于某一个值 注意优先级以免被覆盖*/
</style>
</head>
<body>
<div class="container">DIV</div>
<div title="标题">DIV2.0</div>
<input type="text" name="" id="" value="AA">
<input type="email" name="" id="" value="BB">
<input type="url" name="" id="" value="CC">
<hr>
<div class="msg">DIV3.0</div>
<p id="msg2">P</p>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
a:link{
color: blue;
}
/*链接*/
a:visited{
color: red;
}
/*已访问*/
a:hover{
color: green;
}
/*悬停*/
a:active{
color: yellow;
}
/*点击*/
</style>
</head>
<body>
<a href="https://www.bilibili.com/">cilck</a>
</body>
</html>
伪元素选择器
::before(:before css2中版本 直接加样式)必须写content取值为样式 加在前
::after(:after css2中版本 直接加样式)必须写content取值为样式 加在后