- 学习数据库，找狂神
- 时间：2020.10.1
- 地点：北京
前端样式CSS3
1.什么是CSS
如何学习
- CSS是什么
- CSS怎么用（快速入门）
- CSS选择器（重点+难点）
- 美化网页（文字，阴影，超链接，列表渐变…)
- 盒子模型
- 浮动
- 定位
- 网页动画（特效效果）
cascading style sheet层叠样式表
css：表现（网页美化）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…
2.基本入门
html
Title
我是标题
css
h1{
color: red;
}
css的优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利用SEO，容易被搜索引擎收录
3.CSS的三种导入方式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
h1{
color: green;
}
style>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<h1>标题元素h1>
body>
html>
h1{
color: blue;
}
拓展：外部样式两种写法
- 链接式：
html
<link rel="stylesheet" href="css/style.css">
- 导入式：
@import是CSS2.1特有的！
4.选择器
作用：选择页面上的某一个或者某一类元素
4.1基本选择器
- 标签选择器：选择一类标签 标签{}
Title
学Java
学Java
听狂神说
- 类选择器 class{} 选择所有class属性一致的标签，跨标签
Title
标题1
标题2
标题3
- id选择器：全局唯一！#id名{}
Title
标题1
标题2
标题3
标题4
标题5
优先级：id>class>标签
4.2层次选择器
- 后代选择器：在某个元素后面 祖爷爷 爷爷 爸爸 你
/*后代选择器*/
body p{
background: red;
}
- 子选择器 一代 儿子
/*子选择器*/
body > p{
background: #80206f;
}
- 相邻兄弟选择器
/*相邻兄弟选择器 只有一个 相邻（向下）*/
.active + p{
background: red;
}
-
通用选择器
/*通用选择器 当前元素的所有向下兄弟元素*/ .active ~ p{ background: aqua; }
4.3结构伪类选择器
伪类：条件
/*ul的第一个元素*/
ul li:first-child{
background: #f59972;
}
/*ul的最后一个元素*/
ul li:last-child{
background: #83ff82;
}
/*选中p1,定位到父元素，选中当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是p元素才生效 顺序
*/
p:nth-child(1){
background: red;
}
/*选中父元素下的第二个p元素 类型*/
p:nth-of-type(2){
background: green;
}
a:hover{
background: yellow;
}
4.4属性选择器
Title
"demo"
>
"http://www.baidu.com" class="link item first" id="first">
"" class="link item active" target="_blank" title="test">
"image/123.html" class="link item">
"image/123.png" class="link item">
"image/123.jpg" class="link item">
"abc" class="link item">
"/a.pdf" class="link item">
"/abc.pdf" class="link item">
"abc.doc" class="link item">
"abcd.doc" class="link item">
5.美化网页元素
span标签：重点要突出的字，使用span套起来
Title
欢迎学习java
5.1字体样式
Title
故事介绍
平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在第六代魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块杂牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
I love three things:the sun ,the moon and you.
The sun is for the day ,the moon is for the night
and you forever.
5.2文本样式
- 颜色 color rgb rgba
- 文本对齐的方式 text-align=center
- 首行缩进 text-indent:2em
- 行高 line-height 单行文字上下居中！line-height = height
- 装饰 text-decoration
- 文本图片对齐
Title
12312
12312
12312
故事介绍
平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在第六代魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块杂牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
I love three things:the sun ,the moon and you.
The sun is for the day ,the moon is for the night
and you forever.
你好呀java
5.3超链接伪类和文本阴影
Title
￥99
5.4列表样式
#nav{
width: 300px;
}
.title{
font-size: 20px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background: #f5ca42;
}
/*list-style
none 去掉原点
circle 空心圆
demical 数字
square 正方形
*/
ul{
background: gray;
}
ul li{
height: 30px;
list-style: none;
}
a{
color: #000;
text-decoration: none;
}
a:hover{
color: blue;
text-decoration: underline;
}
5.5背景
背景颜色
背景图片
.title{
font-size: 20px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
/*颜色 图片 图片位置 平铺方式*/
background: #f5ca42 url("../images/1.png") 270px 10px no-repeat;
}
/*list-style
none 去掉原点
circle 空心圆
demical 数字
square 正方形
*/
ul{
background: gray;
}
ul li{
height: 30px;
list-style: none;
background-image: url("../images/1.png");
background-repeat: no-repeat;
background-position: 230px 3px;
}
5.5渐变
background-color: #4158D0;
background-image: linear-gradient(8deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
6.盒子模型
6.1什么是盒子模型
- margin:外边距
- padding:内边距
- border:边框
6.2边框
- 边框的粗细
- 边框的样式
- 边框的颜色
6.3内外边距
盒子的计算方式：你这个元素到底多大？
margin+border+padding+内容
6.4圆角边框
6.5阴影
7.浮动
7.1.标准文档流
块级元素：独占一行
h1~h6 p div 列表......
行内元素：不独占一行
span a img strong......
行内元素可以被包含在块级元素中，反之则不可以
7.2.display
display也是实现行内元素排列的方式，但是我们很多情况都是用float.
7.3.float
div{
margin: 10px;
padding: 5px;
}
#father{
border: black 1px solid;
}
.layer01{
border: 2px dashed #ff0000;
display: inline-block;
float: right;
}
.layer02{
border: 2px dashed #00ff00;
display: inline-block;
float: right;
}
.layer03{
border: 2px dashed #000068;
display: inline-block;
float: right;
}
.layer04{
border: 2px dashed #666;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: right;
}
7.4父级边框塌陷问题
clear
/*clear:right 右侧不允许有浮动元素*/
/*clear:left 左侧不允许有浮动元素*/
/*clear:both 两侧不允许有浮动元素*/
/*clear:none */
解决方案：
-
增加父级元素的高度、
#father{ border: black 1px solid; height: 800px; } -
增加一个空的div标签，清除浮动
.clear{ clear: both; margin: 0; padding: 0; } -
overflow
在父级元素中添加一个 overflow:hidden; -
父类添加一个伪类：after
#father:after{ content: ""; display: block; clear: both; }
小结：
-
浮动元素后面增加空div
简单，代码中尽量避免空div
-
设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
-
overflow
简单，下拉的一些场景避免使用
-
父类添加一个伪类：after(推荐)
写法稍微复杂一点，但是没有副作用，推荐使用
7.5.对比
-
display
方向不可以控制
-
float
浮动起来的话会脱离标准文档流吗，所以要解决父级边框塌陷的问题。
8.定位
8.1.相对定位
Title
第一个盒子
第二个盒子
第三个盒子
相对定位：position: relative
相对于原来的位置，进行指定的偏移，相对定位的话，它依然在标准文档流中。原来的位置会保留。
top:-20px;
left: 10px;
bottom: 100px;
right: 20px;
8.2.绝对定位
定位：基于xxx定位，上下左右
- 没有父级元素定位的前提下，相对于浏览器定位
- 假设父级元素存在定位，我们通常会相对于父级元素进行偏移
- 在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。
Title
第一个盒子
第二个盒子
第三个盒子
8.3.z-index
默认是0，最高无限–999
Title
opacity:0.5;//背景透明度
#content{
width: 300px;
margin:0;
padding: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 2px solid red;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
width: 300px;
height: 25px;
position: absolute;
top:125px;
}
.tipText{
color: white;
text-align: center;
/*z-index:999;*/
}
.tipBg{
background-color: black;
opacity: 0.5;/*背景透明度*/
}
第三个盒子
```
8.3.z-index
默认是0，最高无限–999
Title
- 学习数据库，找狂神
- 时间：2020.10.1
- 地点：北京
opacity:0.5;//背景透明度
#content{
width: 300px;
margin:0;
padding: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 2px solid red;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
width: 300px;
height: 25px;
position: absolute;
top:125px;
}
.tipText{
color: white;
text-align: center;
/*z-index:999;*/
}
.tipBg{
background-color: black;
opacity: 0.5;/*背景透明度*/
}