CSS-学习笔记
学习目标
| 1.css是什么 | 2.CSS怎么用（快速⼊门） |
| 3.CSS选择器（重点 + 难点） | 4.美化页面（文字、阴影、超链接、列表、渐变…） |
| 5.盒子模型 | 6.浮动 |
| 7.定位 | 8.网页动画（特效） |
1.什么是CSS
1.1、什么是CSS
Cascading Style Sheet 层叠样式表
CSS：表现（美化⽹页）
字体，颜⾊，边距，⾼度，宽度，背景图⽚，⽹页定位，⽹页浮动
1.2、发展史
CSS1.0
CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，⽹页变得简单，SEO
CSS2.1：浮动，定位
CSS3.0：圆⾓、阴影、动画…浏览器兼容性~
2、快速⼊门
Title
我是标题吗
css的优势
1、内容和表现分离
2、网页结构表现统一，可以实现复用
3、样式十分的丰富
4、建议使用独立于html的css文件
5、利用SEO，容易被搜索引擎收录！
2.1CSS的3种常⽤导⼊⽅式
Title
标题是我
补充：
链接式：
导入式：
css2.1 特有:
3.CSS选择器
3.1.1基本选择器
公式：/* 标签选择器，会选择到页面上所有的这个标签的元素 */
h1{ color: #a123a1; } p{ font-size: 80px; }代码：
Title
学Java
听话啊
3.1.2类选择器class
选中所有class属性一致的标签，跨标签
公式：.类名{}
Title
标题1
标题2
标题3
3.1.3id选择器
注意：全局唯一！
公式：#id名{}
Title
标题1
标题2
标题3
标题4
标题5
以上3种选择器存在优先级
优先级： id > class > 标签
3.2层次选择器
3.2.1后代选择器
顾名思义就是某一个元素里包含的全部后代 如：祖爷爷-->爷爷-->爸爸-->你
/* 后代选择器 */
body p {
background-color: brown;
}
3.2.2子选择器
某一个元素的全部第一代 如：祖爷爷-->爷爷
/* 子选择器 */
body>p {
background-color: burlywood;
}
3.2.3相邻兄弟选择器
某一个元素相邻的一个兄弟（并且兄弟要与这个元素相同）方向：向下
/* 相邻兄弟选择器 */
.brother+p {
background-color: sandybrown;
}
3.2.4通用选择器
当前选中元素向下的全部兄弟属性
/* 通用选择器 */
.brother~p {
background-color: blue;
}
3.3结构伪类选择器
伪类：条件
Document
你好
P1
P2
P3
- L1
- L2
- L3
3.4属性选择器（常用）
id+class相结合使用
Document
4.美化网页元素
4.1、为什么要美化网页
-
有效的传递页面信息
-
美化网页，页面漂亮才能吸引客户
-
凸显页面的主题
-
提高用户的体验
span标签：重点要突出的字，使用span标签套起来
Title
学习语言JAVA
4.2字体样式
常用：
-
font-family：字体
-
font-size：字体大小
-
font-weight：字体粗细
-
color：字体颜色
Title
标题
正文11111
正文2222222
i love study java
font-weight:bolder; 也可以填px，但不能超过900,相当于bloder
常用写法：
font:oblique bloder 12px "楷体"
4.3文本样式
-
颜色–>color rgb rgba
-
文本对齐方式–>text-align：center
-
首行缩进–>text-indent：2em
-
行高–>line-height：300px；
-
下划线–>text-decoration
-
text-decoration:underline/*下划线*/
-
text-decoration:line-through/*中划线*/
-
text-decoration:overline/*上划线*/
-
text-decoration:none/*超链接去下划线*/
-
-
图片、文字水平对齐
-
img,span{vetical-align:middle}
-
4.4文本阴影和超链接伪类
Document
$:99元
4.5列表样式练习
重点：
list-style:
none 去掉实心圆
circle 空心圆
square 正方形
Document
#nav {
width: 500px;
}
/* 标题字体变小 粗体 首行缩进 行高*/
.title {
font-size: 18px;
font-weight: bold;
text-indent: 2em;
line-height: 35px;
background-color: red;
}
/*
list-style:
none 去掉实心圆
circle 空心圆
square 正方形
*/
ul li {
line-height: 30px;
list-style: none;
text-indent: 2em;
background-color: beige;
}
a {
text-decoration: none;
font-size: 20px;
color: #000;
}
a:hover {
color: red;
text-decoration: underline;
}4.6背景图片应用及其渐变
-
背景颜色：background
-
背景图片
background-image:url("");/*默认是全部平铺的*/ background-repeat:repeat-x/*水平平铺*/ background-repeat:repeat-y/*垂直平铺*/ background-repeat:no-repeat/*不平铺*/
插入图片两种写法：
第一种
background: rgb(255, 0, 0) url("../../resources/image/down.png") no-repeat 324px -11px;
第二种
background-image: url("../../resources/image/right.png");
background-repeat: no-repeat;
background-position: 300px -1px;4.7渐变
渐变背景网址：https://www.grabient.com
径向渐变、圆形渐变
5.盒子模型
5.1什么是盒子模型
margin：外边距 padding：内边距 border：边框
5.2边框
border：
1.边框的粗细
2.边框的样式
3.边框的颜色
重点： solid实线 dashed虚线
Document
用户登录
5.3内外边距
盒子的计算方式：
margin+border+padding+内容的大小
总结：
body总有一个默认的外边距 margin:0
常见操作：初始化
margin:0; padding:0; text-decoration:none;
5.4圆角边框和阴影
img{
margin-top: 50px;
margin-left: 26%;
width: 500px;
height: 500px;
border-radius: 500px;
}效果：
border-radius有四个参数（顺时针），左上->右上->右下->左下
圆圈：圆角=半径
box-shadow: 10px 10px 1px black;
6.浮动
6.1标准文档流
块级元素：独占一行 h1~h6 、p、div、 列表…
行内元素：不独占一行 span、a、img、strong
注： 行内元素可以包含在块级元素中，反之则不可以。
6.2display（重要）
-
block：块元素
-
inline：行内元素
-
inline-block：是块元素，但是可以内联，在一行
注意点：这也是一种实现行内元素排列的方式，但是我们很多情况用float
none：消失
Title
div块元素
span行内元素
6.3float
float：left/right左右浮动
clear：both
6.4overflow及父级边框塌陷
clear：
right：右侧不允许有浮动元素
left：左侧不允许有浮动元素
both：两侧不允许有浮动元素
none：
解决塌陷问题方案：
方案一：增加父级元素的高度；
#father {
border:1px #000 solid;
height:800px
}方案二：增加一个空的div标签，清除浮动
方案三：在父级元素中增加一个overflow属性
overflow:hidden/*隐藏超出部分*/ overflow：scoll/*滚动*/
Document
《那年那兔那些事儿》将中华人民共和国建立前后的国内外一些军事和外交的重大事件以动物漫画的形式展现出来，给本来严肃的历史增添了不少趣味性。
方案四：父类添加一个伪类:after
#father:after{
content:'';
display:block;
clear:both;
}小结：
-
浮动元素增加空div----> 简单、代码尽量避免空div
-
设置父元素的高度-----> 简单，但是元素假设有了固定的高度，可能就会超出范围
-
overflow----> 简单，下拉的一些场景避免使用
-
父类添加一个伪类:after（推荐）----> 写法稍微复杂，但是没有副作用，推荐使用
6.5对比
-
display：方向不可以控制
-
float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。
7.定位
7.1相对定位
相对定位：positon：relstive；
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置会被保留
top: 20px;
right: 20px;
left: -20px;
bottom: 50px;
Document
7.2绝对定位和固定定位
定位：基于xxx定位，上下左右~
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动 总结：相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
Document
第一个盒子
第二个盒子
7.3z-index
Document
-
-
那年那兔那些事儿
- 时间：2022-11-20
- 地点：星辰大海
#app{
width: 1000px;
margin: 0 auto;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid red;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
ul,li{
position: relative;
}
.tipText, .tipBg{
position: absolute;
width: 1000px;
height: 25px;
top: 494px;
}
.tipText{
color: #000;
z-index: 999;
}
.tipBg{
width: 100px;
background: rgb(255, 0, 0);
opacity: 0.5;/*背景透明度*/
filter: alpha(opacity=50);
}8.网页动画（特效）
css做动画过于繁琐，已有很多工具间接性做出
百度搜索canvas动画、卡巴斯基监控站（仅作了解）
总结：