目录
CSS简介
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>
<font color="red">老妹儿01</font>
</h3>
<h3>
<font color="red">老妹儿02</font>
</h3>
<h3>
<font color="red">老妹儿03</font>
</h3>
<h3 style="color:#00FF00">老妹儿04</h3>
<h3 style="color:#00FF00">老妹儿05</h3>
<h3 style="color:#00FF00">老妹儿06</h3>
</body>
</html>网页效果
内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css内部样式</title>
<style>
/*内部样式*/
h3 {
color:#00FF00;
}
</style>
</head>
<body>
<h3>老妹儿01</h3>
<h3>老妹儿02</h3>
<h3>老妹儿03</h3>
</body>
</html>网页效果
外部样式
创建外部文件：创建外部文件夹css，然后创建外部文件03.css
h3{
color: #0f0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css外部样式</title>
<!--使用link引入外部文件-->
<link rel="stylesheet" href="./css/03.css">
</head>
<body>
<h3>老妹儿01</h3>
<h3>老妹儿02</h3>
<h3>老妹儿03</h3>
</body>
</html>网页效果
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器</title>
<style>
p {
color: #00FF00;
font-size: 66px;
}
</style>
</head>
<body>
<p>李昊哲桃李不言</p>
<p>李昊哲下自成蹊</p>
<p>真的吗？</p>
</body>
</html>网页效果
类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
</head>
<style>
p {
color: #00FF00;
font-size: 66px;
}
.buzhidao {
font-size: 33px;
color: #5b9e4c;
}
</style>
<body>
<p class="buzhidao">李昊哲桃李不言</p>
<p class="buzhidao">李昊哲下自成蹊</p>
<p>真的吗？</p>
</body>
</html>网页效果
ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID选择器</title>
</head>
<style>
p {
color: #5b9e4c;
font-size: 66px;
}
.buzhidao {
font-size: 33px;
color: #4054ea;
}
#lihaozhe {
color: #be82d1;
}
</style>
<body>
<p class="buzhidao">李昊哲桃李不言</p>
<p class="buzhidao" id="lihaozhe">李昊哲下自成蹊</p>
<p>真的吗？</p>
</body>
</html>网页效果
后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<style>
ul a {
text-decoration: line-through;
}
</style>
</head>
<body>
<a href="">00</a>
<ul>
<a href="">11</a>
<a href="">22</a>
<li><span><a href="">33</a></span></li>
<li><span><a href="">44</a></span></li>
</ul>
<a href="">55</a>
</body>
</html>网页效果
子选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子选择器</title>
<style>
ul>a {
text-decoration: line-through;
}
</style>
</head>
<body>
<a href="">00</a>
<ul>
<a href="">11</a>
<a href="">22</a>
<li><span><a href="">33</a></span></li>
<li><span><a href="">44</a></span></li>
</ul>
<a href="">55</a>
</body>
</html>网页效果
直接相邻选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>直接相邻选择器</title>
<style>
#two p {
color: rgba(red, green, blue, alpha);
}
</style>
</head>
<body>
<p>老大</p>
<p id="two">老二</p>
<p>老三</p>
<p>老四</p>
<p>老五</p>
</body>
</html>网页效果
间接相邻选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>间接相连选择器</title>
<style>
#two-p {
color: #0df005;
background-color: #5b5beb;
font-size: 66px;
}
</style>
</head>
<body>
<span>
<p>老大</p>
<p id="two">老二</p>
<p>老三</p>
<p>老四</p>
<p>老五</p>
</span>
</body>
</html>网页效果
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
input[type=text] {
width: 300px;
height: 100px;
border-width: 30px;
border-radius: 15%;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" placeholder="请输入账号" />
<input type="password" name="" id="" value="" placeholder="请输入密码" />
</body>
</html>网页效果
公共选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公共选择器</title>
<style>
[type=text],
[type=password] {
width: 300px;
height: 30px;
}
[type=text] {
border: 10px solid #123456;
}
[type=password] {
border: 10px solid #654321;
}
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" placeholder="请输入账号" />
<input type="password" name="" id="" value="" placeholder="请输入密码" />
</body>
</html>网页效果
通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器</title>
<style>
* {
color: #FF007F;
background-color: #dbdcdb;
font-size: 66px;
}
</style>
</head>
<body>
<ul>
<li>
<a href="">超级链接</a>
</li>
</ul>
<p>李昊</p>
<span>李哲</span>
</body>
</html>网页效果
伪类符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
/*
什么是伪类？
伪类用于定义元素的特殊状态
*/
a {
text-decoration: none;
font-size: 66px;
}
/*未访问的链接*/
a.link {
color: #f00;
}
/*已访问的链接*/
a.visited {
color: #0f0;
}
/*鼠标悬停链接*/
a.hover {
color: L #FF00FF;
}
/*已选择的链接*/
a.active {
color: L #0000FF;
}
</style>
</head>
<body>
<a href="https://space.bilibili.com/480308139">李昊哲_小课</a>
<img src="./百度.png" width="300px" title="点击进入搜索">
<a href="https://blog.csdn.net/qq_24330181/">李昊哲-小课</a>
</body>
</html>网页效果
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
