1.快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个css程序</title>
<!--书写css代码
语法 :
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我的标题</h1>
</body>
</html>建议分离写
2.css的三种导入方式
看代码，有手就行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
<style>
/*
我是注释
*/
h1 {
color: green;
}
</style>
</head>
<body>
<!--优先级：就近原则谁离body近就用谁-->
<!--在行内直接写-->
<h1 >我是你爹</h1>
</body>
</html><!--导入式-->
<style>
@import url("css/style.css");
</style>
先导入网页结构，再渲染css样式<!--链接式-->
<link rel="stylesheet" href="css/style.css">2.选择器
作用:选择页面上的某一个元素或者某一类元素
2.1基本选择器
2.1.1.标签选择选择器： 选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
/*
会选择所有的标签，比如h1
*/
color: bisque;
background: #3cbda6;
border-radius: 24px;
}
p{
font-size: 100px;
}
</style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>我是你爹</p>
</body>
</html>2.1.2类选择器 class 选择class属性一致的标签，跨标签 .类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
类选择器，标签可以复用
可以跨类
.class
*/
.stevezhao{
color: red;
}
.zps{
color: green;
}
</style>
</head>
<body>
<h1 class="stevezhao">标题1</h1>
<h1 class="zps">标题2</h1>
<h1 class="zps">标题3</h1>
<p class="stevezhao">P标签</p>
</body>
</html>2.1.3.id选择器 ：全局唯一！ #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
id选择器
#id名称{
}
不是就近原则，固定的
id选择器>class选择器>标签选择器
*/
#stevezhao{
color: #3cbda6;
}
.zps{
color: bisque;
}
#zps{
color: aquamarine;
}
</style>
</head>
<body>
<!--id要保持唯一-->
<h1 id="stevezhao" class="zps">标题1</h1>
<h1 class="zps">标题2</h1>
<h1 id="zps">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>优先级：id > class > 标签
2.2层次选择器
2.2.1、后代选择器：在某个元素后面 祖爷爷 爷爷 爸爸 你
/*
后代选择器
*/
body p{
background: red;
}2.2.2、子选择器 一代 儿子
body>p{
background: #3cbda6;
}2.3.3、相邻选择器 同辈
/*相邻（向下）兄弟选择器，只有一个*/
.active + p{
background: black;
}4、通用选择器(弟弟选择器)
.active~p{
background: royalblue;
}2.3结构伪类选择器
/*ul的第一个子元素*/
ul li:first-child{
background: red;
}
/*ul最后一个元素*/
ul li:last-child{
background: greenyellow;
}/*选中p1*/
p:nth-child(1){
/*选中父级的第一个*/
background: black;
}/*ul最后一个元素*/
ul li:last-child{
background: greenyellow;
}
/*选中p1*/
p:nth-child(1){
/*选中父级的第一个*/
background: black;
}
/*选中父元素下p元素的第二个*/
p:nth-of-type(2){
background: yellow;
}2.4属性选择器（常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #2700ff;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/* !*存在id的属性的元素 a[]{}*!
a[id]{
background: yellow;
}
a[id=first]{
background: green;
}
!*class中links
= 绝对等于
*= 包含
^= 以什么开头
a[class*="links"]{
background: yellow;
}*/
/*选择href中有http开通*/
a[href^=http]{
background: green;
}
/*以什么结尾*/
a[href$=jpg]{
background: green;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item">10</a>
</p>
</body>
</html>= 绝对等于
*= 包含
^= 以什么开头
