css的引人方式和选择器

最新推荐文章于 2023-04-11 15:55:00 发布

genjiv

最新推荐文章于 2023-04-11 15:55:00 发布

阅读量42

点赞数

本文链接：https://blog.csdn.net/genjiv/article/details/117626111

版权

引入方式

行内样式

标签样式 ,结合 style，加上相对应样式


<h2 style="color:red">这是一个标题标签</h2>

内嵌样式



<head>
<meta charset="UTF-8">
<title>样式</title>
<style type="text/css">
h2{
color: blue
}
</style>
</head>

外链样式

<link rel="stylesheet" type="text/css" href="">

导入样式

<style type="text/css">
@import url("css.css");
</style>

优先级行内内嵌外链导入（不严谨） “就近原则”

选择器

基本选择器

标签选择器（根据标签名获取）
id选择器（根据id属性进行获取）
类选择器（class属性进行获取）
通用选择器（通配符*）

优先级 id 类标签通配符

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
/* 通配符选择器 */
*{
color: red
}
/* 标签选择器 */
div{
color: blue

}
/* id选择器 ------ #id的名字*/
/* #first{
color: yellow
} */
#myprograme{
background: red
}
/* 类选择器------- .class的值 */
/* .name{
color: green
} */
</style>
</head>
<body>
<div id="first" class="name">这是一个div</div>
<p id="myprograme">这是一个p标签</p>
<div class="username">这也是一个div</div>
<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: red;
}
/* 分组选择器（逗号选择器） */
.name,#myprograme,h1{
color: red
}
</style>
</head>
<body>
<div id="first" class="name">这是一个div</div>
<p id="myprograme">这是一个p标签</p>
<div class="username">这也是一个div</div>
<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">
/* 某个标签里面的某个属性值 */
.container[class]{
color:red;
}
/* div[title]{
color: red
} */
/* 确切到某一个值 */
input[type*="e"]{
color: red
}
/* 以什么为开始 */
input[type^="e"]{
color: blue
}
/* 以什么为结束 */
input[type$="rl"]{
color: green
}
/* 表示下一个标签 */
.msg+p{
color: yellow
}
/* 属性名称可以等于某一个值 */
[title="这是一个标题"]{
color: blue
}
</style>
</head>
<body>
<div class="container">这是一个div</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" name="" id="" value="张三">
<input type="email" name="" id="" value="王五">
<input type="url" name="" id="" value="李四">
<hr>
<div class="msg">这是第三个div</div>
<p id="msg2">这是一个段落</p>
</body>
</html>

伪类选择器

它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

同一个标签，不同的状态，有不同的样式，这就叫做"伪类"。伪类是使用冒号表示
:link -------- 链接点击之前
:visited ------- 链接被访问过后
:hover ------- ”悬停“ 鼠标放到标签上
:active ------ "激活" 鼠标点击标签但是不松手
:focus ------- 某个标签获得焦点时候的样式

四种状态的顺序是固定的
:link------:visited-------:hover-----:active

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
/* 让链接点击之前是红色 */
a:link{
color: red
}
/* 让链接点击之前是橙色 */
a:visited{
color: orange
}
/* 鼠标悬停时候是绿色 */
a:hover{
color: green
}
/* 鼠标点击但是不松手的时候是蓝色 */
a:active{
color: blue
}
</style>
</head>
<body>
<a href="demo04.html">点击</a>
</body>
</html>

微元素选择器

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

设置元素的首字母、首行的样式在元素的内容之前或之后插入内容

语法

selector::pseudo-element {
  property: value;
}

genjiv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的引人方式和选择器

引入方式行内样式标签样式 ,结合 style，加上相对应样式内嵌样式外链样式导入样式选择器
复制链接

扫一扫

css的引人方式和选择器

引入方式

选择器

“相关推荐”对你有帮助么？