#CSS
如何学习
- CSS是什么
- CSS怎么用(快速入门)
- CSS选择器(重点 + 难点)
- 美化网页(文字, 阴影, 超链接, 列表, 渐变 …)
- 盒子模型
- 浮动
- 定位
- 网页动画(特效效果)
1.1 什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS : 表现(美化网页)
字体, 颜色, 边距, 高度, 宽度, 背景图片, 网页浮动
1.2 CSS发展史
CSS1.0
CSS2.0 DIV(块) + CSS, HTML与CSS结构分离的思想,网页变得简单, SEO
CSS2.1 浮动, 定位
CSS3.0 圆角, 阴影, 动画, 浏览器兼容性~
1.3 快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<!--规范 <style>可以编写css的代码 , 每一个声明最好使用分号; 结尾
语法 : 选择器{
声明1;
声明2;
声明3;
}
-->
<!-- <style>
h1{
color: aqua;
}
</style>-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
建议使用这种格式:
CSS的优势 :
- 内容和表现分离
- 网页结构表现统一, 可以实现复用
- 样式十分丰富
- 建议使用独立于html的CSS文件
- 利用SEO , 容易被搜索引擎收录 !
1.4 CSS的3种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入方式</title>
<style>
/*内部样式*/
h1{
color: green;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级 : 就近原则 -->
<!--行内样式 , 在标签元素中, 编写一个style属性, 编写样式即可-->
<h1 style="color: aqua">标题</h1>
</body>
</html>
拓展 : 外部样式的两种写法
-
链接式 :
html
<!--外部样式--> <link rel="stylesheet" href="css/style.css">
-
导入式 :
css 2.1特有的 @improt
<!--导入式--> <style> @import "css/style.css"; </style>
2. 选择器
作用 : 选择页面上的某一个或者某一类元素
2.1 基本选择器
-
标签选择器 : 选择一类标签 标签名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器 , 会选择到页面上所有的这个标签的元素*/ h1{ color: #d02e2e; } </style> </head> <body> <h1>学java</h1> <h1>学java</h1> <p>听mxyjajajavavava</p> </body> </html>
-
类选择器 : 选择所有class 属性一致的标签, 可以跨标签 .class名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器的格式 .class的名称{} 好处 , 可以多个标签归类,可以跨标签使用, 是同一个 class,可以复用 */ .mxy{ color: #d02e2e; } .java{ background: cyan; } </style> </head> <body> <h1 class="mxy">标题1</h1> <h1 class="java">标题2</h1> <h1 class="mxy">标题3</h1> <p class="mxy">哇哦</p> </body> </html>
-
id 选择器 : 全局唯一 ! #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器 : id必须保证全局唯一
#id名称{}
优先级 : 不遵循就近原则 , 固定的
ID选择器 > class选择器 > 标签选择器
*/
#mxy{
color: cyan;
}
.st1{
color: red;
}
h1{
color: green;
}
</style>
</head>
<body>
<h1 id="mxy">标题1</h1>
<h1 class="st1">标题2</h1>
<h1 class="st1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
优先级 : id > class > 标签
2.2 层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* p{
background: green;
}*/
/*后代选择器*/
/*body p{
background: red;
}*/
/*子选择器*/
/*body>p{
background: cyan;
}*/
/*楼下弟弟选择器 , 只有一个 , 相邻(向下)*/
/*.active + p{
background: blue;
}*/
/*通用弟弟选择器 , 当前选中元素的向下的所有弟弟元素*/
.active~p{
background: bisque;
}
</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>
</body>
</html>
-
后代选择器 : 在某个元素的后面 祖爷爷 爷爷 爸爸 你
/*后代选择器*/ body p{ background: red; }
-
子选择器 , 一代 , 儿子
/*子选择器*/ body>p{ background: cyan; }
-
相邻兄弟选择器 同辈 向下
/*楼下弟弟选择器 , 只有一个 , 相邻(向下)*/ .active + p{ background: blue; }
-
通用选择器
/*通用弟弟选择器 , 当前选中元素的向下的所有弟弟元素*/ .active~p{ background: bisque; }
2.3结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--避免使用class , id 选择器-->
<style>
/*ul 的第一个子元素*/
ul li:first-child {
color: bisque;
}
/*ul 的最后一个子元素*/
ul li:last-child {
color: rebeccapurple;
}
/* 选中 p1 : 定位到父元素, 选择当前的第一个元素
选择当前P元素的父级元素, 选中父级元素的第一个 , 并且是当前元素才生效!
*/
p:nth-child(2) {
background: blue;
}
/*选中父元素, 下的p元素的第二个, 类型为当前元素*/
p:nth-of-type(1) {
background: yellow;
}
/*!*伪类选择器*!
a:hover{
color: tomato;
}*/
</style>
</head>
<body>
<a href="">123123</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>
</html>
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: 50px; /*宽度*/
border-radius: 10px; /*圆角弧度*/
background: blue; /*背景颜色*/
text-align: center; /*文本对齐方式*/
color: cyan; /*颜色*/
text-decoration: none; /*下划线*/
margin-right: 5px; /*外边距-右侧*/
line-height: 50px; /*行高*/
}
/*属性名 , 属性名 = 属性值(正则)*/
/*
= 绝对相同
~= 包含
*= 通配
^= 以这个开头
$= 以这个结尾
*/
/*存在id属性的元素*/
/*a[id]{
background: yellow;
}*/
/*id = first的元素*/
/*a[id = first]{
background: red;
}*/
/*class 中有 links的元素*/
/*a[class *= "links"]{
background: yellowgreen;
}*/
/*选中herf属性中以http开头的元素*/
/*a[href ^=http]{
background: yellow;
}*/
/*选中以pdf结尾的元素*/
a[href $= pdf] {
background: black;
}
</style>
</head>
<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="images/123.html" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
- = 绝对等于
- *= / ~= 通配 , 包含
- ^= 以这个开头
- $= 以这个结尾
3.美化网页元素
3.1 为什么要美化网页
- 有效的传递页面信息
- 美化网页, 页面漂亮 , 才能吸引用户
- 凸显页面的主题
- 提高用户的体验
span标签: 重点要突出的文字 , 使用span标签套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
.item {
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习<span class="item">Java</span>
</body>
</html>
3.2 字体样式
<!--
font-family 字体
font-size 字体大小
font-weight 字体粗细
color 颜色
-->
<style>
body{
font-family: 隶书;
color: darkblue;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
3.3 文本样式
- 颜色 color
- 文本对齐的方式 text-align = center
- 首行缩进 text-indent : 2em
- 行高 line-height
- 装饰 text-decoration
- 文本与图片水平对齐 vertical-align : middle;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色: 单词, RGB(红绿蓝)0~F
RGBA: A(透明度)的值的范围: 0~1
text-align: 文本对齐方式
text-indent: 文本首行缩进
line-height: 行高 和 块的高度一致,就可以上下居中
-->
<style>
h1{
color: #a123a1;
background: rgb(0,255,255);
text-align: center;/*文本居中*/
}
.p1{
background: rgba(0,255,255,0.3);
text-indent: 2em;
}
.p2{
background: #a123a1;
height: 300px;
line-height: 300px;
}
.l1{
text-decoration: underline;/*下划线*/
}
.l2{
text-decoration: line-through;/*中划线*/
}
.l3{
text-decoration: overline;/*上划线*/
}
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>
<h1>生死疲劳 (莫言的代表作之一)</h1>
<p class="p1">
《生死疲劳》是莫言的代表作之一。小说中叙述了1950年到2000年中国农村这50年的历史发展过程。
围绕着土地这个沉重的话题,阐释了农民与土地的种种关系,并透过生死轮回的艺术图像,
展示了新中国成立以来中国农民的生活和他们顽强、乐观、坚韧的精神。
</p>
<p class="p2">
小说《生死疲劳》获得第二届红楼梦奖和第一届美国纽曼华语文学奖。 [1]
小说《生死疲劳》获得第二届红楼梦奖和第一届美国纽曼华语文学奖。 [1]
小说《生死疲劳》获得第二届红楼梦奖和第一届美国纽曼华语文学奖。 [1]
小说《生死疲劳》获得第二届红楼梦奖和第一届美国纽曼华语文学奖。 [1]
小说《生死疲劳》获得第二届红楼梦奖和第一届美国纽曼华语文学奖。 [1]
</p>
<p>
<img src="img/莫言.jpg" alt="">
<span>aaaaa</span>
</p>
</body>
</html>
3.4 阴影
/*text-shadow : 阴影颜色 , 水平偏移, 垂直偏移 , 阴影半径*/
#price{
text-shadow: cyan 10px 10px 1px;
}
3.5 超链接伪类
正常情况下只需要记住 a , a: hover{}
/*默认的颜色*/
a{
text-decoration: none;
color: black;
}
/*鼠标悬浮的状态*/
a:hover{
color: orange;
font-size: 100px;
}
/*鼠标按住时的状态*/
a:active{
color: cyan;
font-size: 50px;
}
3.6列表
/*
ul li
list-style:
none : 去掉样式
circle: 空心圆
decimal: 数字
square : 正方形
*/
ul{
background: grey;
}
ul li{
height: 30px;
list-style: none;
text-indent:1em;
}
3.7 背景
- 背景颜色
- 背景图片
<style>
div {
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("img/img.png");
/*默认是全部平铺的 repeat*/
}
.div1 {
background-repeat: repeat-x; /*水平平铺*/
}
.div2 {
background-repeat: repeat-y; /*垂直平铺*/
}
.div3 {
background-repeat: no-repeat; /*不平铺,只显示一个图片*/
}
</style>
-
渐变色
在grabient网站复制渐变色代码
https://www.grabient.com/
.div2 { background-repeat: repeat-y; /*垂直平铺*/ background-color: #00DBDE; background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%); }
4.盒子模型及边框使用
margin: 外边距
padding: 内边距
border: 边框
4.2 边框
- 边框的粗细
- 边框的样式
- 边框的颜色
4.3 内外边距
4.4圆角边框
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px;
}
</style>
4.5阴影
5.浮动
块级元素:独占一行
h1~h6 p div 列表....
行内元素: 不独占一行
span a img strong ...
行内元素 可以被包含在 块级元素中, 反之, 则不可以~
5.2 display
-
这个也是一种实现行内元素的排列方式, 但是我们很多情况下都使用float
<!-- block 块元素 inline 行内元素 inline-block 即是行内元素又是块元素,在一行! none 使展示消失 --> <style> div { width: 100px; height: 100px; border: 1px solid red; display: inline-block; } span { width: 100px; height: 100px; border: 1px solid red; display: inline-block; /*使行内元素变为既是行内元素又是块元素*/ } </style>
5.3 float
-
左右浮动 float
div{ margin: 0px; padding: 5px; } #father{ border: 1px #000 solid; } .layer01{ border: 1px #F00 dashed; display: inline-block; float: right; } .layer02{ border: 1px red dashed; display: inline-block; float: right; } .layer03{ border: 1px #060 dashed; display: inline-block; float: right; } .layer04{ border: 1px #666 dashed; font-size: 12px; line-height: 23px; display: inline-block; float: right; }
5.4 父级边框塌陷问题
clear : right ; 右侧不允许有浮动元素
clear : left ; 左侧不允许有浮动元素
clear: both ; 两侧不允许有浮动元素
clear : none;
解决方法
-
增加父级元素的高度~
-
增加一个空的div标签,清除浮动
-
overflow
在父级元素中增加一个overflow: hidden
6. 定位P19
6.1 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--相对定位
相对于自己原来的位置进行偏移
-->
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px #666 solid;
padding: 0px;
}
#first{
border: 1px #05f7e2 dashed;
background-color: #00DBDE;
position: relative; /*相对定位: 上下左右*/
top: -20px;
left: -20px;
}
#second{
border: 1px #d41717 dashed;
background-color: #d41799;
}
#third{
border: 1px #1313e8 dashed;
background-color: #131399;
position: relative; /*相对定位: 上下左右*/
bottom: -10px;
right: -10px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
相对定位:position:relative;
相对于原来的位置进行指定的偏移, 相对定位的话,他仍然在标准文档流中! 原来的位置会被保留.
top: -20px;
left: -20px;
bottom: -10px;
right: -10px;
6.1.1 相对定位方块练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方块定位</title>
<style>
#box{
width: 300px;
height: 300px;
padding: 10px;
border: 2px solid red;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
background: pink;
line-height: 100px;
text-align: center;
color: white;
display: block;
}
a:hover{
background: #7777f8;
}
.a2,.a4{
position: relative;
left: 200px;
bottom: 100px;
}
/* .a4{
position: relative;
left: 200px;
top: -100px;
}*/
.a5{
position: relative;
left: 100px;
bottom: 300px;
}
</style>
</head>
<body>
<div id="box">
<a class="a1" href="#">链接1</a>
<a class="a2" href="#">链接2</a>
<a class="a3" href="#">链接3</a>
<a class="a4" href="#">链接4</a>
<a class="a5" href="#">链接5</a>
</div>
</body>
</html>
6.2 绝对定位
定位 : 基于XXX定位, 上下左右
top , bottom , left , right
- 没有父级元素定位的前提下, 相对于浏览器定位
- 假设父级元素存在定位 , 我们通常会相对于父级元素进行偏移
- 相对于父级或浏览器的位置, 进行指定的偏移 , 绝对定位的话, 他在标准文档流中, 原来的位置不会被保留
<!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 #666 solid;
padding: 0px;
position: relative;
}
#first {
border: 1px #05f7e2 dashed;
background-color: #00DBDE;
}
#second {
border: 1px #d41717 dashed;
background-color: #d41799;
position: absolute;
right: 40px;
top: -15px;
}
#third {
border: 1px #1313e8 dashed;
background-color: #131399;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
6.3 固定定位 fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){/*绝对定位, 相对于浏览器*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){/*fixed 固定定位*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
6.4 z-index
图层
z-index: 默认是0,最高无限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="img/img.png" alt=""></li>
<li class="tipText">mxy真的帅</li>
<li class="tipBg"></li>
<li>2021年3月8日16:52:14</li>
<li>地点:R星荒坂塔</li>
</ul>
</div>
</body>
</html>
opacity: 0.5; 透明度调整 : 0-1
#content{
width: 240px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;/*字体*/
line-height: 25px;/*行高*/
border: 1px #000 solid;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 380px;
height: 25px;
top: 74px;
}
.tipBg{
background: black;
opacity: 0.5;/*透明度调整 : 0-1*/
filter: Alpha(opacity=50);
}
.tipText{
color: cyan;
z-index: 1;/*显示的图层层级:从0开始可以无限叠加层数,层数高的覆盖层数低的*/
}
7.动画
可以自行百度html动画模板