CSS（一）
快速入门
规范项目目录
使用CSS简单美化颜色
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个css程序</title>
<!--
style中编写css代码，每一个声明最好使用‘;’结尾
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: dodgerblue;
}
</style>
</head>
<body>
<h1>CSS到底是什么？</h1>
</body>
</html>
HTML与CSS代码分离（建议使用）
<link rel="stylesheet" href="css/style.css">
选择器
作用：选择页面上的某一个或某一类元素
基本选择器
标签选择器
<style>
/*标签选择器，会选择到页面上所有的这个标签的元素*/
h1{
color: #6f4955;
background: bisque;
border-radius: 20px;
}
p{
font-size: 80px; /*字体大小*/
}
</style>
类选择器和class
<style>
/*类选择器格式：.类名称{}
好处：可以多个标签归类，属于同一个class，可以复用*/
.biaoqian1{
color: brown;
}
.biaoqian2{
color: darksalmon;
}
</style>
ID选择器
<style>
/*id选择器
#id名称{}*/
#label1{
color: aqua;
}
.biaoti{
color: #6f4955;
}
</style>
层次选择器
后代选择器：在某个元素的后面
/*后代选择器*/
body p{
background: cadetblue;
}
子选择器：之后一代
/*子选择器*/
body>p{
background: brown;
}
相邻兄弟选择器：同辈
/*相邻兄弟选择器：只对同辈后面一个元素生效*/
.active+p{
background: #6f4955;
}
通用选择器
/*通用兄弟选择器：当前选中元素的向下所有兄弟元素*/
.active~p{
background: blueviolet;
}
结构伪类选择器
伪类：条件
<style>
/*选中ul的第一个子元素*/
ul li:first-child{
color: dodgerblue;
}
/*选中ul的最后一个子元素*/
ul li:last-child{
color: darksalmon;
}
/*选中p：定位到父元素，选择当前的第一个元素*/
p:nth-child(1){
background: dodgerblue;
}
/*选中父元素下的p元素的第二个，类型*/
li:nth-of-type(1){
background: springgreen;
}
</style>
属性选择器（常用）
正则表达式通配符
= 绝对等于
*= 包含这个元素
^= 以这个元素开头
$= 以这个元素结尾
/*选择id为first的元素 a[]{}*/
/*选择id为first的元素 a[]{}*/
a[id="first"]{
background: aqua;
}
/*选择class中有links的元素*/
a[class *= "links"]{
background: #6f4955;
}
/*选择href中以http开头的元素*/
a[href^=http]{
background: aqua;
}
