<>
- 你好
- 时间：2099-12-31
- 地点：月球一号基地
前端-CSS基础
前端-CSS
HTML + CSS + JavaScript
结构+表现+交互
1、介绍CSS
- CSS是什么
- CSS怎么用(快速入门)
- CSS选择器(重点 +难点)
- 美化网页(文字， 阴影，超链接,列表.渐变...）
- 盒子模型
- 浮动
- 定位
- 网页动画(特效效果)
1.1、什么是CSS
Cascading Style Sheet层叠级联样式表
- CSS :表现(美化网页)
- 字体，颜色，边距，高度,宽度，背景图片，网页定位，网页浮动...
1.2、发展史
CSS1.0
CSS2.0??DIV (块) + CSS, HTML与CSS结构分离的思想，网页变得简单, SEO.
CSS2.1??浮动， 定位
CSS3.0??圆角，阴影，动画...浏览器兼容性~
1.3、快速入门
基础入门
Title
我是标题
css的优势:
1、内容和表现分离
2、网页结构表现统一，可以实现复用
3、样式十分的丰富
4、建议使用独立于html的css文件
5、利用SEO,容易被搜索引擎收录!
1.4、CSS的三种导入方式
代码演示
Title
我是标题
拓展:外部样式两种写法
-
链接式（css3.0强烈推荐）:
-
导入式（css2.1特有的，现已废弃，大型项目不建议使用）:
2、选择器
作用:选择页面上的某一个或者某一类元素
2.1、基本选择器
1、标签选择器
2、类选择器?class
3、ld选择器
-
优先级：不遵循就近原则，固定的
-
id选择器>class选择器>标签选择器
标签选择器代码演示
标签选择器
学Java
学前端
类选择器代码演示
类选择器
标题1
标题2
标题3
ld选择器代码演示
id选择器
标题一
标题二
标题三
标题四
标题五
2.2、层次选择器
1、后代选择器：在某个元素的后面??祖爷爷??爷爷??爸爸??你
2、子选择器：只有一代-->??爸爸??儿子
3、相邻兄弟选择器：同辈??
4、通用选择器
后代选择器代码演示
/*后代选择器*/
body p{
background: red;
}
子选择器代码演示
/*子选择器*/
body>p{
background: blue;
}
兄弟选择器代码演示
Title
p0
p1
p2
p3
-
p4
-
p5
-
p6
通用选择器代码演示
Title
p0
p1
p2
p3
-
p4
-
p5
-
p6
p7
2.3、结构伪类选择器
代码演示
Title
123
p1
p2
p3
- li1
- li2
- li3
p7
2.4、属性选择器（常用）
代码演示
Title
3、美化网页元素
3.1、为什么要美化网页
1、有效的传递页面信息
2、美化网页,页面漂亮，才能吸引用户
3、凸显页面的主题
4、提高用户的体验
span标签:重点要突出的字，使用span套起来
Title
欢迎学习Java
3.2、字体样式
| 值 | 描述 |
|---|---|
| font-style | 规定字体样式。 |
| font-variant | 规定字体异体。 |
| font-weight | 规定字体粗细。 |
| font-size/line-height | 规定字体尺寸和行高。 |
| font-family | 规定字体系列。 |
代码演示
字体样式
万古神帝
八百年前，明帝之子张若尘，16岁时被未婚妻池瑶公主杀死，一代天骄，就此陨落。
八百年后，张若尘重新活了过来，却发现曾经杀死他的未婚妻，已经统一昆仑界，开辟第一中央帝国，号称“池瑶女皇”。
池瑶女皇——统御天下，威临八方；青春永驻，不死不灭。
张若尘站在诸皇祠堂外，望着池瑶女皇的神像，心中燃烧起熊熊的仇恨烈焰，“待我重修十三年，敢叫女皇下黄泉”。
3.3、文本样式
1、颜色???color,rgb,rgba
2、文本对齐的方式???text-align
3、首行缩进???text-indent
4、行高?????line-height
5、装饰?????text-decoration
6、文本图片水平对齐: vertical-align: middle;
/*超链接去下划线*/
a{
text-decoration: none;
}
代码演示
Title
万古神帝
八百年前，明帝之子张若尘，16岁时被未婚妻池瑶公主杀死，一代天骄，就此陨落。
八百年后，张若尘重新活了过来，却发现曾经杀死他的未婚妻，已经统一昆仑界，开辟第一中央帝国，号称“池瑶女皇”。
池瑶女皇——统御天下，威临八方；青春永驻，不死不灭。
张若尘站在诸皇祠堂外，望着池瑶女皇的神像，心中燃烧起熊熊的仇恨烈焰，“待我重修十三年，敢叫女皇下黄泉”。
代码演示文字在图片在中间
Title
< !--
水平对齐参照物, a,b
-->
![](”images/a.png")
asdasdajsldjalksdjalksd
3.4、超链接伪类
代码演示
Title
￥99
3.5、文本阴影
- text-shadow:水平偏移，垂直偏移，阴影半径，阴影颜色
注意：这里的偏移全为正数在第四象限
text-shadow: 10px 10px 2px skyblue;
3.6、列表
ul-li
代码演示
html代码
列表样式
css代码
#nav {
width: 300px;
background-color: darkgray;
}
.title {
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background-color: red;
}
/*ul li*/
/*
list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
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;
}
3.7、背景
-
背景颜色------background-color;
-
背景图片------background-image: url("图片路径");
图片定位：
background-position :Xpx Ypx;图片平铺效果：
- background-repeat: no-repeat;------不平铺
- background-repeat: repeat;-----------平铺（默认）
- background-repeat: repeat-x;---------沿X轴平铺
- background-repeat: repeat-y;---------沿y轴平铺
用一行代码写全部的样式
background: 颜色, 图片, 图片位置, 平铺方式;
像这样：background: red url(".. /images/d.gif") 270px 10px no-repeat ;
div {
background-image: url("");
background-repeat: no-repeat;
}
3.8、渐变
background-color: #FFFFFF;
background-image:linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%, #FF0000 100%);
4、盒子模型
div
4.1、什么是盒子模型
margin:外边距
border:边框
padding:内边距
4.2、边框
border
1、边框的粗细
2、边框的样式
3、边框的颜色
4.3、外边距
margin（遵循顺时针方向）
margin: 100px;/*表示上右下左外边距各100像素，顺时针方向*/
margin: 100px 200px;/*表示上下外边距为100像素，左右外边距为200像素*/
margin: 100px 200px 300px;/*表示上外边距为100像素，左右外边距为200像素，下外边距为300像素*/
margin: 100px 200px 300px 400px;
/*表示上外边距为100像素，右外边距为200像素，下外边距为300像素，左外边距为400像素，顺时针方向*/
4.4、内边距
padding
同外边距类似，就是换了个单词的意思
思考：盒子的计算方式:你这个元素到底多大?
margin + border + padding +内容宽度
代码演示
Title
会员登录
4.5、圆角边框
border-radius
依旧遵循顺时针旋转
Title
4.6、盒子阴影
box-shadow
Title
5、浮动
5.1、标准文档流
块级元素：独占一行
块级元素有：
body from select textarea h1-h6 html table button hr p ol ul dl cnter div
行内元素：不独占一行
行内元素有：heda meat title lable span br a style em b i strong
行内元素可以被包含在块级元素中，反之，则不可以~
行内块元素
行内块元素常见的有： img input td
5.2、display
Title
div块元素
span行内元素
这个也是一种实现行内元素排列的方式,但是我们很多情况都是用float
5.3、float
左浮动：float:left;
右浮动：float:right;
float
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
当我们设置了浮动，会发现一个问题，那就是父级div盒子塌陷了。
5.4、父级边框塌陷的问题
clear:right; 右侧不允许有浮动元素
clear:left; 左侧不允许有浮动元素
clear:both;两侧不允许有浮动元素
clear:none;
解决方案:
1、增加父级元素的高度~
#father {
border:1px #000 solid;
height: 500px;
}
2、增加一个空的div标签，清除浮动
float
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
3、溢出overflow
在父级元素中增加一个overflow: hidden;
overflow: hidden;/*隐藏*/
overflow: scroll;/*出现滚动条*/
代码演示
float
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
4、父类添加一个伪类: after
#father {
border:1px #000 solid;
}
#father:after {/*添加一个伪类盒子*/
content: '';
display: block;
clear: both;
}
代码演示
float
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
小结:
1.浮动元素后面增加空div
? 简单，代码中尽量避免空div
2.设置父元素的高度
? 简单，元素假设有了固定的高度，就会被限制
3.overflow
? 简单，下拉的一些场景避免使用
4.父类添加一个伪类: after (推荐)
写法稍微复杂一-点， 但是没有副作用，推荐使用.
5.5、对比
-
display
方向不可以控制
-
float
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题~
6、定位
6.1、相对定位
position: relative;
-
相对于原来的位置，进行指定的偏移。
-
相对定位的话，它仍然在标准文档流中，原来的位置会被保留（人走了魂还在）
相对定位
第一个盒子
第二个盒子
第三个盒子
小案例
练习
6.2、绝对定位
定位:基于xxx定位，上下左右~
子绝父相
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位,我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移,绝对定位的话，它不在在标准文档流中，原来的位置不会被保留
（人走魂没）
绝对定位
第一个盒子
第二个盒子
第三个盒子
6.3、固定定位fixed
固定定位
div1
div2
6.4、z-index
图层~
z-index:默认是0，最高无限~
z-index