1.什么是css
如何学习
-
css是什么
-
css怎么用(入门)
-
css选择器(重点)
-
美化网页(文子,阴影,超链接,列表,渐变…)
-
盒子模型
-
浮动
-
定位
-
网页动画(特效)
1.1什么是css
cassading style sheet 层叠级联样式表
css :表现(美化网页)
字体,颜色,边距,高度,宽度,背景图片,网页定位,网页互动
1.2发展史
css1.0
css2.0 DIV(块)+CSS , HTML与CSS结构分离思想,网页变得简单 SEO
css2.1 浮动,定位
css3.0圆角,阴影. 动画… 浏览器兼容行…
练习模式:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nZgcVpL1-1654704314462)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220607220804599.png)]
1.3,快速入门
style
基本入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范
<style>
可以编写css的代码语法
选择器{
声名1;
声名2;
声名3;
}
</style>
-->
<style>
h1{
color: brown;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
建议使用这种规范内连模式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xb3pI1mA-1654704314463)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220607223620819.png)]
css优势
- 内容和表现分离
- 网页结构表现统一,可以实现复用
- 样式十分的丰富
- 建议使用独立于html的css文件
- 利用SEO,容易被搜索引擎收录
1.4 css的导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式表 -->
<style>
h1{
color: aliceblue;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级就近原则谁近谁生效-->
<!--行内样式;(不推荐)在标签元素中编写style属性,编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>
拓展:外部样式 的两种写法
连接式:
<!-- 外部样式 -->
<link rel="stylesheet" href="css/style.css">
导入式
@import是css2.1 特有的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入式 -->
<style>
@import "css/style.css";
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
2.选择器
作用:选择页面上某一个或者某一类元素
2.1基本选择器
-
标签选择器 :选择一类标签 标签{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 标签选择器 ,会选到这个页面上所有这个标签的元素 background:背景颜色 border-radius:圆角 --> <style> p{ color: green; font-size: 80px; } h1{ color: #2aa541; background: brown; border-radius: 24px; } </style> </head> <body> <h1>学java</h1> <br/> <p>听课</p> </body> </html>
-
类选择器 class 选择所有class属性一致的标签,跨标签 .类名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--类选择器的格式 .class 好处,可以多个标签归类 可以是同一个class class可以复用 --> <style> .hlk{ color: #2aa541; } .java{ color: red; } .xuexi{ color: #0e0a2b; } </style> </head> <body> <h1 class="hlk">java</h1> <h1 class="xuexi">java</h1> <h1 class="java">java</h1> <p class="java"> p标签</p> </body> </html>
-
id 选择器 #id名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- id选择器 :id必须保证全局唯一! #id名称 不遵寻就近原则 固定 id选择器>类选择器>标签选择器 --> <style> #java{ color: brown; } .hlk{ color: green; } h1{ color: yellow; } </style> </head> <body> <h1 id="java">标题1</h1> <h1 class="hlk">标题2</h1> <h1 class="hlk">标题3</h1> <h1>标题4</h1> <h1>标题5</h1> </body> </html>
优先级:id选择器>类选择器>标签选择器
2.2,层次选择器
-
后代选择器body p 在某个元素后面 祖爷爷 爷爷 爸爸
/*后代选择器 所有后代*/ body p{ background: red; }
-
子选择器 一代body>p 儿子
/*子选择器 只选择第一后代*/ body>p{ background: #2aa541; }
-
相邻相对选择器.active +p 兄弟选择器 只有一个兄弟(向下的兄弟)
/*兄弟选择器 只有一个兄弟(向下的兄弟)*/ .active +p{ background: #050bed; }
-
通用选择器 通用选择器 .active~p 一样对下不对上但是可以选多个
/*通用选择器 一样对下不对上但是可以选多个 当前选中的元素向下所有的兄弟元素*/ .active~p{ background: green; }
2.3结构伪类选择器
伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: #2aa541;
}
/*ul的最后一个元素*/
ul li:last-child{
background: red;
}
/*选中p1:定位到父元素,选择当前的第一个子元素
选择当前p元素的父级元素,选中父级元素的第一个,并且当前元素才生效
*/
p:nth-child(1){
background: #b0ec0b;
}
/*选中父级元素下的第三个,类型*/
p:nth-of-type(3){
background: aqua;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vORSqWBx-1654704314464)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608092916556.png)]
2.4属性选择器
属性名
= 属性值(正则)
=绝对等于
*=包含这个元素
^=以这个元素开头
$=以这个元素结尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*属性名
标签[属性表达式]{
样式
}
属性名 = 属性值(正则)
=绝对等于
*=包含这个元素
^=以这个元素开头
$=以这个元素结尾
*/
a[class*="a"]{
background: #2aa541;
}
a[id=tow]{
background: brown;
}
a[target]{
background: aqua;
}
a[href^="a"]{
background: #0e0a2b;
}
a[href$="kai"]{
background: aliceblue;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="a b c" id="one">1</a>
<a href="http://www.baidu.com" >2</a>
<a href=""id="tow">3</a>
<a href="aa">4</a>
<a href="huangliangkai" target="_blank">5</a>
<a href="">6</a>
</p>
</body>
</html>
3.美化网页
3.1为什么要美化网页
- 有效的传递页面信息
- 美化网页,页面漂亮,才能吸引用户
- 凸显页面主题
- 提高用户体验
span标签:重点要突出的字使用span标签包裹起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
<span id="title1">Java学习</span>
</body>
</html>
3.2 字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family :字体
font-size:字体大小
font-weight:字体粗细
color:字体颜色
-->
<style>
body{
font-family: 楷体;
color: #2aa541;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">来到元谋县金沙江乌东德水电站建设甘塘移民
搬迁安置点指挥部工作半年了。在这半年中
,亲眼目睹一幢幢楼房拔地而起,亲眼目睹
错落有致的楼房连片成为村庄,亲眼目睹宽阔的
大道将一个个村庄连接起来,亲眼目睹贫瘠、荒芜
的破山烂箐变为大片大片的土地,亲眼目睹一张张移民
幸福的笑脸,心,充实,舒畅。</p>
<p>在充实和舒畅中,由然而生起对元谋县委
政府的决策部署而敬佩之情;由然而生起对我的
同事们在移民搬迁安置工作中所付出的一切而骄傲之
意。是他们脚踏实地,俯首躬行,用最独有的坚韧,最独
特的魅力,最丰富的色彩,最生动的形象,把身安在甘塘,把心
铸在甘塘,把情洒在甘塘,才换来今天甘塘如此的日新月异,如此的
令人瞩目,如此的具有活力,如此的充满希望。
</p>
</body>
</html>
3.3 文本样式
- 颜色 color
- 文本对齐方式 text-align = center
- 首行缩进 text-index:2em
- 行高 line-height:
- 装饰 text-decoration
- 文本图片对齐: vertical-align: middle;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- text-align: 排版
text-indent: 段落首行缩进
height:行高
line-height:块高
行高和块高高度一致就可以上下剧中
-->
<style>
h1{
color: brown;
text-align: center;
}
.p1{
text-indent: 2em;
}
.p2{
color: #b0ec0b;
height: 30px;
line-height: 30px;
}
/*下划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
/*水平对齐~参照物 a,b*/
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="l1">12345</p>
<p class="l2">12345</p>
<p class="l3">12345</p>
<p class="p1">来到元谋县金沙江乌东德水电站建设甘塘移民
搬迁安置点指挥部工作半年了。在这半年中
,亲眼目睹一幢幢楼房拔地而起,亲眼目睹
错落有致的楼房连片成为村庄,亲眼目睹宽阔的
大道将一个个村庄连接起来,亲眼目睹贫瘠、荒芜
的破山烂箐变为大片大片的土地,亲眼目睹一张张移民
幸福的笑脸,心,充实,舒畅。</p>
<p class="p2">在充实和舒畅中,由然而生起对元谋县委
政府的决策部署而敬佩之情;由然而生起对我的
同事们在移民搬迁安置工作中所付出的一切而骄傲之
意。是他们脚踏实地,俯首躬行,用最独有的坚韧,最独
特的魅力,最丰富的色彩,最生动的形象,把身安在甘塘,把心
铸在甘塘,把情洒在甘塘,才换来今天甘塘如此的日新月异,如此的
令人瞩目,如此的具有活力,如此的充满希望。
</p>
<p>
<img src="image/1.png" alt="">
<span>123454678</span>
</p>
</body>
</html>
3.4阴影
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lyrivnx5-1654704314464)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608110628399.png)]
/*text-shadow 阴影颜色,水平偏移 垂直偏移,阴影半径*/
#price{
text-shadow: #3cc7f5 10px -10px 2px;
}
3.5超链接伪类
正常情况下 a a:hover
/*默认颜色*/
a{
text-decoration: none;
color: #000;
}
/*鼠标悬停*/
a:hover{
color: aqua;
font-size: 50px;
}
/*鼠标点击情况下*/
a:active{
color: red;
}
3.6列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qcRYI0Rj-1654704314465)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608113816387.png)]
3.7背景
背景颜色
背景图片
<style>
div{
width: 10000px;
height: 700px;
border: 1px solid red;
background-image: url("image/1.png");
/*默认全部铺满*/
}
div1{
background-repeat: repeat-x;
}
div2{
background-repeat: repeat-y;
}
div3{
background-repeat: no-repeat;
}
</style>
4. 盒子模型
4.1什么是盒子模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L65psxIA-1654704314465)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608124807296.png)]
margin:外边距
border:边框
padding:内边距
4.2边框
-
边框的粗细
-
边框的样式
-
边框的颜色
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ctUNkBC0-1654704314465)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608125525895.png)]
4.3 内外边距
好处:外边距可以让内容居中
外边距
margin: 0;
margin: 0 auto;
margin: 0 1px 2px 3px;
/*一个参数代表上下左右
两个参数代表上下,左右
四个参数代表上,右,下,左 顺时针旋转
*/
内边距
padding: 0;
padding: 0 auto;
padding: 0 1px 2px 3px;
/*一个参数代表上下左右
两个参数代表上下,左右
四个参数代表上,右,下,左 顺时针旋转
*/
盒子模型计算方式:这个元素多大
margin + border + padding +内容宽度
4.4 圆角边框
<!-- border-radius:
一个值
四个角
两个值
左上 右上 : 右下 左下
四个值:顺时针
-->
<!-- 圆圈: 圆角等于半径
-->
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px;
}
</style>
4.5 阴影
5浮动
5.1标准文档流
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xavjvlbs-1654704314466)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608142204129.png)]
块级元素 独占一行
h1 ~ h6 p div 列表…
行内元素 不独占一行
span a img strong …
行内元素可以被包含在块级元素中反之,则不可以~
5.2 display
<!-- display:
block 块元素
inline 行内块元素
inline-block 是块元素,但是可以内联,在一行!
none :消失
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: block;
}
</style>
1:这个也是一种实现行内元素排列方式,但是我们很多情况使用float
5.3 float
1左右浮动 float
float :right 左
float :left 右
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ngikiilv-1654704314466)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608145003612.png)]
5.4父级边框塌陷的问题
clear
/*
clear: right:右侧不允许有浮动元素
clear: left:左侧不允许有浮动元素
clear: both:两侧不允许有浮动元素
clear: none
*/
解决方案
-
增加父级元素的高度
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-txJ2sBA5-1654704314467)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608200158849.png)]
-
增加一个空的div 标签 ,清除浮动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PzCMqhDC-1654704314468)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608200654837.png)]
3,overflow
在父级元素中增加一个 overflow:hidden
4.父类增加一个伪类
#father:after{
content: '';
display: block;
clear: both;
}
小结
-
浮动元素后面增加空div 简单,代码中尽量避免空div
-
设置父元素的高度 简单,元素假设没有固定的高度,就会被限制
-
overflow 简单 下拉的场景避免使用
-
父类添加一个伪类:after(推荐)
写法稍微复杂一点,但是没有副作用,推荐使用!
5.5对比
display 方向不可以控制
float
浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷问题~
6定位
6.1 相对定位
相对定位:position:relative
相对于原来的位置,进行指定的偏移。相对定位的话,它任然在标准的表尊文档流中!
top:向上偏移 离上更远
left:向左偏移 离左更远
bottom:向下偏移 离下更远
right:向右偏移 离右更远
6.2绝对定位
定位:基于xxxx定位, 上下左右
- 没有父级元素定位的前提下,相对于浏览器定位
- 假设父级元素存在定位,我们通常会相对于父级元素进行偏移
- 在父级元素范围内移动
- 相对于父级或者浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档中,原来的位置不会被保留。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9C8ZHsDi-1654704314469)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608204309010.png)]
6.3固定定位
相对于浏览器的定位移动浏览器位置会改变
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UlUnLDCM-1654704314469)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608204541602.png)]
6.4 z-index
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lcRwuN1K-1654704314469)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608204811502.png)]
图层
z-index 默认是0,最高无限-999 opacity :透明度
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QE8SCPb3-1654704314470)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608211029791.png)]
总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r8GdlsZ8-1654704314470)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608212402814.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wUBwWLGP-1654704314471)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608212537322.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-70pedtPv-1654704314471)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608212647642.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lDUPm6ie-1654704314471)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608212749051.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XqM5QpZT-1654704314472)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608212919197.png)]