##学习自狂神##
1.css是什么
2.CSS怎么用(快速入门)
3.CSS选择器(重点
文章目录
1.1、什么是CSS
Cascading Style Sheet 层叠样式表 CSS:表现(美化网页) 字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动
1.2、发展史
CSS1.0 CSS2.0:DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO CSS2.1:浮动,定位 CSS3.0:圆角、阴影、动画…浏览器兼容性~
2、快速入门
效果:
3、CSS的优势:
1、内容和表现分离;
2、网页结构表现统一,可以实现复用
3、样式十分的丰富
4、建议使用独立于html的css文件
5、利用SEO,容易被搜索引擎收录!
4.导入方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式-->
<style>
h1{
color: blue;
}
</style>
<!-- 外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式-->
<h1 style="color: red">一级标题</h1>
</body>
</html>
优先级:行内样式优先级最高,剩下两个谁离h1近,就显示哪个样式(就近原则)
拓展外部样式两种写法
链接式:
html
<link rel="stylesheet" href="css/style.css">
导入式:
@import是CSS 2.1特有的
<style>
@import url("css/style.css");
</style>
5.三种基本选择器
1.标签选择器
格式 标签:{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: blue;
}
p{
color: red;
}
</style>
</head>
<body>
<h1>一级标签</h1>
<p>段落</p>
</body>
</html>
2.类选择器
类选择器的格式 .class的名称{}
好处:可以多个标签归类,是同一个class,可以复用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first{
color: red;
}
.second{
color: aquamarine;
}
</style>
</head>
<body>
<h1 class="first">一级标签</h1>
<h2 class="second">二级标签</h2>
<h3 class="first">三级标签</h3>
</body>
</html>
3.id选择器
id选择器:id必须保证全局唯一
格式:#id名称{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#first{
color: blue;
}
#second{
color: chartreuse;
}
#third{
color: red;
}
</style>
</head>
<body>
<h1 id="first">一级标签</h1>
<h2 id="second">二级标签</h2>
<h3 id="third">三级标签</h3>
</body>
</html>
不遵循就近原则,优先级是固定的。id选择器 > class类选择器 > 标签选择器
6.层次选择器
1.后代选择器
某个元素的后边
<style>
body p{
background: chartreuse;
}
</style>
2.子选择器
只有一辈的
<style>
body>p{
background: red;
}
</style>
3.相邻兄弟选择器
只选择一个,相邻(向下)
<style>
.first+p{
background: blue;
}
</style>
4.通用选择器
当前选中元素的向下的所有兄弟元素
<style>
.first~p{
background: aqua;
}
</style>
7.结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: aqua;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: chartreuse;
}
/*选中p1:定位到父元素,选择当前的第一个元素
选择当前p元素 的父级元素,选中父级元素的第一个,并且是当前元素才生效!*/
p:nth-child(2){
background: red;
}
/*选中父元素下的,第2个p元素*/
p:nth-of-type(2){
background: black;
}
h1:hover{
color: chartreuse;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
<li>l4</li>
</ul>
</body>
</html>
演示
8.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: aquamarine;
text-align: center;
color: gray;
text-decoration: none;
margin-right: 5px;
/*line-height:50px;*/
font: bold 20px/50px Arial;
}
/*属性名,属性名=属性值(正则)
= 表示绝对等于
*= 表示包含
^= 表示以...开头
$= 表示以...结尾
存在id属性的元素
a[]{}
*/
/*id=first的元素*/
a[id=first]{
color: chartreuse;
}
/*class 中有item的元素*/
a[class*="item"]{
background: red;
}
/*选中href中以http开头的元素*/
a[href^=http]{
background: darkorange;
}
a[href$=pdf]{/*选中href中以pdf开头的元素*/
background: aquamarine;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="first active item" id="first">1</a>
<a href="http://www.91.com" class="firs">2</a>
<a href="aaa.doc" class="active item">3</a>
<a href="dasd.jpg" id="second" title="dasd">4</a>
<a href="dasd.pdf" class="item">5</a>
</p>
</body>
</html>