Web前端—CSS（二）

前言

在介绍css之前我向大家有推荐俩个不错的学习css的网站链接: canvas和菜鸟教程，希望可以帮助大家学习css。

1、美化网页元素

1.1、为什么要美化网页

1、有效的传递页面信息

2、美化网页，页面漂亮，才能吸引用户

3、凸显页面的主题

4、提高用户的体验

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>

1.2、字体样式

font-family: 字体
font-size：字体大小
font-weight: 字体粗细
color ：字体颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--font-family: 字体font-size：  字体大小font-weight: 字体粗细color ： 字体颜色--><style>body{font-family: "Adobe 黑体 Std R";color: #a13d30;}h1{font-size: 30px;}.p1{font-weight: bolder;}</style></head>
<body><h1>故事介绍</h1><p class="p1">腊八节，中国传统节日，俗称“腊八” ，节期在每年农历十二月初八，主要流行于我国北方，这节日的习俗是“喝腊八粥”。腊八是佛教盛大的节日之一，这天是佛祖释迦牟尼成道之日，又称为“法宝节”、“佛成道节”、“成道会”等。“腊八”一词源于南北朝时期，当时又称“腊日”，本为佛教节日，后经历代演变，逐渐成为家喻户晓的民间节日
</p><p>腊八粥，又称“七宝五味粥”、“佛粥”、“大家饭”等，是一种由多样食材熬制而成的粥。腊八粥的最早文字记载在宋代。我国喝腊八粥的历史，已有一千年以上了。每逢腊八这天，不论是朝廷官府、寺院还是黎民百姓家都要做腊八粥。到了清朝，喝腊八粥的风俗更是盛行。
</p><p>Since there’s no help, come let us kiss and part;Nay, I have done, you get no more of me,And I am glad, yea glad with all my heartThat thus so cleanly I myself can free;Shake hands forever, cancel all our vows,And when we meet at any time again,Be it not seen in either of our browsThat we one jot of former love retain.Now at the last gasp of Love’s latest breath,When, his pulse failing, Passion speechless lies,When Faith is kneeling by his bed of death,And Innocence is closing up his eyes,Now if thou wouldst, when all have given him over,From death to life thou mightst him yet recover.
</p></body>
</html>

1.3、文本样式

1、颜色 color rgb rgba

    RGB 0~FRGBA  A：0~1

2、文本对齐的方式 text-align = center text-align : 排版，居中，

3、首行缩进 text-indent: 2em 段落首行缩进

4、行高 line-height： 单行文字上下居中！ line-height = height
行高，和块的高度一致，就可以上下居中。

5、装饰 text-decoration:

6、文本图片水平对齐： vertical-align: middle

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>h1{color: rgba(0,255,255,0.9);text-align: center;}.p1{text-indent: 2em;}.p3{background: #2700ff;height: 300px;line-height: 300px;}/*下划线*/.l1{text-decoration: underline;}/*中划线*/.l2{text-decoration: line-through;}/*上划线*/.l3{text-decoration: overline;}/*超链接去下划线*/a{text-decoration: none;}/*<!--*//*水平对齐~ 参照物，  a，b*//*-->*/img,span{vertical-align: middle;}</style></head>
<body><a href="">123</a><p class="l1">1231231</p>
<p class="l2">1231231</p>
<p class="l3">1231231</p><h1>故事介绍</h1><p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p><p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p><p class="p3">Since there’s no help, come let us kiss and part;Nay, I have done, you get no more of me,And I am glad, yea glad with all my heartThat thus so cleanly I myself can free;Shake hands forever, cancel all our vows,And when we meet at any time again,Be it not seen in either of our browsThat we one jot of former love retain.Now at the last gasp of Love’s latest breath,When, his pulse failing, Passion speechless lies,When Faith is kneeling by his bed of death,And Innocence is closing up his eyes,Now if thou wouldst, when all have given him over,From death to life thou mightst him yet recover.
</p><p><img src="data:images/a.png" alt=""><span>asdasdajsldjalksdjalksd</span>
</p>q
</body>
</html>

1.4、阴影

/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{text-shadow: #3cc7f5 10px -10px 2px;
}

1.5、超链接伪类

正常情况下，a，a:hover

/*默认的颜色*/
a{text-decoration: none;color: #000;
}
/*鼠标悬浮的状态（只需要记住 :hover）*/
a:hover{color: orange;font-size: 50px;
}

1.6、列表

list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
html代码：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>列表样式</title><link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body><div id="nav"><h2 class="title">全部商品分类</h2><ul><li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li><li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li><li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li><li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li><li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li><li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li><li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li><li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li></ul>
</div></body>
</html>

css代码：

#nav{width: 300px;background: #a0a0a0;
}.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;/*  颜色，图片，图片位置，平铺方式  */background: red url("../images/d.gif") 270px 10px no-repeat;
}ul li{height: 30px;list-style: none;text-indent: 1em;background-image: url("../images/r.gif");background-repeat: no-repeat;background-position: 236px 2px;
}a{text-decoration: none;font-size: 14px;color: #000;
}
a:hover{color: orange;text-decoration: underline;
}

