css的重点系统学习
1、如何学习?
-
css是什么
-
css怎么用(快捷入门)
-
css选择器(重点+难点)
-
美化网页(文字,阴影,超链接,列表,渐变...)
-
盒子模型
-
浮动
-
定位
-
网页动画(特效效果)
1.1、什么是css
Cascading Style Sheet 层叠级联样式表
css:表现层(美化网页)
字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动.....
1.2、发展史
css1.0
css2.0: Div(块)+CSS,HTML与CSS结构分离的思想,网页变革简单,SEO
css2.1:浮动,定位
css3.o:圆角,阴影,动画....,流量器兼容性~
1.3、快速入门
-
style
-
建议使用这种规范
-
CSS的优势:
-
内容和表现分离
-
网页结构表现统一,可以实现复用
-
样式十分的丰富
-
建议使用独立于html的css文件
-
利用SEO,容易被搜索引擎收录!
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外部样式-->
<link rel="stylesheet" href="css/style.css">
<!-- 内部样式-->
<style>
/* qwep*/
h1{
color: #aaaaff;
}
</style>
</head>
<body>
<!--优先级:就近原则,那个离得近使用谁的样式-->
<!--优先级:行内样式 > 内部样式 > 外部样式-->
<!--行内样式:在标签元素中,编写一个style属性,编写样式即可,不好,多的时候不适用-->
<h1 style="color: red"></h1>
</body>
</html>
-
扩展:外部样式两种写法
-
链接式:
<!-- 外部样式-->
<link rel="stylesheet" href="css/style.css">
-
导入式:
@import 是CSS2.1特有的!
<!-- 导入式:-->
<style>
@import url("style.css");
</style>
首页link和import语法结构不同,前者<link>是
本质上两者使用选择区别不大,但为了软件中编辑布局网页html代码,一般使用link较多,也推荐使用link。
2、选择器
作用:选择页面上的某一元素或某一类元素
2.1 基本选择器
-
标签选择器:选择一类标签
-
类选择器:class:选中所有class属性一致的标签,跨标签,类名{}
-
id选择器:全局唯一! # Id名{}
优先选择器:id >class > 标签
2.2、层次选择器
body:
<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>-->
</body>
流程图:*
-
后代选择器:在某个元素的后面 ( 祖爷爷 爷爷 爸爸 我)
body p{
background: red;
} -
子选择器,一代,儿子
子选择器
body>p{
background: hotpink ;
} -
相邻兄弟选择器
/* 兄弟选择器:只有一个,相邻(向下)*/
.active + p{
background: rosybrown;
}
<p class="active">p1</p>
<p>p2</p> -
通用选择器
/* 通用选择器,当前选中元素的向下的所有兄弟元素*/
.active~p{
background: #66CCFF;
}
2.3、结构伪类选择器
伪类:条件
<!--不能使用,calss,id选择器-->
<style>
/*!*<!--ul的第一个子元素-->*!*/
ul li:first-child{
background: #66CCFF;
}
/*ul的最后一个子元素*/
/*!*ul的最后一个元素*!*/
ul li:last-child{
background: #008B8B;
}
/* 选中p1 : 定位到父元素,选择当前的第一个元素
选中当前的p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效
*/
p:nth-child(1){
background: #aaaaff;
}
/* 选中父元素,下的p的元素的第二个,类型*/
p:nth-of-type(1){
background: #4f4d4e;
}
a:hover{
background: hotpink;
}
</style>
</head>
<body>
<a href="">12306</a>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
2.4、属性选择器 (重要)
id + class 相结合