什么是CSS？
CSS(Cascading Style Sheet，层叠样式表),主要用于定义如何显示HTML元素
当浏览器读到一个样式表时，会根据样式表对文档进行渲染
CSS语法
css实例
CSS样式表由两个部分组成：
(1)选择器;
(2)声明，声明包括属性和属性值，每个声明之间用分号隔开。
css注释
# 单行注释
/*单行*/
# 多行注释
/*
注释1
注释2
注释3
*/
# action:通常我们在写css样式的时候也会用注释来划定样式区域
CSS的几种引入方式
行内样式
<a href="https://www.mzitu.com/" style="color: blue;font-size: 24px"><u>点我</u></a>
内部样式
# 内部样式是将CSS样式集中写在网页的<head></head>标签对中的<style></style>中。
<style>
p {
color: green;
font-size: 18px;
}
div {
color: deeppink;
font-size: 20px;
}
</style>
外部样式
# 外部样式就是将css样式单独写在一个文件中，然后再HTML页面引入即可，推荐使用这种方式(最正规，解耦合)。
<link href="mycss.css" rel="stylesheet">
eg:
<!--test.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<title>css样式表测试</title>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<a href="https://www.mzitu.com/" target="_blank"><u>福利网址</u></a>
</body>
</html>
样式表
/*mycss.css*/
a {
color: red;
font-size: 18px;
}
CSS选择器
基本选择器
元素选择器
# 元素选择器(又称标签选择器)
<style>
p{
color: deeppink;
}
</style>
id选择器
<style>
#d1 {
color: green;
}
</style>
<body>
<span id="d1"><u>O(∩_∩)O哈哈~</u></span>
</body>
类选择器
<style>
p.c1{
color: darkorange;
}
div.c1{
color: blue;
}
.c2{
color: green;
}
</style>
<body>
<p>(^o^)/~</p>
<p class="c1">o(*￣︶￣*)o</p>
<div class="c1"><span>ok</span></div>
<h1 class="c2">哦哦</h1>
<h2 class="c2">嗯嗯</h2>
</body>
通用选择器
<!--不推荐使用-->
<style>
*{
color: pink;
}
</style>
<body>
<p>hah</p>
<h1>heh</h1>
</body>
组合选择器
后代选择器
<!--设置div内所有a标签的颜色-->
<style>
div a {
color: green;
}
</style>
<body>
<div>
<a href="https://www.baidu.com" target="_blank">福利连接1</a>
<span>
<a href="https://www.mziu.com" target="_blank">福利连接2</a>
</span>
</div>
</body>
儿子选择器
<!--设置所有父级是div的p标签颜色-->
<style>
div>p{
color: pink;
}
</style>
<body>
<div>
<p>123</p>
<div>
<p>456</p>
</div>
</div>
<p>789</p>
</body>
毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
margin: 5px;
}
弟弟选择器
/*i1后面所有的兄弟p标签*/
#i1~p {
border: 2px solid royalblue;
}
属性选择器
"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的
[username] { /*将所有含有属性名是username的标签背景色改为红色*/
background-color: red;
}
[username='jason'] { /*找到所有属性名是username并且属性值是jason的标签*/
background-color: orange;
}
input[username='jason'] { /*找到所有属性名是username并且属性值是jason的input标签*/
background-color: wheat;
}