1.7、背景

背景颜色

背景图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 1000px;height: 200px;border: 1px solid red;background-image: url("images/tx2.jpg");/*默认是全部平铺的 repeat*/}.div1{background-repeat: repeat-x;}.div2{background-repeat: repeat-y;}.div3{background-repeat: no-repeat;}</style></head>
<body><div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div></body>

1.8、渐变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--径向渐变，圆形渐变--><style>body {/*background-color: #21D4FD;*//*background-color: #21D4FD;*/background-image: linear-gradient(19deg, #21D4FD 0%, #00ff4e 100%);}</style></head>
<body></body>
</html>

2、盒子模型

2.1、什么是盒子模型

margin：外边距

padding：内边距

border：边框

2.2、边框

1、边框的粗细

2、边框的样式

3、边框的颜色

2.3、内外边距

顺时针旋转:
margin:0
margin:0 1px
margin:0 1px 2px 3px
外边距的妙用：居中元素
margin: 0 auto;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--外边距的妙用：居中元素margin: 0 auto;--><style>#box{width: 300px;border: 1px solid red;margin: 0 auto;}/*顺时针旋转margin:0margin:0 1pxmargin:0 1px  2px   3px*/h2{font-size: 16px;background-color: #3cbda6;line-height: 30px;color: white;margin:0 1px 2px 3px;}form{background: #3cbda6;}input{border: 1px solid black;}div:nth-of-type(1){padding: 10px 2px;}</style></head>
<body>
<div id="box"><h2>会员登录</h2><form action="#"><div><span>用户姓名：</span><input type="text"></div><div><span>用户密码：</span><input type="password"></div><div><span>用户邮箱：</span><input type="text"></div></form>
</div></body>
</html>

盒子的计算方式：margin + border + padding + 内容宽度

2.4、圆角边框

4 个角上右上右下左下，顺时针方向
圆圈：圆角 = 半径！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 100px;height: 100px;border: 10px solid red;border-radius: 100px;}</style></head>
<body><div></div></body>
</html>

2.5、盒子阴影

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- margin: 0 auto; 居中
要求： 块元素，块元素有固定的宽度
--><style>img{border-radius: 50px;box-shadow: 10px 10px 100px yellow;}</style></head><body><div style="width: 500px;display: block;text-align: center"><img src="data:images/tx2.jpg" alt=""></div></body></html>

3、浮动

3.1、标准文档流

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MhaJ3yPv-1577772677377)(CSS笔记.assets/1577524378377.png)]

块级元素：独占一行

h1~h6   p  div   列表...

行内元素：不独占一行

span  a  img  strong....

行内元素可以被包含在块级元素中，反之，则不可以~

3.2、display

<!--block 块元素inline 行内元素inline-block  是块元素，但是可以内联，在一行！none
-->
<style>div{width: 100px;height: 100px;border: 1px solid red;display: block;}span{width: 100px;height: 100px;border: 1px solid red;display: inline-block;}
</style>

这个也是一种实现行内元素排列的方式，但是我们很多情况都是用 float

3.3、float

