这篇博客介绍了HTML和CSS的基础知识，包括span标签的使用，文字样式的设定（如字体、颜色、粗细等），文本样式的调整（如对齐、缩进、行高）以及超链接的伪类状态（link、visited、hover、active）。文章通过实例展示了如何改变文本的视觉效果和交互体验，同时讲解了列表样式和背景设置，以及渐变背景的实现。内容适合初学者掌握网页基本元素的样式控制。
1.span标签
div:行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#a{
font-size:50px;
}
</style>
</head>
<body>
<div>
</div>
欢迎学习 <span id="a">Java</span>
</body>
</html>
2.文字样式
font:oblique bolder 12px “楷体”;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family:字体
font-size:大小
font-weight:粗细
color:字体颜色
-->
<style>
body{
font-family:"Arial Black",楷体;/*针对中英文*/
color:yellow;
}
h1{
font-size:50px;/*50em 缩进*/
}
.p1{
font-weight:bold;/*最高900*/
}
/*上中下划线
去除下划线text-decoration:none;
(引用范围,a标签默认有下划线)
*/
.l1{
text-decoration:underline;
}
.l2{
text-decoration:line-through;
}
.l3{
text-decoration:overline;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<a href="">123</a>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>
<h1 >故事介绍</h1>
<p class="p1">这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p>
<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。 [1]
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--字体风格-->
<style>
p{
font:oblique bolder 12px "楷体";
}
</style>
</head>
<body>
<p>
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。 [1]
</p>
</body>
</html>
3.文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>\
<!--
颜色:
1.单词
2.RGB 0-F #000000
3.RGBA rgb（0,255,255）rgba(0,255,255,0.5) A透明度
排版:
text-align:right,left,center
text-indent:2em/px; 缩进
background
line-height=height 行高和块(div)的高度相同才可让文本居中->单行文字上下居中
vertical-align:middle; 文本图片水平对齐:参照物
-->
<style>
h1{
color:rgb(0,255,255,0.9);
text-align:center;
}
.p1{
text-indent:2em;
}
.p3{
background:yellow;
height:300px;
line-height:300px; /*行高和块(div)的高度相同才可让文本居中*/
}
/*文本图片水平对齐:参照物 a,b*/
img,span{
vertical-align:middle;
}
</style>
</head>
<body>
<h1 >故事介绍</h1>
<p class="p1">这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p>
<p class="p3">在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。 [1]
</p>
<p>
<img src="images/2.jpg" alt="">
<span>sl;dfghefka</span>
</p>
</body>
</html>
4.超链接伪类
详解
:link(初)，:visited(访问过)，:hover(悬停)，:active(点击时)，而且需要按照这个顺序设置，有个简单的记法是，取首字母组成 love hate，记住“爱恨”就行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- a:link{-->
<!-- color:yellow;-->
<!-- }-->
/*默认的颜色*/
a{
text-decoration:none;
color:black;
}
/*鼠标悬浮的效果 ->只需要记住*/
a:hover{
color:orange;
}
/*鼠标按住未释放的状态*/
a:active{
color:green;
font-size:50px;
}
/*visited:已访问完的,会覆盖hover和active link:未访问的*/
<!-- a:visited{-->
<!-- color:blue;-->
<!-- text-shadow:颜色 水平偏移 垂直偏移 阴影半径 }-->
#price{
text-shadow:blue 10px 10px 2px;
}
</style>
</head>
<body>
<a href="#">
<img src="images/1.jpg" alt="">
</a>
<p>
<a href="#">码出高效,Java开发手册</a>
</p>
<p>
<a href="">作者:古井</a>
</p>
<p id="price">
$99
</p>
</body>
</html>
5.列表
list-style:none ->去掉原点
list-style:cycle ->空心圆
list-style:decimal ->数字
list-style:square ->正方形
/颜色 图片 图片位置 平铺方式/
background:red url("../images/1.png") 260px 10px no-repeat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.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>
</ul>
</div>
</body>
</html>
#nav{
width:300px;
background: #bda483;
}
.title{
font-size:18px;
font-weight:bold;
text-indent:1em;
line-height:35px;
/*颜色 图片 图片位置 平铺方式*/
background:red url("../images/1.png") 260px 10px no-repeat ;
}
/*
list-style:none ->去掉原点
list-style:cycle ->空心圆
list-style:decimal ->数字
list-style:square ->正方形
*/
/*ul{
background:#a0a0a0;
}*/
ul li{
line-height:30px;
list-style:none;
text-indent:1em;
background-image: url("../images/2.png");
background-repeat: no-repeat;
background-position: 220px 10px;
}
a{
text-decoration:none;
font-size:14px;
color:black;
}
a:hover{
color:orange;
}
6.背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>/* 1920*1080 */
div{
width:1000px;
height:700px;
border:1px solid red;
background-image:url("images/1.png");
/*默认是全部平铺的*/
.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>
</html>
7.渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--径向渐变 圆形渐变-->
<style>
body{
background-color: #8EC5FC;
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}
</style>
</head>
<body>
</body>
</html>
扫一扫
1064
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
