css - 210130 - 01
- 了解
- 优先级
- 优势
- 基本选择器
- 层级选择器
- 结构伪类选择器
- 属性选择器
CSS
Cascading Style Sheet 层叠/级联样式表
简单了解
<!--第一种方法 内部样式-->
<head>
<meta charset="UTF-8">
<title>css</title>
<!--
规范
<style>,中编写css代码
语法：
选择器{
声明1；
声明2；
声明3；
........
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>白光一</h1>
</body>
<!--第二种方法 外部样式-->
<!------------------------------html文件--------------------------->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test04</title>
<link rel="stylesheet" href="css/test04.css">
</head>
<body>
<h1>白光一</h1>
</body>
</html>
<!------------------------------CSS文件----------------------------->
h1{
color: red;
}
<!--第三种 行内样式-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test05</title>
</head>
<body>
<h1 style="color: red">白光一</h1>
</body>
</html>
<!--第四种 导入式（css2.1中的） 已淘汰 -->
<!------------------------------html文件--------------------------->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test04</title>
<style>
@import url("css/test04.css")
</style>
</head>
<body>
<h1>白光一</h1>
</body>
</html>
<!------------------------------CSS文件----------------------------->
h1{
color: red;
}
优先级
就近原则 ， 元素距离那个样式近，就是哪个
不是-----> 行内样式 > 内部样式 > 外部样式
优势
- 内容，表现分离
- 网页结构表现统一，可以实现复用
- 样式丰富
- 利用SEO，容易被搜索引擎收录
基本选择器
选择页面上的某一个或某一类元素
-
标签选择器
<!-- 标签选择器，回选择到页面上所有的这个标签的元素 --> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签选择器</title> <style type="text/css"> h2{ color: aqua; background: black; border-radius: 40px; } p{ font-size: 60px; } </style> </head> <body> <h2>标签01</h2> <h2>标签02</h2> <h2>标签03</h2> <p>段落</p> </body> </html> -
类选择器
<html lang="en"> <head> <meta charset="UTF-8"> <title>类选择器</title> <!-- 可复用,可跨标签 语法格式： .class的名称{} --> <style> .bq01{ color: red; } .bq02{ color: yellow; } .dl01{ font-size: 50px; } </style> </head> <body> <h2 class="bq01">标签01</h2> <h2 class="bq02">标签02</h2> <h2 class="bq01">标签03</h2> <p class="dl01">段落01</p> <p class="bq02">段落02</p> <p class="dl01">段落03</p> </body> </html> -
ID选择器
<html lang="en"> <head> <meta charset="UTF-8"> <title>ID选择器</title> <!-- ID全局唯一 语法： #ID名称{} 不遵守就近原则： id选择器 > 类选择器 > 标签选择器 --> <style> #bq04{ color: red; } .bq01{ color: yellow; } h2{ color: green; } </style> </head> <body> <h2 class="bq01" id="bq04">标签01</h2> <h2 class="bq01">标签02</h2> <h2 class="bq01">标签03</h2> <h2>标签04</h2> <h2 id="bq05">标签05</h2> <h2>标签06</h2> </body> </html>
层级选择器
-
后代选择器 在某一个元素后面 祖爷爷，爷爷，爸爸，自己
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后代选择器</title> <style> body p{ background: #e0c286; } </style> </head> <body> <p>段落01</p> <p>段落02</p> <p>段落03</p> <p>段落04</p> <p>段落05</p> <ul> <li><p>无序01</p></li> <li><p>无序02</p></li> <li><p>无序03</p></li> <li><p>无序04</p></li> </ul> <p>段落06</p> <p>段落07</p> </body> </html>
-
子选择器 一代， 儿子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子选择器</title> <style> body>p{ background: #e0c286; } </style> </head> <body> <p>段落01</p> <p>段落02</p> <p>段落03</p> <p>段落04</p> <p>段落05</p> <ul> <li><p>无序01</p></li> <li><p>无序02</p></li> <li><p>无序03</p></li> <li><p>无序04</p></li> </ul> <p>段落06</p> <p>段落07</p> </body> </html>
-
相邻兄弟选择器 同辈（向下一个，不包括自己）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相邻兄弟选择器</title> <style> .active + p{ background: #e0c286; } </style> </head> <body> <p>段落01</p> <p class="active">段落02</p> <p>段落03</p> <p>段落04</p> <p>段落05</p> <ul> <li><p>无序01</p></li> <li><p>无序02</p></li> <li><p>无序03</p></li> <li><p>无序04</p></li> </ul> <p>段落06</p> <p>段落07</p> </body> </html>
-
通用选择器 向下全部，不包括自己
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通用选择器</title> <style> .active~p{ background: #e0c286; } </style> </head> <body> <p>段落01</p> <p class="active">段落02</p> <p>段落03</p> <p>段落04</p> <p>段落05</p> <ul> <li><p>无序01</p></li> <li><p>无序02</p></li> <li><p>无序03</p></li> <li><p>无序04</p></li> </ul> <p>段落06</p> <p>段落07</p> </body> </html>
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<!--
伪类选择器就是，，带条件的css，，，也就是带冒号（：）的
-->
<style>
/*选中ul的第一个子元素*/
ul li:first-child{
background: red;
}
/*选中ul的最后一个子元素*/
ul li:last-child{
background: green;
}
/*
题目：选中 段落01
这个意思是：选择当前p元素的父级元素（目前是body）的第二个元素，
也就是按父级元素下的顺序来找（当前 “段落01” 位于父级元素body的第二位）
*/
p:nth-child(2){
background: #2626e7;
}
/*
题目：选中 段落03
这个意思是：选择当前p元素的父级元素（目前是body）的 p的第三个元素，
也就是按父级元素下的类型的顺序来找（当前 “段落03” 位于p元素的第三）
*/
p:nth-of-type(3){
background: #131010;
}
a:hover{
background: aqua;
}
</style>
</head>
<body>
<h5>标签1</h5>
<p>段落01</p>
<p class="active">段落02</p>
<p>段落03</p>
<p>段落04</p>
<p>段落05</p>
<ul>
<li>无序01</li>
<li>无序02</li>
<li>无序03</li>
<li>无序04</li>
</ul>
<p>段落06</p>
<p>段落07</p>
<a href="www.baidu.com">百度官网</a>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<!--
属性名[属性值（这个值可以为正则表达式）]
语法：
属性名[]{}
= 绝对等于
*= 包含
^= 以...开头
$= 以...结尾
-->
<style>
.test14 a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: blue;
text-align: center;
color: black;
text-decoration: none;
margin-right: 5px;
font:bold 20px/50px Arial;
}
/*选中存在id属性的元素*/
/*a[id]{*/
/* background: yellow;*/
/*}*/
/*选中id=first的元素*/
/*a[id=first]{*/
/* background: #4e4e07;*/
/*}*/
/*选中 class有links 的元素*/
/*a[class*="links"]{*/
/* background: yellow;*/
/*}*/
/*选中 href中以http开头 的元素*/
/*a[href^="http"]{*/
/* background: yellow;*/
/*}*/
/*选中 doc结尾 的元素*/
a[href$="doc"]{
background: green;
}
/**/
/**/
</style>
</head>
<body>
<p class="test14">
<a href="http://www.baidu.com" class="links item first" id="first">01</a>
<a href="" class="links item active" target="_blank" title="test">02</a>
<a href="image/a.html" class="">03</a>
<a href="image/a.png" class="links item">04</a>
<a href="image/a.jpg" class="links item">05</a>
<a href="aaa" class="links item">06</a>
<a href="/a.pdf" class="links item">07</a>
<a href="/aaa.doc" class="links item">08</a>
<a href="aaa.txt" class="links item">09</a>
<a href="https.doc" class="links item last">10</a>
</p>
</body>
</html>
irst" id=“first”>01
02
03
04
05
06
07
08
09
10
1281
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