1、左右浮动 float
html代码

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>浮动</title><link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father"><div class="layer01"><img src="data:images/7.jpg" alt=""/></div><div class="layer02"><img src="data:images/8.jpg" alt=""/></div><div class="layer03"><img src="data:images/9.jpg" alt=""/></div><div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。</div>
</div>
</body>
</html>

css代码：

div {margin:10px;padding:5px;
}
#father {border:1px #000 solid;
}.layer01 {border:1px #F00 dashed;display: inline-block;float: left;
}
.layer02 {border:1px #00F dashed;display: inline-block;float: left;
}
.layer03 {border:1px #060 dashed;display: inline-block;float: right;
}
/*
clear: right; 右侧不允许有浮动元素
clear: left;  左侧不允许有浮动元素
clear: both;  两侧不允许有浮动元素
clear: none;
*/
.layer04 {border:1px #666 dashed;font-size:12px;line-height:23px;display: inline-block;float: right;
}

3.4、父级边框塌陷的问题

clear

/*
clear: right; 右侧不允许有浮动元素
clear: left;  左侧不允许有浮动元素
clear: both;  两侧不允许有浮动元素
clear: none;
*/

解决方案：

1、增加父级元素的高度~

#father {border:1px #000 solid;height: 800px;
}

2、增加一个空的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;
}

小结：

浮动元素后面增加空div

简单，代码中尽量避免空div
设置父元素的高度

简单，元素假设有了固定的高度，就会被限制
overflow

简单，下拉的一些场景避免使用
父类添加一个伪类：after（推荐）

写法稍微复杂一点，但是没有副作用，推荐使用！

3.5、对比

display

方向不可以控制
float

浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题~

4、定位

4.1、相对定位

相对定位：position: relative;
相对于原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留

top: -20px;
left: 20px;
bottom: -10px;
right: 20px;

<!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 #666;padding: 0;}#first{background-color: #a13d30;border: 1px dashed #b27530;position: relative; /*相对定位：上下左右*/top: -20px;left: 20px;}#second{background-color: #255099;border: 1px dashed #255066;}#third{background-color: #1c6699;border: 1px dashed #1c6615;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>#box{width: 300px;height: 300px;padding: 10px;border: 2px solid red;}a{width: 100px;height: 100px;text-decoration: none;background: #ffa1f2;line-height: 100px;text-align: center;color: white;display: block;}a:hover{background: #47a4ff;}.a2,.a4{position: relative;left: 200px;top: -100px;}.a5{position: relative;left: 100px;top: -300px;}</style>
</head>
<body><div id="box"><a class="a1" href="#">链接1</a><a class="a2" href="#">链接2</a><a class="a3" href="#">链接3</a><a class="a4" href="#">链接4</a><a class="a5" href="#">链接5</a>
</div></body>
</html>

4.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{border: 1px solid #666;padding: 0;position: relative;}#first{background-color: #a13d30;border: 1px dashed #b27530;}#second{background-color: #255099;border: 1px dashed #255066;position: absolute;left: 100px;}#third{background-color: #1c6699;border: 1px dashed #1c6615;}</style></head>
<body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div></body>
</html>

4.3、固定定位 fixed

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{height: 800px;}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>

4.4、z-index

图层~

z-index：默认是0，最高无限~ 999

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css">
</head>
<body><div id="content"><ul><li><img src="data:images/bg.jpg" alt=""> </li><li class="tipText">好好学习Java</li><li class="tipBg"></li><li>时间：2099-01-01</li><li>地点：月球一号基地</li></ul>
</div></body>
</html>

opacity: 0.5; /背景透明度/

#content{width: 380px;padding: 0px;margin: 0px;overflow: hidden;font-size: 12px;line-height: 25px;border: 1px #000 solid;
}
ul,li{padding: 0px;margin: 0px;list-style: none;
}
/*父级元素相对定位*/
#content ul{position: relative;
}
.tipText, .tipBg{position: absolute;width: 380px;height: 25px;top: 216px;
}
.tipText{color: white;/*z-index: 0;*/
}
.tipBg{background: #000;opacity: 0.5; /*背景透明度*/filter: Alpha(opacity=50);
}