CSS学习
作者：互联网
CSS学习
1、我的第一个CSS程序
style.css：
h1{
color: red;
}
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style>可以编写css的代码，每一个声明最好使用分；结尾！
语法：
选择器{
声明1；
声明2；
声明3；
}
-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
2、导入方式
index1：
<head>
<meta charset="UTF-8">
<title></title>
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
<!--外部样式两种写法
1、链接式：
<link rel="stylesheet" href="css/style.css">
2、导入式：css2.0@-->
<style>
h1{
color: green;
}
</style>
</head>
<body>
<!--优先级：行内样式>内部样式>外部样式
就近原则，谁离“h1”这个元素最近就用它！
-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1style color="read">我是标题</h1style>
</body>
</html>
index2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部样式：导入式-->
<style>
@import url(css/style.css);
</style>
</head>
<body>
<h1>狂神说java</h1>
</body>
</html>
3、基本选择器
1.标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器，会选择页面上所有的这个标签的元素*/
h1{
color: #a13d30;
background: #32b578;
border-radius: 24px;
}
p{
font-size: 80px;
}
/*标签选择器的弊端：若只想要第一个h1变色，第二个不变，没有办法分开*/
</style>
</head>
<body>
<h1>学java</h1>
<h1>学java</h1>
<p>听老师说</p>
</body>
</html>
2.类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式， .class的名称{}
好处，可以多个标签gui归类，是同一个class，可以复用，可跨标签使用。
*/
.qinjiang{
color: #1442db;
}
.kuangshen{
color: #af69c9;
}
</style>
</head>
<body>
<h1 class="qinjiang">标签1</h1>
<h1 class="kuangshen">标签2</h1>
<h1 class="qinjiang">标签3</h1>
<p class="qinjiang">p标签</p>
</body>
</html>
3.id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器 ：id必须保证全局唯一！
#id名称{}
优先级：
不遵循就近原则，固定的
id选择器 > class选择器 > 标签选择器
*/
#qinjiang{
color: #ff008a;
}
.styl1{
color: #02ff00;
}
h1{
color: #2d1dc1;
}
</style>
</head>
<body>
<h1 class="styl1" id="qinjiang">标题1</h1>
<h1 class="styl1">标题2</h1>
<h1 class="styl1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
4、层次选择器
index：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/* background: green;*/
/*}*/
/*后代选择器*/
/* body （空）p{*/
/* background: red;*/
/* }*/
/*子选择器*/
/* body>p{*/
/* background: #3cbda6;*/
/* }*/
/*相邻兄弟选择器:只有一个，相邻（向下）*/
/* .active + p{*/
/* background:#a13d30;*/
/* }*/
/*通用兄弟选择器：当前选中元素的向下的所有兄弟元素*/
/* .active~p{*/
/* background: #02ff00;*/
/* }*/
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</ul></body>
</html>
5、结构伪类选择器
index：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--避免使用，class，id选择器-->
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: #02ff00;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: #ff008a;
}
/*选中p1：定位到父元素，选择当前的第一个元素*/
/*选择当前p元素的父级元素，选中父级元素的第一个,并且是当前元素才生效!,顺序*/
p:nth-child(1) {
background: #2700ff;
}
/*选中父元素，下的p元素的第二个，类型*/
p:nth-of-type(2){
background: yellow;
}
/*a:hover{*/[鼠标指上去才有颜色，产生动画效果]
/* background: #a13d30;*/
/*}*/
/* 伪类有个动作*/
</style>
</head>
<body>
<!--<a href="">312331</a>-->
<!--<h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li id="qinjiang">li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
标签：h1,color,标签,元素,学习,background,选择器,CSS 来源： https://www.cnblogs.com/LiLi8866/p/16101435.html