1、什么是CSS
学习的路线
1、css是什么
2、css怎么用
3、css选择器(重点+难点)
4、美化网页(文字,阴影,超链接,列表,渐变…)
5、盒子模型
6、浮动
7、定位
8、网页动画(特效效果)
1.1 什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS:表现(网页)
字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动…
1.2 发展史
CSS 1.0
CSS 2.0 DIV() + CSS, HTML与CSS结构分离的思想,网页变得简单,SEO
CSS 2.1 浮动,定位
CSS 3.0 圆角,阴影,动画… 浏览器兼容性
1.3 快速入门
style
基本入门
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dfJO8d4K-1603442721766)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20201017195842599.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NZRKHJDG-1603442721768)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20201017195852681.png)]
CSS的优势:
1、内容和表现分离
2、网页结构表现统一,可以实现复用
3、样式十分的丰富
4、建议使用独立于html的css文件
5、利用SEO,容易被搜索引擎收录!
1.4 CSS的3种导入方式
优先级顺序:就近原则
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i9mwpwwf-1603442721769)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20201017201234793.png)]
拓展:外部样式俩种写法
-
链接式:
html
<!-- 外部样式 --> <link rel="stylesheet" href="css/style.css">
-
导入式
@import是CSS2.1特有的
<!-- 导入式 --> <style> @import url("css/ne.css"); </style>
2、选择器
作用:选择页面上的某一个或者某一类元素
2.1 基本选择器
1、标签选择器:选择一类标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
h1{
color: rgb(2,65,867);
background-color: gray;
border-radius: 18px;
}
</style>
<body>
<h1> 学Java</h1>
<p > study python</p>
</body>
</html>
2、类选择器 class:选择所有class属性一致的标签,跨标签,.类名{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
/* 类选择器的格式 .class的名称{}
好处,可以多个标签归类,是同一个class,可以复用
*/
.qinjiang{
color: coral;
}
.ceshi{
color: cornflowerblue;
}
</style>
<body>
<h1 class="ceshi">标题1</h1>
<h1 class="qinjiang">标题2</h1>
<h1>标题3</h1>
</body>
</html>
3、id选择器:全局唯一! #id名{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
/* id选择器 : id必须保证全局唯一
#id名称{}
不遵循就近原则,固定的
id选择器 > class选择器 > 标签选择器
*/
#qinjiang{
color: #808080;
}
.style1{
color: green;
}
h1{
color: blue;
}
</style>
<body>
<h1 class="style1" id="qinjiang">标题1</h1>
<h1 class="style1">标题1</h1>
<h1>标题1</h1>
<h1>标题1</h1>
<h1>标题1</h1>
</body>
</html>
优先级:id>class>标签选择器
2.2 层次选择器
1、后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你
/* 后代选择器 */
body p{
background-color: red;
}
2、子选择器,一代,儿子
body>p{
background-color: aqua;
}
3、相邻兄弟选择器:同辈
/* 相邻兄弟选择器:只有一个,相邻(向下)
*/
.active + p{
background-color: cornflowerblue;
}
4、通用选择器
/* 通用兄弟选择器,当前选中元素的向下的所有兄弟元素 */
.active~p{
background-color: chartreuse;
}
2.3 结构伪类选择器
伪类:
/* ul的第一个子元素 */
ul li:first-child{
background-color: red;
}
/* ul的最后一个子元素 */
ul li:last-child{
background-color: aqua;
}
/* 选中p1 :定位到父元素,选中当前的第一个元素
选中当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效
*/
p:nth-child(1){
background-color: brown;
}
/* 选中父元素,下的p元素的第二个,类型 */
p:nth-of-type(2){
background-color: yellow;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5wa4u5Wm-1603442721771)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20201018200832875.png)]
2.4 属性选择器 (常用)
id+class 结合~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background-color: bisque;
text-align: center;
color: goldenrod;
text-decoration: none;
margin-right: 20px;
font:bold 20px/50px Arial
}
/* 属性名,属性名 = 属性值 (正则) */
/* = 绝对等于
*= 包含
^= 以这个开头
$= 以这个结尾
*/
/* 存在id属性的元素 a[]{}*/
/* a[id]{
background-color: yellow;
} */
/* id=first的元素 */
/* a[id=first]{
background-color: green;
} */
/* class 中有links的元素
*/
/* a[class*="links"]{
background-color: red;
} */
/* 选中href种以http开头的元素 */
/* a[href^=http]{
background-color: black;
} */
/* 以pdf结尾的 */
a[href$=pdf]{
background-color: cornflowerblue;
}
</style>
<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="img/123.html" class="links item">3</a>
<a href="img/123.png" class="links item">4</a>
<a href="img/123.jpg">5</a>
<a href="abc" class="links item">6</a>
<a