目录
④:active ------ "激活" 鼠标点击标签但是不松手时
一.样式引入方式
1.引入方式种类
①行内样式 ：
标签样式 ,结合 style，加上相对应样式。
②内嵌样式：
页面样式，使用style标签嵌套在head标签内。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式</title>
<style type="text/css">
h1{
color: red;
}
</style>
</head>
<body>
<h1>这是一个标题标签</h1>
</body>
</html>③外链样式：
外链样式是通过标签实现的，它只能位于HTML文档的head标签内，用于指定需要引入的CSS文件的绝对路径。
方向： Link标签 ------- head内
把
css
的样式单独写在
.css
的文件中，通过
link
标签中的
href
属性进行引入
④导入样式：
也是写在
head
标签内的
style
标签。
2.引入方式优先级：
行内>内嵌>外链>导入
二.选择器
1.基本选择器
应用最广泛的基本选择器一共有四种：
①标签选择器：
根据标签名获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
color: red
}
</style>
</head>
<body>
<div> 这是一个div</div>
</body>
</html>②id选择器：
根据
id
属性进行获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#first{
color: yellow
}
</style>
</head>
<body>
<div id="first"> 这是一个标签</div>
</body>
</html>③类选择器：
class属性进行获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.name{
color:blue
}
</style>
</head>
<body>
<div class="name"> 这是一个标签</div>
</body>
</html>④通用选择器：
使用通配符*，一般不建议使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
color:green
}
</style>
</head>
<body>
<div > 这是一个标签</div>
</body>
</html>⑤四种选择器的优先级：
id选择器>类选择器>标签选择器>通配符选择器
2.包含选择器
①子代选择器
获取某个标签的第一级子标签
<!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;
}
</style>
</head>
<body>
<h1>这是一个标签</h1>
<hr>
<div class="user">
<ul>
<li>这是数据</li>
<li>这是数据</li>
<li>这是数据</li>
<li>这是数据</li>
<li>这是数据</li>
<li>这是数据</li>
</ul>
<li>这也是数据</li>
<li>这也是数据</li>
<li>这也是数据</li>
<li>这也是数据</li>
</div>
</body>
</html>②后代选择器
获取某个标签里的所有子标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
.user li{
border-style: solid; border-color: red;
}
</style>
</head>
<body>
<h1>这是一个标签</h1>
<hr>
<div class="user">
<ul>
<li>这是数据</li>
<li>这是数据</li>
<li>这是数据</li>
<li>这是数据</li>
<li>这是数据</li>
<li>这是数据</li>
</ul>
<li>这也是数据</li>
<li>这也是数据</li>
<li>这也是数据</li>
<li>这也是数据</li>
</div>
</body>
</html>③分组选择器
逗号选择器，使用逗号给多个标签设置样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分组选择器</title>
<style type="text/css">
.name,#myprograme,h1{
color: red
}
</style>
</head>
<body>
<h1>这是一个标签</h1>
<hr>
<div class="user">
<ul>
<li>这是数据</li>
<li>这是数据</li>
<li>这是数据</li>
<li>这是数据</li>
<li>这是数据</li>
<li>这是数据</li>
</ul>
<li>这也是数据</li>
<li>这也是数据</li>
<li>这也是数据</li>
<li>这也是数据</li>
</div>
</body>
</html>3.属性选择器
①某个标签的某个属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
.container[class]{
color:red
}
div[title]{
color: blue
}
</style>
</head>
<body>
<div class="container">这是一个div</div>
<div title="这是一个标题">这也是div</div>
</body>
</html>②确切到某一值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
input[type*="e"]{
color: green
}
</style>
</head>
<body>
<input type="text" name="" id="" value="张三">
<input type="email" name="" id="" value="老王">
<input type="url" name="" id="" value="李四">
</body>
</html>③以……为开始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
input[type^="e"]{
color: green
}
</style>
</head>
<body>
<input type="text" name="" id="" value="张三">
<input type="email" name="" id="" value="老王">
<input type="url" name="" id="" value="李四">
</body>
</html>④以……为结束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
input[type$="rl"]{
color: blue
}
</style>
</head>
<body>
<input type="text" name="" id="" value="张三">
<input type="email" name="" id="" value="老王">
<input type="url" name="" id="" value="李四">
</body>
</html>⑤表示下一个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
.msg+p{
color: yellow
}
</style>
</head>
<body>
<div class="msg">这是一个div</div>
<p id="msg2">这是一个段落</p>
</body>
</html>⑥属性名称可以等于某一个值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
[title="这是一个标题"]{
color: red
}
</style>
</head>
<body>
<div title="这是一个标题">这也是div</div>
</body>
</html>4.伪类选择器
同一个标签，不同的状态，有不同的样式，这就叫做
"
伪类
"
。伪类是使用冒号表示。
①a:link -------- 链接点击之前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a:link{
color: red
}
</head>
<body>
<a href="">点击</a>
</body>
</html>②a:visited ------- 链接被访问过后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a:visited{
color: orange
}
</style>
</head>
<body>
<a herf="#">点击此处</a>
</body>
</html>③:hover ------- ”悬停“ 鼠标放到标签上时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a:hover{
color: green
}
</style>
</head>
<body>
<a herf="#">点击此处</a>
</body>
</html>④:active ------ "激活" 鼠标点击标签但是不松手时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a:active{
color: blue
}
</style>
</head>
<body>
<a herf="#">点击此处</a>
</body>
</html>⑤其他伪类选择器
| :checked | input:checked | 选择每个被选中的<input>元素 |
| :disabled | input:disabled | 选择每个被禁用的<input>元素 |
| :forcus | input:forcus | 选择焦点的<input>元素 |
| :valid | input:valid | 选择所有具有有效值的<input>元素 |
| :root | root | 选择元素的根元素 |
| :read-only | input:read-only | 选择指定“read-only"属性的<input>元素 |
| :in-range | input:in-range | 选择具有指定范围的<input>元素 |
| :empty | p:empty | 选择没有子元素的每个<p>元素 |
| :required | input:required | 选择指定了“required”属性的<input>属性 |
| :optional | input:optional | 选择没有“required”属性的<input>的元素 |
| :enabled | input:enabled | 选择每个以启用的<inout>元素 |
| :first-child | p:first:child | 选择作为其父的首个种子元素的每个<p >元素 |
| :first-of-type | p:first-of-type | 选择作为其父的首个<p>元素的每个<p>元素 |
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
