【前端】CSS3学习笔记（二）——美化网页元素
✨课程链接
【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili
✨学习笔记
span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#title1{
font-size: 30px;
color: red;
}
</style>
<body>
普通内容<span id="title1">被凸显的内容</span>
</body>
</html>
字体样式
<!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: gray;
}
h1{
font-size: 50px;
font-size: 2em;
}
.p1{
font-weight: bolder;
/* font-weight: lighter; */
}
</style>
</head>
<body>
<h1>CSS</h1>
<p class="p1">层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
<p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
<p>Stray birds of summer come to my window to sing and fly away. And yellow leaves of autumn, which have no songs, flutter and fall there with a sigh.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 字体风格 -->
<style>
p{
font:oblique lighter 30px "楷体";
}
</style>
</head>
<body>
<p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</body>
</html>
文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 颜色：
单词
RGB 0~F
#000000
#FF0000 红
#00FF00 绿
#0000FF 蓝
#FFFFFF
rgb(0,255,255)
RGBA
a 0~1
text-align: center 排版(文本居中)
text-indent: 2em; 段落首行缩进
行高 和 块 高度一致 单行文字上下居中
height: 100px;
line-height: 100px;
-->
<style>
h1{
/* color:#0000FF; */
color: rgba(0,255,255,0.5);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: cornsilk;
height: 100px;
line-height: 100px;
}
/* 下划线 */
.l1{
text-decoration: underline;
}
/* 中划线 */
.l2{
text-decoration: line-through;
}
/* 上划线 */
.l3{
text-decoration: overline;
}
/* 超链接去下划线 */
a{
text-decoration: none;
}
/* 文本图片水平对齐 */
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<a href="">去掉下划线</a>
<p class="l1">111</p>
<p class="l2">111</p>
<p class="l3">111</p>
<h1>CSS</h1>
<p class="p1">层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
<p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
<p class="p3">Stray birds of summer come to my window to sing and fly away. And yellow leaves of autumn, which have no songs, flutter and fall there with a sigh.</p>
<br>
<hr>
<br>
<p>
<img src="images/demo.png" alt="">
<span>被居中的字体</span>
</p>
</body>
</html>
超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 默认颜色 */
a{
text-decoration: none;
color: black;
}
/* 选择所有未被访问的链接 */
a:link{
color: brown;
}
/* 选择所有已访问的链接 */
a:visited{
color: red;
}
/* 选择鼠标悬停其上的链接 （需要记住）*/
a:hover{
color: orange;
font-size: 20px;
}
/* 选择活动的链接 */
a:active{
color: green;
}
/* 水平阴影 垂直阴影 模糊的距离 阴影的颜色 */
#price{
text-shadow: 10px -5px 2px blue;
}
</style>
</head>
<body>
<a href="#">
<img src="images/demo.jpg" alt="">
</a>
<p>
<a href="#">码出高效：Java开发手册</a>
</p>
<p>
<a href="">作者：孤尽</a>
</p>
<p id="price">
￥99.00
</p>
</body>
</html>
列表
#nav{
width: 300px;
background: gray;
}
.title{
font-size: 20px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
/*颜色 图片 图片位置 平铺方式*/
background: red url("../images/箭头-向下.png") 260px no-repeat;
}
/* list-style
none 去掉原点
circle 空心圆
decimal 数字
square 正方形 */
ul{
background: gray;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../images/箭头-向右.png");
background-repeat: no-repeat;
background-position: 220px 2px;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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>
</ul>
</div>
</body>
</html>
背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
/* 默认全部平铺 */
background-image: url("images/demo.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>
渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 径向渐变 圆形渐变 -->
<!-- https://www.grabient.com/ -->
<style>
body{
/*background-color: #4158D0;*/
/*background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);*/
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
</style>
</head>
<body>
</body>
</html>
⭐转载请注明出处
本文作者：双份浓缩馥芮白
原文链接：https://www.cnblogs.com/Flat-White/p/14966632.html
版权所有，如需转载请注明出处。
