CSS的学习
1.1什么是CSS
Cascading Style Sheets—>层叠级联样式表
如字体、颜色等
1.2CSS发展史
CSS1.0
CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1：浮动，定位
CSS3.0：圆角边框，阴影，动画……，浏览器兼容性~
⬆联系格式
1.3快速入门
style
基本入门
建议使用下面这种规范
css的优势：
-
内容和表现分离
-
网页结构表现统一，可以实现复用
-
样式十分丰富
-
建议使用独立于html的css文件
-
利于SEO，容易被搜索引擎收录！
1.4CSS的三种导入方式
拓展：外部样式两种写法
-
导入式：
@inport是CSS 2.1特有的
<!-- 导入式 -->
<style>
@import url("style.css");
</style> -
链接式
<!-- 外部样式 -->
<link rel="stylesheet" href="style.css">
2.选择器
作用：选择页面上的某一个或者某一类元素
2.1基本选择器
-
标签选择器：选择一类标签 标签{}
-
类选择器 class：选择所有class属性一致的标签，跨标签。.类名{}
-
ID选择器：全局唯一！#id名{}
2.2层次选择器
-
后代选择器：在某个元素的后面的所有元素 （祖爷爷 爷爷 爸爸 你）
/*后代选择器*/
body p{
background: red;
} -
子选择器:下一代
/*子选择器*/ body>p{ background: bisque; } -
相邻兄弟选择器：同辈（只有一个且对下不对上，用.class+来实现）
/*相邻兄弟选择器*/ .abc + p{ background: blue; } -
通用选择器：同辈，对下且全对，用.class~实习
/*通用选择器*/ .abc~p{ background: blueviolet; }
2.3测试伪类选择器
/*ul的第一个子元素*/
ul li:first-child{
background: blueviolet;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: #e2ba2b;
}
/*选择当前p元素的父级元素，选中父级元素的第n个子元素，并且该子元素是同样的p元素才生效*/
p:nth-child(2){
background: red;
}
/*选中父级元素，下的第n个相同的元素类型的元素生效*/
p:nth-of-type(2){
background: #cf16d5;
}
2.4属性选择器（常用）
=：绝对等于
*=：通配
^=:以规定内容开头的
&=:以规定内容结尾的
/*选择存在id属性的元素*/
a[id]{
background: red;
}
/*选择id属性值为123的元素*/
a[id="123"]{
background: #23d9cc;
}
/*选择存在class属性的元素*/
a[class]{
background: greenyellow;
}
/*选择class中有links的元素*/
a[class*="links"]{
background: yellow;
}
/*选择href中以http开头的元素*/
a[href^=http]{
background: pink;
}
/*选择href中以jpg结尾的元素*/
a[href&=jpg]{
background:gray;
}
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字体样式
<!--
/*font-family:字体*/
/*font-size:字体大小*/
/*font-weight：字体粗细*/
/*color：字体颜色*/
/*最好直接用一个font全部带走*/
-->
body{
font-family: 楷体,"Agency FB";
font-size: 25px;
font-weight: bold;
color: #e2ba2b;
}
h1{
font-size: 80px;
}
3.3文本样式
-
颜色
-
文本对齐的方式
-
首行缩进
-
行高
-
装饰（如下划线）
-
文本图片水平对齐：vertical-align：middle
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 颜色：RGBA，A代表透明度 text-align：排班，有左中右可选 text-indent:2em 缩进规格 height：300px； line-height300px； 行高，和块的高度一致，就可以上下居中 --> <style> h1{ color: rgba(0,255,255,0.9); text-align: center; } .p1{ text-indent: 2em; } .p3{ background: blue; height: 300px; line-height: 300px; } .L1{ text-decoration: underline;/*下划线*/ } .L2{ text-decoration: line-through;/*中划线*/ } .L3{ text-decoration: overline;/*上划线*/ } a{ text-decoration:none;/*超链接去下划线*/ } </style> </head> <body> <a href="https://www.baidu.com">123</a> <p class="L1">123213</p> <p class="L2">123123</p> <p class="L3">123456</p> <h1>故事介绍</h1> <p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。 <p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。</p> </p> <p class="p3"> For years I had been searching,</p> </body> </html>
3.4阴影
/*text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
#price{
text-shadow: #23d9cc 10px 10px 2px;
}
3.5超链接伪类
正常情况下，只需要用到，a，a：hover
/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮的颜色(只需要记住这个：hover)*/
a:hover{
color:orange;
}
3.6列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav id="nav1">
<h2 class="title1">商品选择</h2>
<ul>
<li><a href="#">书包</a> <a href="#">水杯</a> <a href="#">电脑</a> </li>
<li><a href="#">纸巾</a> <a href="#">充电宝</a> <a href="#">口香糖</a> </li>
<li><a href="#">口罩</a> <a href="#">手机</a> <a href="#">平板</a> </li>
</ul>
</nav>
</body>
</html>
#nav1{
background: aqua;
width: 500px;
}
.title1{
background: red;
font-size: 50px;
font-weight: bold;
}
ul{
background: aqua;
}
ul li{
list-style: none;
height: 40px;
}
a{
text-decoration: none;
color: black;
}
a:hover{
color: #e2ba2b;
}
效果图：
3.7背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/tx.jpg");
}
.div2{
background-repeat:repeat-x;/*由左向右平铺*/
}
.div3{
background-repeat:repeat-y;/*由上到下平铺*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
效果图：
练习：在列表的基础上添加箭头
#nav1{
background: aqua;
width: 500px;
}
.title1{
font-size: 50px;
font-weight: bold;
/*颜色、图片、图片位置、平铺方式*/
background: red url("../images/下箭头.jpg") 450px 20px no-repeat;
}
ul{
background: aqua;
}
ul li{
list-style: none;
height: 40px;
background-image: url("../images/右箭头.jpg");
background-repeat: no-repeat;
background-position: 410px -3px ;
}
a{
text-decoration: none;
color: black;
}
a:hover{
color: #e2ba2b;
}
效果图：
3.8渐变
background-color:#FFFFFF; background-image:linear-gradient(19deg,#21D4FD 0%, #21ff37 100%) ;
4盒子模型
4.1盒子模型
margin：外边距
padding：内边距
border：边框
4.2边框
-
边框的粗细
-
边框的样式
-
边框的颜色
4.3内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外边距的妙用，居中元素 -->
<style>
body{
margin: 0;
}
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
h2{
background-color: palevioletred;
line-height: 30px;
margin: 0px;
text-align: center;
color: #e7d50c;
}
form{
background: palevioletred;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
padding: 5px 6px;/*内边距设置为上下5，左右6*/
}
</style>
</head>
<body>
<div id="box">
<h2>登录</h2>
<form>
<div>
<span>账号
<input type="text">
</span>
</div>
<div>
<span>密码
<input type="text">
</span>
</div>
</form>
</div>
</body>
</html>
盒子的计算方式：你这个元素到底多大？
margin+border+padding+内容宽度
4.4圆角边框
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50px 10px ;/*前面数据为主对角线，后面为次对角线*/
/*想变成圆圈的话，只需使圆角=边长*/
}
</style>
4.5盒子阴影
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow: 10px 10px 200px yellow;/*左偏移，右偏移，模糊半径，颜色*/
}
</style>
效果：
5.浮动
5.1块元素与行内元素
块级元素（block）：独占一行（h1~h6、p、div、列表……）
行内元素（inline）：不独占一行（span、a、img、strong……）
<!-- block块元素 --> <!-- inline行内元素 --> <!-- inline-block 保持块元素的特性，但是可以内联，放在一行 --> <!-- none 消失 -->
行内元素可以被包含在块级元素中，反之，则不可以
5.2display
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: none;
}
</style>
1.这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float
5.3float
1.左右浮动float
5.4父级边框塌陷的问题
clear
/* clear:right;右侧不允许有浮动元素 clear:left;左侧不允许有浮动元素 clear:both;两侧不允许有浮动元素 clear:none; */
解决方案：
-
增加父级元素的高度~
-
增加一个空的div标签，清除浮动
<div class="clear"></div> .clear{ clear:both; margin:0; padding:0 }
3.overflow
在父级元素中增加一个 overflow：hidden;
4.父类添加一个伪类：after
#father:after{
content:'';
display:block;
clear:both;
}
小结：
1.浮动元素后面增加空的div
简单，但是代码中空的div不太好
2.设置父元素的高度
简单，但是假设新增的元素超过了设置的高度就被限制了
3.overflow
简单，但是下拉的一些场景应当尽量避免使用，会使网页边难看
4.父类添加一个伪类：after（推荐使用）
没有副作用，推荐使用
5.5对比
-
display
方向不可控制，不需要管父级边框塌陷的问题
-
float
方向可控，需要解决父级边框塌陷的问题
6.定位
6.1相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--相对于自己原来的位置进行偏移~-->
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
padding: 0;
border:1px solid #d75c5c;
}
#first{
background-color:#234199 ;
border:1px dashed #23417d;
position: relative;/*相对定位：上下左右*/
top: -20px;
left:20px;/*是相对于左边位移了（远离）20px，注意不是往左边走了20px*/
}
#second{
background-color: #1ebd99;
border:1px dashed #1ebd73;
}
#third{
background-color: #ce9b99;
border:1px dashed #ce9b17;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
相对定位：
position:relative;
相对于原来的位置进行指定的偏移，相对定位的话，它仍然在标准文档中，原来的位置会被保留，不会造城父级边框塌陷。
6.2绝对定位
定位：基于XXX定位，上下左右~
1.没有父级元素定位的前提下，相对于浏览器定位
2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3.在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
padding: 0;
border:1px solid #d75c5c;
position: relative;
}
#first{
background-color:#234199 ;
border:1px dashed #23417d;
}
#second{
background-color: #1ebd99;
border:1px dashed #1ebd73;
position: absolute;
}
#third{
background-color: #ce9b99;
border:1px dashed #ce9b17;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
6.3 固定定位
<!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: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){/*fixed浏览器导航栏必用，无论怎么滑滚动条，永远定位在你面前*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
6.4 z-index
图层~
z-index：默认是0，最高无限~999
#content{
width: 880px;
font-size: 12px;
line-height: 25px;
border: 1px #000 solid;
padding:0px;
margin: 0px;
overflow: hidden;
}
ul,li{
padding:0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位先*/
ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 880px;
height: 25px;
top: 362px;
}
.tipText{
color: black;
z-index: 999;
}
.tipBg{
background: #e7cb1a;
opacity: 0.5;/*背景透明度*/
}
浙公网安备 33010602011771号