CSS基础02
美化网页元素
为什么要美化网页元素
- 有效的传递页面信息
- 美化网页，页面够漂亮，才能吸引用户
- 凸显页面主题
- 提高用户体验
span标签
--> 重点要突出的字，使用span套起来
span标签是约定俗成的
换成其他的标签名字也行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span标签</title>
<style>
#title{
font-size: 50px;
}
</style>
</head>
<body>
小刘同学，你将开启你的 <span id="title">java</span> 修仙学习之旅
</body>
</html>
字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式学习</title>
<!--
font-family : 字体格式
font-size : 字体大小
font-weight : 字体粗细
color : 字体颜色
-->
<style>
body{
font-family: "Arial Black",楷体;
color: gray;
}
h1{
font-size: 50px; //大小
font-size: 2em; //缩进
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>故事简介</h1>
<p class = "p1">五一回家 吃肉丸 吃烤肉</p>
<p>但是要继续java修仙传</p>
<p>I Love study Java language</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体风格</title>
/*字体风格--> 字体样式(斜体) 粗细 大小 字体种类 */
<style>
p{
font: oblique bold 20px "楷体";
}
</style>
</head>
<body>
<p>
小刘学Java--> Java修仙传
</p>
</body>
</html>
文本样式
- 颜色 color rgb rgba
- 文本对齐方式 text-align = center;
- 首行缩进 text-indent: 2em;
- 行高 line-height: 单行文字上下居中 --> line-height = height
- 装饰 text-decoration
- 文本图片水平对齐：vertical-align: middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<!-- 颜色 color
1. 直接用单词表示
2. RGB表示 0-F 16进制
3. RGBA表示 A: 透明度 0~1
排版 text-align: 居中，靠左，靠右
段落首行缩进 text-indent: 2em
行高 和 块的高度一样 就可以实现上下居中
水平对齐: 参照物 参照物是两个物体 是a跟b对齐 a,b
-->
<style>
h1{
color: #47ff73;
color: rgb(100,100,100);
color: rgba(200,200,200,0.9);
text-align: center;
}
.p1{
font: oblique bolder 30px "楷体";
text-indent: 10em;
text-align: left;
}
.p2{
font-family: 楷体;
font-weight: 10;
font-size: 20px;
font-language-override: inherit;
text-indent: 2em;
}
.p3{
background: gray;
height: 100px;
line-height: 100px;
}
/*下划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
/*a标签 也叫超链接 记得去下划线*/
a{
text-decoration: none;
}
/*水平对齐: 参照物 参照物是两个物体 是a跟b对齐 a,b*/
.p4 img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<a href="">2333</a>
<p class="l1">123</p>
<p class="l2">123</p>
<p class="l3">123</p>
<h1>神秘复苏--> </h1>
<p class="p1">杨间（杨戬）</p>
<p class="p2">总部十二位队长之一，代号“鬼眼”，大昌市第四任负责人，总部的执法队长（十二队长之首）。</p>
<p class="p3">在鬼敲门事件中意外驾驭鬼眼，成为驭鬼者，带着张伟在内的六名同学逃出。在黄岗村事件中驾驭无头鬼影。
饿死鬼事件中听从人皮纸的建议造成无头鬼影的死机。解决饿死鬼事件后前往大京市的途中解决鬼掐人事件。
在大京市鬼差事件中驾驭鬼手。由于朋友圈一战中总部的态度导致其与总部关系冷淡。
鬼邮局明月小区送信事件中找到了无头鬼影的头，鬼影完整后侥幸依靠敌人的鬼喊人占据了鬼影的主导思维地位，成为异类。
参与S级鬼湖事件时被鬼湖驾驭沈林入侵记忆，结果鬼湖的一部分灵异力量被寄存在自己记忆中的鬼梦撕碎，因此鬼湖有四成力量被主角所掌握。
在幽灵船事件中驾驭一半鬼公交。自身对灵异事件的直觉十分强大。
</p>
<p class="p4">
<img src="images/img.png" alt="">
<span>小刘学Java--> Java修仙传</span>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
水平对齐: 参照物 参照物是两个物体 是a跟b对齐 a,b
-->
<style>
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="images/img.png" alt="">
<span>小刘学Java--> Java修仙传</span>
</p>
</body>
</html>
阴影text-shadow
/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
#price{
text-shadow:orange 10px 10px 2px;
}
超链接伪类
正常情况下只用记住--> a，a:hover
/*默认颜色*/
a{
text-decoration: none;
color: black;
}
/*鼠标悬停的状态*/
a:hover{
color: orange;
font-size: 50px;
}
列表
ul li{
height: 30px;
list-style: none; //列表样式
text-indent: 2em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<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> <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></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><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></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</li>
</ul>
</div>
</body>
</html>
#nav{
width: 300px;
}
.title{
font-size: 20px;
text-indent: 2em;
line-height: 30px;
background: red;
}
ul{
background: gray;
}
/* list-style: -->
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
ul li{
height: 30px;
list-style: none; //列表样式
text-indent: 2em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
背景
背景图片
<style>
div{
width: 1000px;
height: 700px;
/*边框粗细 边框样式(实线,虚线) 边框颜色*/
border: 1px solid red;
background-image: url("images/tx.png");
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
练习
.title{
font-size: 20px;
text-indent: 2em;
line-height: 30px;
/*颜色,图片,图片位置(xpx,ypx),平铺方式*/
background: red url("../images/→.png") 244px -8px no-repeat;
}
ul li{
height: 30px;
list-style: none; //列表样式
text-indent: 2em;
background-image: url("../images/→.png");
background-repeat: no-repeat;
background-position: 210px -4px;
}
渐变
<style>
body{
background-image: linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);
}
</style>
盒子模型
什么是盒子模型
- margin --> 外边距
- padding --> 内边距
- border --> 边框
边框
--> 边框的粗细
--> 边框的样式
--> 边框的颜色
/*border: 边框 --> 粗细 样式 颜色*/
#box{
width: 300px;
border: 1px solid red;
border-width: 1px;
border-style: solid;
border-color: red;
}
内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
<!--外边距的妙用: 居中元素
margin: 0 auto
-->
<style>
/*border: 边框 --> 粗细 样式 颜色*/
#box{
width: 300px;
border: 1px solid red;
/*外边距的妙用: 居中元素*/
margin: 0 auto;
}
h2{
/*margin外边距
默认顺时针方向设置
margin: 0; 上下左右全为0
margin: 0 1px; 上下为0 左右为1
margin: 0 1px 2px 3px 顺时针方向
*/
font-size: 16px;
background-color: yellowgreen ;
line-height: 30px;
color: red;
margin: 0 1px;
}
form{
background: #21D4FD;
}
input{
border: 1px solid black;
}
/*内边距*/
div:nth-of-type(1){
padding: 10px 5px;
}
</style>
</head>
<body>
<div id = "box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名: </span>
<input type="text">
</div>
<div>
<span>密码: </span>
<input type="text">
</div>
<div>
<span>邮箱: </span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
盒子模型的计算方式 : 你这个元素到底有多大?
margin + border + padding + 内容 = 50*50px
圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角边框</title>
<style>
div{
width: 400px;
height: 200px;
border: 10px solid red;
/*左上 右下 右上 左下
圆圈 --> 圆角数值 = 半径 但是要是正方形
*/
border-radius: 200px 200px 0 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.圆形拓展</title>
</head>
<style>
div{
width: 200px;
height: 100px;
border: 1px solid yellowgreen;
border-radius: 100px 100px 0 0;
}
img{
border-radius: 25px;
}
</style>
<body>
<div></div>
<img src="images/tx.png" alt="">
</body>
</html>
盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阴影</title>
<style>
img{
border-radius: 25px;
box-shadow: 10px 10px 100px yellowgreen;
}
</style>
</head>
<body>
<div style = "width: 1500px;display: block;text-align: center">
<img src="images/tx.png" alt="">
</div>
</body>
</html>
浮动
标准文档流
块级元素 --> 独占一行
h1~h6 p div 列表...
行内元素 --> 不独占一行
span a img strong...
行内元素可以被包含在块级元素种, 反之不行
display
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: block;
}
/*block 块元素
inline 行内元素
inline-block 是块元素, 但是可以内联,在一行
none
*/
span{
width: 100px;
height: 100px;
border: 1px solid yellowgreen;
display: inline-block;
}
</style>
这个也是一种实现行内元素排列的方式, 但是我们很多情况下都是用float
float
左右浮动 --> float
div{
margin: 10px;
padding: 5px;
}
#father {
border: 1px #000 solid;
}
.layer01 {
border: 1px #F00 dashed;
display: inline-block;
float: left;
clear: both;
}
.layer02 {
border: 1px #00F dashed;
display: inline-block;
float: left;
clear: both;
}
.layer03 {
border: 1px #060 dashed;
display: inline-block;
float: left;
clear: both;
}
.layer04 {
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: left;
clear: both;
}
父级边框塌陷问题
clear -->
/*
clear: right 右侧不允许有浮动元素
clear: left 左侧不允许有浮动元素
clear: both 两侧不允许有浮动元素
*/
.layer04 {
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: left;
clear: both;
}
解决方案
- 增加父级元素的高度
#father {
border: 1px #000 solid;
height: 800px;
}
- 增加一个空的div标签, 清除div浮动, margin外边距 padding 内边距设置为0
<div class="clear"></div>
.clear {
clear: both;
margin: 0;
padding: 0;
}
- overflow --> 滚动条
1. 在父级元素中增加一个 overflow: hidden;
- 在父类添加一个伪类: after
#father {
border: 1px #000 solid;
/*增加父级元素高度
height: 800px;*/
/*overflow --> 滚动条
overflow: hidden;*/
}
/*在父类后面添加一个伪类:after*/
#father:after {
content: '';
display: block;
clear: both;
}
小结 -->
- 浮动元素后面增加一个空的div
简单 但是代码中要尽量避免空的div
- 设置父元素的高度
简单 元素假设有了固定高度 就会被限制
- overflow
简单 下拉的一些场景避免使用
- 在父类后面添加一个伪类:after --> 推荐
写法稍微复杂 但是没有副作用
浙公网安备 33010602011771号