CSS
如何学习
- CSS是什么
- 怎么用
- CSS选择器（重点）
- 美化网页（文字，阴影，超链接，列表）
- 盒子模型
- 浮动
- 定位
- 网页动画
1.1 什么是CSS
Cascading Style Sheet 层叠样式表
1.2快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
<style> 可以编写CSS代码，但不建议
语法：
选择器{
声明1；
声明2；
......
}
-->
<!--<style>h1{
color: blue;
}</style>-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Look Me</h1>
</body>
</html>
1.3 css的优势
- 内容和表现分离
- 网页结构表现同一，可以实现复用
- 样式十分的丰富
- 简易使用独立的CSS文件
1.4 CSS的三种导入方式
行内样式>(内部样式, 外部样式) 就近原则
外部样式的两种写法：
-
连接式
<link rel="stylesheet" href="css/style.css"> -
导入式
<style>h1{@import url("xxx.css")}</style>
2.选择器
作用：选择某一元素或某一类元素
2.1 基本选择器
- 标签选择器：选择一类标签
- 类选择器：选中所有class属性一致的元素，可以跨标签
- ID选择器：选择一个id一致的元素
优先级：不遵循就近原则
id > class > 标签
2.2 层次选择器
<body>
<p>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>
</body>
-
后代选择器
/* 选择body后面的所有ul标签 body ul{ background: red; }[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9IzzhCia-1587999124224)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200423111515666.png)]
-
子选择器
/*子选择器 选择body 后面的第一代P标签 */ body>p{ background: green; }[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o6y45Ce9-1587999124226)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200423112011614.png)]
-
相邻兄弟选择器
<style> .active + p{ background: firebrick; } </style> <body> <p>p1</p> <p class="active">p2</p> <p>p3</p> <ul> <li> <p>p4</p> </li> <li> <p class="active">p5</p> <p>p5.5</p> </li> <li> <p>p6</p> </li> </ul> </body>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fmALPwSq-1587999124227)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200423112728741.png)]
-
通用选择器
/*通用兄弟选择器 当前选择向下的所有兄弟标签 */ .active~p{ background: saddlebrown; }[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7TayqdEP-1587999124229)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200423113202631.png)]
2.3 结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ul的第一个元素*/
ul :first-child{
background: black;
}
/*Ul的第一个li元素*/
ul li:first-of-type{
background: forestgreen;
}
/*Ul的最后一个li元素*/
ul li:last-of-type{
background: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<p>sad</p>
<li>l1</li>
<li>l2</li>
<li>l3</li>
</ul>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FncfRPLm-1587999124231)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200423114746800.png)]
2.4 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 80px;
border-radius: 10px;
background: salmon;
text-align: center;
color: cornflowerblue;
margin-right: 20px;
font: bold 20px/50px Arial;
}
/**
属性选择器
标签名 正则表达式{
......
}
*/
a[class *= "links"]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item" target="_blank" title="test">2</a>
<a href="" class="links item">3</a>
<a href="" class="links item">4</a>
<a href="" class="links item">5</a>
<a href="" class="links item last">6</a>
</p>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y8G2QBDN-1587999124231)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200423122733975.png)]
3.美化网页
span标签：要突出的部分使用span标签
3.1 字体
body{
/* 斜体 大小 英文字体 中文字体*/
font: oblique 17px "Arial Black", 楷体;
/*字体颜色*/
color: #234055;
}
3.2 文本样式
- 颜色
- 对齐方式
- 首行缩进
- 行高
- 装饰
- 文本水平对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
/* 斜体 大小 英文字体 中文字体*/
font: oblique 17px "Arial Black", 楷体;
color: #234055;
}
h1{
font-size: 53px;
color: #000000;
text-align: center; //排版：居中
}
p{
background: yellow;
text-underline: black;
height: 300px; //块高
line-height: 60px; // 行高
text-indent: 2em; //首行缩进2字母
}
</style>
</head>
<body>
<h1>幸福小镇</h1>
<p>《幸福小镇》（HAPPY TOWN）是一部无厘头搞笑冒险热血动画，由天津福煦影视文化传播有限公司和上海福煦影视文化投资有限公司共同出品。
年糕星球上有一个特别的环形小岛——旋风岛。旋风岛是一个特殊的岛屿，岛屿上春夏秋冬同时存在。坐落于春岛的旋风村是个宁静和平的小村庄，
突然有一天，旋风村的村长接到了一封邀请他前往夏岛参加旋风岛村长大会的邀请函。村长复命参加,在途中他被一伙号称是边境王护卫队的家伙们给
绑架了。故事的主人公，可米和他的伙伴们巧遇了这场绑架事件，可米他们勇敢的保护村长，可还是因为战斗力太弱只能眼睁睁地看着村长被人掳走。
可米和小伙伴们决心要把村长营救回来，开始了艰苦的修炼……</p>
<p class="poetry">
Love is more than a word，
it says so much.
When I see these four letters,
I almost feel your touch.
This is only happened since，
I fell in love with you.
Why this word does this,
I haven't got a clue.</p>
</body>
</html>
3.3 背景
背景颜色
背景图片
<style>
div{
width: 1000px;
height: 800px;
border : 1px solid red;
/*默认全部平铺*/
background-image: url("../image/qq.png");
}
</style>
3.3 渐变
4. 盒子模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tJGGYZLL-1587999124232)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200423175410444.png)]
margin:外边距
padding:内边距
border:边框
4.1 边框
<style>
#box{
width: 300px;
/* 粗细 样式 颜色*/
border: 1px solid white;
}
h2{
font-size: 16px;
background-color: yellow;
line-height: 30px;
}
form{
background: violet;
}
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px solid darkred;
}
div:nth-of-type(3) input{
border: 3px dashed blueviolet;
}
</style>
4.2 内外边距
4.3 圆角边框
4.4 阴影
5.浮动
-
块级元素：独占一行
-
h1~h6 p div ... -
行内元素：不独占一行
-
span a img... -
块级元素可以包含行内元素，反之不行
5.1 display
可以实现行内元素排版，但一般用float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
block 块元素
inline 行内元素
inline-block 是块级元素但可以到同一行
-->
<style>
#id1{
width: 305px;
height: 100px;
border: 2px black dashed;
}
div{
width: 100px;
height: 100px;
display: inline-block;
border: 1px red solid;
}
span{
/*display: block;*/
width: 100px;
height: 100px;
border: 1px red solid;
display: inline-block;
}
</style>
</head>
<body>
<div id="id1">
<div>div元素</div>
<span>span元素</span>
</div>
</body>
</html>
5.2 float
- 左右浮动
float : rigth;
float : left;
5.3 父级边框问题
父级边框塌陷问题
当所有元素都设置为float时，父级边框会塌陷
解决方案
-
增加父级元素高度
-
增加空的div，清除浮动
-
div{ clear: both; margin:0; padding:0; } -
overflow :在父级元素中增加
overflow：hidden; -
父级元素中增加一个伪类:
after -
#father:after{ content:''; display:block; clear:both; }
小结：
-
浮动元素增加空div
-
设置父元素的高度
-
overflow
会出现很难看的滚动条框，下拉的场景避免使用
-
在父类添加伪类：after（推荐）
小结：
- display:简单，但方向不可控制
- float：浮动起来会脱离标准文档流，出现父级边框塌陷问题
6.定位
6.1 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
相对定位：相对于自己原来的位置进行偏移
-->
<style>
div{
margin: 10px;
padding:5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px black solid;
padding: 0;
}
#first{
background: red;
position: relative; /*相对定位*/
top: -20px;
left: 20px;
}
#second{
background: greenyellow;
position: relative; /*相对定位*/
top: -20px;
right: -10px;
}
#third{
background: cornflowerblue;
position: relative; /*相对定位*/
top: -20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
</div>
</body>
</html>
-
相对定位
postion:relatve;相对于原来的位置偏移，不会脱离文档流，原位置会被保留
top: left: right; bottom:
6.2 绝对定位
- 没有父元素定位的前提下，相对浏览器定位
- 若父级元素存在定位，则相对于父级定位
- 相对于浏览器或父级进行指定偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
相对定位：相对于自己原来的位置进行偏移
-->
<style>
div{
margin: 10px;
padding:5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px black solid;
padding: 0;
position: relative;
}
#first{
background: red;
}
#second{
background: greenyellow;
}
#third{
background: cornflowerblue;
position: absolute;
top:20px;
right: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
</div>
</body>
</html>
6.3 固定定位
-
固定定位相对于窗口定位，无论下拉还是伸缩窗口都不会改变位置
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 1500px; } div:nth-of-type(1){ width: 100px; height: 100px; background: greenyellow; position: fixed;; right: 0; bottom: 0; } div:nth-of-type(2){ width: 100px; height: 100px; background: rebeccapurple; position: relative;; right: 0; bottom: 0; } </style> </head> <body> <div id="first">1</div> <div id="second">2</div> </body> </html>