本文详细介绍了CSS的基础知识，包括CSS的定义、发展历史、快速入门方法和优势。重点讲解了CSS的选择器、盒模型、浮动、定位、网页动画等核心概念，以及如何使用它们来美化网页、设置字体样式、处理超链接和列表。此外，还探讨了CSS的导入方式、优先级以及如何解决浮动元素的布局问题。最后，文章提到了定位、层级和动画在创建动态效果中的应用。
CSS学习
如何学习
-
CSS 是什么
1.1 什么是CSS： Cascdaing Style Sheet 层叠级联样式表
CSS ：表现(美化网页) 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
1.2 CSS 发展史：
CSS1.0
CSS2.0 div(块)+css，HTML 与CSS 结构分离的思想，网页变的简单 SEO
CSS2.1 浮动 定位
CSS3.0 圆角 阴影 动画，浏览器兼容性~
1.3 CSS 快速入门
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--规范,可以编写CSS代码,每一个声明最好使用';' 结尾 语法： 选择器{ 声明1; 声明2; 声明3; } --> <link rel="stylesheet" href="./style.css type="text/css"> <!--rel表示调用的是一种什么样式 type 说明调用文件的类型为css--> </head> <body> <h1>我是标题</h1> </body> </html>1.4 CSS优势：内容和表现简单 网页结构表现统一，可以实现通用 样式十分丰富，简易使用独立于html的css文件 利用SEO 容易被搜索引擎收录
1.5 CSS的3种导入方式
行内样式：标签内部样式
外部样式：链接式 link 导入式：@import url(); 先展示结构再渲染
优先级 就近原则 行内样式最高 ，
-
CSS怎么用
-
CSS 选择器(重点+难点)：
-
美化网页(文字，阴影，超链接，列表，渐变)
-
盒子模型
-
浮动
-
定位
-
网页动画(特效效果)
选择器
选择页面上的某个元素或某一类元素
基本选择器
-
标签选择器 选择一类标签
<style> /*标签选择器 */ h1{ color: #389420; } p{ font-size:80px; } </style> -
类选择器 class 选择所有class属性一致的标签，跨标签 .类名{}
<style> /* 类选择器格式 .class 格式{} 好处 ：可以多个标签归类，是同一个class 可以复用 */ .zcd{ color: aquamarine; } .zxm{ color: purple; } .zjt{ color: pink; } </style> -
id选择器 id 全局唯一 #id{}
<style>
/* id选择器的格式
#id{
}
*/
#zcd{
color: aquamarine;
}
#zxm{
color: pink;
}
#zjt{
color: cornflowerblue;
}
#lfl{
color: purple;
}
</style>
优先级 id选择器> 类选择器 > 标签选择器
层次选择器
-
后代选择器 在某个元素的后面
body p{ background: red; } -
子选择器 一代 儿子
body>p{ background: aquamarine; } -
相邻兄弟选择器
/* 相邻兄弟选择器 只有一个向下 */ .active + p{ background: brown; } -
通用选择器
/* 通用选择器:当前选中元素的向下的所有兄弟元素 */ .active~p{ background: aqua; }
结构伪类选择器
伪类：条件选择器
<style> /*ul第一个子元素*/ ul li:first-child{ background: brown; } /*ul最后一个子元素*/ ul li:last-child{ background: beige; } /* 选中p1 定位到父元素 选择当前的第一个元素 选择p元素的父元素的选中父级元素的第一个并且是当前第一个才做效*/ p:nth-child(1){ background: pink; } /* 选中父元素 p元素的第二个 类型 */ p:nth-of-type(2){ background: deepskyblue; } </style>
属性选择器(常用)
a[属性=属性值]{} 属性值可以使用正则表达式
/* 选中class 中有links的元素 = ：绝对等于 *= ：包含这个元素 ^= : 以。。。开头 $= : 以。。。 结尾 */
美化网页元素
为什么要美化网页 ： 有效的传递页面信息 吸引用户 凸显主题 提高用户体验
<span></span> // 突出字体
字体样式
<title>Title</title> <!--font-family 字体 font-size 字体大小 font-weight 字体粗细 color 字体颜色 --> <style> body { font-family: "Arial Black", 楷体; } .p1 { font-weight: bold; color: deepskyblue; } </style> <!--字体风格--> <style> p { font: oblique bolder 12px "楷体"; } </style>
文本样式
颜色 文本对齐方式 首行缩进 行高 下划线 装饰
- 颜色 color rgb() rgba() a为透明度
- 文本对齐方式 text-align
- 首行缩进 text-indent
- 行高 line-height 单行文字居中 ，行号等于height
- 装饰 text-decoration
- 文本图片水平对齐 vertical-align middle
<style> img,span{ vertical-align: middle; } </style><body><p> <img src="../../resources/image/R.jpg" alt="" width="600" height="599"/> <span>abcdefg</span></p></body>
超链接伪类和文本阴影
超链接伪类 一般只用 a a: hover{}
<style> /* 默认的颜色 */ a{ text-decoration: none; color: black; } /*鼠标悬浮的颜色*/ a:hover{ color: aqua; } /*鼠标按住未释放*/ a:active{ color: pink; } </style>
文本阴影
/*text-shadow 阴影颜色 水平偏移 垂直偏移 阴影半径*/#price { text-shadow: red 10px -10px 2px;}
列表
#nav{ width: 300px; background: #a0a0a0;}.title{ font-size:18px; font-weight: bold; text-indent: 2.1em; line-height:30px ; background: red;}/*ul lilist-style：none 去掉圆点circle 空心圆decimal 数字*/ul { background: #a0a0a0;}ul li{ height: 30px; list-style: none; text-indent: 1em;}a{ text-decoration: none; font-size: 14px; color: black;}a:hover{ color: orange; text-decoration: underline;}
背景
背景颜色
背景图片
#nav{ width: 300px; background: #a0a0a0;}.title{ font-size:18px; font-weight: bold; text-indent: 2.1em; line-height:30px ; /* 颜色 图片 x轴位置 y轴位置 平铺方式*/ background: red url("../image/arrow_down.png") 275px 8px no-repeat ;}/*ul lilist-style：none 去掉圆点circle 空心圆decimal 数字*/ul { background: #a0a0a0;}ul li{ height: 30px; list-style: none; text-indent: 1em; background-image: url("../image/arrow_right.png"); background-repeat: no-repeat; background-position: 235px 3px;}a{ text-decoration: none; font-size: 14px; color: black;}a:hover{ color: orange; text-decoration: underline;}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NMdSAs12-1647427466373)(C:\Users\西木子\AppData\Roaming\Typora\typora-user-images\image-20220305152425026.png)]
渐变
background-color: #4158D0; background-image: linear-gradient(160deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
盒子模型(重点)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C256Wipa-1647427466374)(C:\Users\西木子\AppData\Roaming\Typora\typora-user-images\image-20220305154312904.png)]
margin :外边距
padding ：内边距
border： 边框
边框
- 边框的样式
- 边框的粗细
- 边框的颜色
div:nth-of-type(1) input { border: 2px solid black;}
外边距
外边距的妙用：居中元素 margin ：0 auto； 要求 外面为一个块元素 有固定的宽度
内边距
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/style.css" type="text/css"></head><body><div id="app"> <h2>会员登录</h2> <form action="#"> <div> <span>用户名：</span> <input type="text" value placeholder="邮箱/用户名/手机号"> </div> <div> <span>密码：</span> <input type="password"> </div> </form></div></body></html>
*{ margin: 0; padding:0;}#app { width: 300px; border: 1px solid red; margin: 0 auto;}h2 { font-size: 16px; background:aquamarine ;}form { background: aquamarine;}input{ border: 1px solid black;}div:nth-of-type(1){ padding: 10px;}
盒子的计算方式：你这个元素到底多大
margin+border+padding+内容宽度
圆角边框
4个角
<!-- 左上 右上 右下 左下 顺时针方向 --> <!-- 圆角 ： 圆角=半径 --> <style> div{ width:100px; height:100px; border:10px solid red; border-radius: 100px; } </style>
阴影
box-shadow: h-shadow v-shadow blur spread color inset
h-shadow 水平阴影位置 v-shadow 垂直阴影位置 blur 模糊距离 spread 阴影的尺寸 color 阴影的颜色 inset 将外部阴影改为内部阴影
浮动
块级元素：独占一行 h1~h6 p div 列表
行内元素：不独占一行 span a Strong em image
行内元素可以被包含在块级元素中，反之不能
display
/**block 块元素 inline 行内元素 inline-block 是块元素但是可以内联在一行 none 消失**/ <style> div { width: 100px; height: 100px; border: 1px solid red; display: inline; } span { width: 100px; height: 100px; border: 1px solid red; display: inline-block; } </style>
float
左右浮动
父级边框塌陷问题
clear
/* clear: right 右侧不允许有浮动元素 left 左侧不允许有浮动元素 both 两侧不允许有浮动元素 none 可以浮动 */
解决方案
-
增加父级元素的高度 不建议使用
-
增加一个空的div标签 清除浮动
.clear{ clear:both; margin: 0; padding: 0;} -
overflow 在父级元素中增加一个overflow 元素即可
#father { border: 1px solid red; overflow: auto;} -
父类添加一个伪类 after
#father:after{ content: ''; display: block; clear: both;}
小结
-
浮动元素后面增肌空div
简单 代码中尽量避免空div
-
设置父元素高度
简单 元素假设有了固定的高度就会被限制
-
overflow
简单 下拉的一些场景 或者一些不能被切除的场景 尽量不使用
-
在父类添加一个伪类 after
写法稍微复杂一点 但是没有副作用，推荐使用
定位
相对定位
position:relative 相对于原来的位置进行指定的偏移 相对定位的化，他仍然在标准文档流中，原来的位置会被保留
<!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 solid red; } #first { border: 1px dashed blue; background-color: blue; position: relative; /* 相对定位 上下左右*/ top: -20px; left: 20px; } #second { border: 1px dashed green; background-color: green; } #third { border: 1px dashed yellow; background-color: yellow; position: relative; bottom: 10px; right: 20px; } </style></head><body><div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div></div></body></html>
相对定位练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #father { height: 300px; width: 300px; margin: 10px; padding: 10px; border: 1px solid red; } a { text-decoration: none; text-align: center; /*将a标签变为块元素才能有长度和宽度*/ display: block; width: 100px; height: 100px; background-color: pink; line-height: 100px; } a:hover { background-color: deepskyblue; } a:nth-of-type(2) { position: relative; top: -100px; left: 200px; } /* */ a:nth-of-type(4) { position: relative; top: -100px; left: 200px; } a:nth-of-type(5) { position: relative; top: -300px; left: 100px; } </style></head><body><div id="father"> <a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a> <a href="#">链接4</a> <a href="#">链接5</a></div></body></html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SNLlp2Is-1647427466376)(C:\Users\西木子\AppData\Roaming\Typora\typora-user-images\image-20220316095931962.png)]
绝对定位
定位：基于XXX定位上下左右
-
没有父级元素定位的前提下，都是相对于浏览器定位
-
假设父级元素存在定位我们通常相对于父级元素进行偏移
-
在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移绝对定位的话他不在标准文档流中，他原来的位置会不被保留
固定定位
position: fixed
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 1000px; } div:nth-of-type(1){ width: 100px; height: 100px; background-color: red; /*相对于浏览器绝对定位*/ position: absolute; right: 0; bottom: 0; } div:nth-of-type(2){ width: 50px; height: 50px; background-color: yellow; /*固定定位写死的*/ position: fixed; right: 0; bottom: 0; } </style></head><body><div>div1</div><div>div2</div></body></html>
层级 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" type="text/css"></head><body> <div id="app"> <ul> <li><img src="image/1.jpg" alt=""></li> <li class="tipText">雨后小花</li> <li class="tipBg"></li> <li>时间:2022/3/16</li> <li>地点:大连海事大学</li> </ul> </div></body></html>
#app{ width: 180px; padding: 0; margin: 0; overflow: hidden; font-size: 12px; line-height: 25px; border: 1px solid red;}ul,li{ margin:0; padding: 0; list-style: none;}#app ul{ position: relative;}.tipText,.tipBg{ position: absolute; width: 380px; top: 112px; height: 25px; color: white;}.tipText{ z-index: 999;}.tipBg{ background: #000; opacity: 0.5; /*背景透明度*/}
opacity 设置透明度 与rgba一致
扫一扫
3258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
