浅谈前端的CSS
css指的是层叠样式表(Cascading Style Sheet)，用于定义如何显示HTML元素
下面，我们就来简单的讲一下CSS的功能与用法
注释
css的注释用的是
/*这是注释*/字体属性
字体属性可以控制字体的种类，大小，粗细，颜色等
我们就直接用代码展现（之前展示的已经被注释掉，可以一个一个把注释解除来尝试）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*非重点 哪种字体*/
/*body{*/
/*font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif */
/*}*/
/*字体的大小*/
/*span{*/
/*font-size: 17px;*/
/*}*/
/*字体的粗细*/
/*span{*/
/*font-weight: normal;*/
/*}*/
/*字体的颜色*/
span{
/*color: yellow;*/
/*color:#3333;*/
/*color: rgb(255,0,255);*/
color: rgba(255,0,255,0.5);
}
</style>
</head>
<body>
<span>我是span</span>
</body>
</html>属性的引入方式
属性的引入方式分为行内样式和内部样式
行内式是在标记的style属性中设定CSS样式，但是不推荐大规模使用
内部样式则是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
.a{
width: 10px;
height: 20px;
background-color: yellow;
}
</style>
<link rel="stylesheet" href="b.css">
</head>
<body>
<!--行内样式-->
<div style="width: 10px;height: 20px;background-color: red"></div>
<div class="a"></div>
<div class="b"></div>
</body>
</html>基本选择器
元素选择器
p {color: "red";}ID选择器
\#i1 { background-color: red; }类选择器
.c1 { font-size: 14px; }
p.c1 {color: red;}注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。
通用选择器
\* { color: white; }组合选择器
组合选择器分为儿子选择器，兄弟选择器以及后代选择器。顾名思义，如果将某个属性看做一个类，这个属性中的属性看做子类的话，组合选择器的作用就是进行筛选，选择特定的某个属性进行操作
儿子选择器
儿子选择器则是选择直接继承父亲的属性，对它进行操作
儿子选择器的语法操作是 > ，例如想要对class = a 下的div进行操作，则是 .a>div
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a>div{
background-image:url("1.jpg") ;
}
</style>
</head>
<body>
<div class="a">我是爸爸
<div class="b">我是儿子
<p class="b" >我是孙子</p>
</div>
</div>
</body>
</html>值得注意的是，某些属性，比如对字体颜色的赋值，本身就是所有的后代都会继承，所以并没有什么卵用
兄弟选择器
兄弟选择器类似于儿子选择器，可以对同一级别的其他所有同类属性进行操作
他的用法是 span~.a，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
span~.a{
color: red;
}
</style>
</head>
<body>
<div>
<span>span</span>
<h1 class="a">h1</h1>
<h2 class="a">h2</h2>
<p>p</p>
<h4 class="a">h4</h4>
</div>
<p class="a">sdsd</p>
</body>
</html>后代选择器
后代选择器则是可以对它的后代进行选择
方法为 div div 具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div div{
color: red;
}
</style>
</head>
<body>
<div id="b" class="c">asda
<div>我是第一个儿子</div>
<div class="a">我是第二个儿子
<div>我是孙子</div>
</div>
</div>
</body>
</html>毗邻选择器
对相邻的属性进行操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style>
div+p{
color: red;
}
p
</style>
</head>
<body>
<div>
dasd
</div>
<p>ppppp</p>
<p>2ppp</p>
</body>
</html>毗邻选择器
对相邻的属性进行操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style>
div+p{
color: red;
}
p
</style>
</head>
<body>
<div>
dasd
</div>
<p>ppppp</p>
<p>2ppp</p>
</body>
</html>属性选择器
属性选择器主要用于选取带有指定属性的元素
比如 div[name="123"] 则是指定name=123 的div进行操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div[name="123"]{
color: red;
}
</style>
</head>
<body>
<div name="123"> div</div>
<div name="455">我是div</div>
<div>没有属性的div</div>
</body>
</html>分组和嵌套
分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
div, p { color: red; }上面的代码为div标签和p标签统一设置字体为红色。
通常，我们会分两行来写，更清晰:
div, p { color: red; }嵌套
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。
.c1 p { color: red; }伪类选择器
伪类选择器主要是作用于链接属性
/* 未访问的链接 */
a:link { color: #FF0000 }
/* 鼠标移动到链接上 */
a:hover { color: #FF00FF }
/* 选定的链接 */
a:active { color: #0000FF }
/* 已访问的链接 */
a:visited { color: #00FF00 }
/*input输入框获取焦点时样式*/
input:focus { outline: none; background-color: #eee; }如果是已经访问过的链接，则如果不清除访问记录的话其余的都会没有用
为元素选择器
伪元素选择器一般分为3种，其中最常用的是 first-letter, before, after
first-letter
常用的给首字母设置特殊样式：
p:first-letter { font-size: 48px; color: red; }before
/*在每个<p>元素之前插入内容*/ p:before { content:"*"; color:red; }after
/*在每个<p>元素之后插入内容*/ p:after { content:"[?]"; color:blue; }before和after多用于清除浮动。
选择器的优先级
选择器的优先级其实是按不同选择器的权重计算的
内联样式>id选择器>类选择器>元素选择器