1. span标签
没什么用 只是个名字 选中一段可以用
<body> 欢迎学习 <span id="title1">java</span> </body>
2. 字体样式
font-family：字体样式
font-size：字体大小
font-weight：字体粗细
color：字体颜色
统一格式：font：oblique（斜体）bold（粗体）大小 样式
1 <!--
2 font-family：字体样式
3 font-size：字体大小
4 font-weight:字体粗细
5 -->
6 <style>
7
8 body{
9 font-family: "Adobe Devanagari",隶书;
10 color: brown;
11 }
12 h1{
13 font-size: 30px;
14 }
15 .p1{
16 font-weight: bold;
17 }
18
19 </style>
1 <body> 2 <h1>贾斯汀·比伯（Justin Bieber）</h1> 3 <p class="p1"> 4 1994年3月1日出生于加拿大安大略省斯特拉特福市 5 </p> 6 <p> 7 加拿大流行乐男歌手、影视演员 8 </p> 9 10 <p> 11 What do you mean? Ooh <br> 12 When you nod your head yes <br> 13 But you wanna say no <br> 14 What do you mean? Hey <br> 15 When you don't want me to move <br> 16 But you tell me to go <br> 17 What do you mean? <br> 18 Oh, what do you mean? <br> 19 </p> 20 </body>
3.文本样式
颜色：
color：1. rgb 2. rgba（透明度）
排版：
text - align：center 文本居中（left right）左右
text - indent：2em 首行缩进（em文字大小 px像素大小）
行高和块的高度一致才可以上下居中
height 和 line - height
h1{
color: rgba(0,255,255,0.5);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: bisque;
height: 30px;
line-height: 30px;
}
上划线 overline 中划线 line - through 下划线 underline
/*上划线 overline，中划线 line-through，下划线 underline*/
.l1{
text-decoration: underline;
}
.l2{
text-decoration: line-through;
}
.l3{
text-decoration: overline;
}
a标签去下划线 text - decoration：none
/* a标签去下划线 */
a{
text-decoration: none;
}
图片和文字水平对齐
需要将两个元素设为互相参照物
可以用span标签
/* 水平对齐：参照物：a，b*/
img,span{
vertical-align: middle;
}
总代码：
1 <body> 2 <a href="">111222333</a> 3 <p class="l1">123123</p> 4 <p class="l2">123123</p> 5 <p class="l3">123123</p> 6 <h1>贾斯汀·比伯（Justin Bieber）</h1> 7 <p class="p1"> 8 1994年3月1日出生于加拿大安大略省斯特拉特福市 9 </p> 10 <p> 11 加拿大流行乐男歌手、影视演员 12 </p> 13 14 <p class="p3"> 15 What do you mean? Ooh <br> 16 When you nod your head yes <br> 17 But you wanna say no <br> 18 What do you mean? Hey <br> 19 When you don't want me to move <br> 20 But you tell me to go <br> 21 What do you mean? <br> 22 Oh, what do you mean? <br> 23 </p> 24 <p> 25 <img src="image/a.png" alt=""> 26 <span>love</span> 27 </p> 28 </body>
4. 超链接伪类
鼠标悬浮显示的颜色：hover
a:hover{
color：
}
/*鼠标悬浮的颜色*/
a:hover{
color: orange;
}
鼠标摁住但不点开的颜色
a:active{
color：
}
/*鼠标摁住但不点开的颜色*/
a:active{
color: greenyellow;
}
偏移阴影：
text-shadow：阴影颜色，水平偏移，垂直偏移，偏移半径
/*text-shadow:阴影颜色，水平偏移，垂直偏移，偏移半径*/
#people{
text-shadow: #3cc7f5 10px 10px 2px;
}
总代码：
<style>
/*默认的颜色*/
a{
text-decoration: none;
color: black;
}
/*鼠标悬浮的颜色*/
a:hover{
color: orange;
}
/*鼠标摁住但不点开的颜色*/
a:active{
color: greenyellow;
}
/*text-shadow:阴影颜色，水平偏移，垂直偏移，偏移半径*/
#people{
text-shadow: #3cc7f5 10px 10px 2px;
}
</style>
</head>
<body>
<a href="#">
<img src="../6.%20背景/image/a.png" alt="">
</a>
<p>
<a href="#">斋藤飞鸟</a>
</p>
<p>
<a href="">来自：日本</a>
</p>
<p id="people">
loved:999+
</p>
</body>
5.列表
首先创建ul-li列表
<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>
通过css文件对文字进行更改
background参数：颜色 图片 图片位置 平铺方式（默认是横铺）
.title{
font-size: 18px;
font-weight: bold;
text-indent: 3em;
line-height: 35px;
background: antiquewhite;
/*颜色，图片，图片位置，平铺方式*/
background: antiquewhite url("../image/2.PNG") 220px -3px no-repeat;
}
列表样式：
list-style：none：去掉圆点， circle：空心圆， decimal：数字形式显示， square：正方形形式显示
总代码：
#nav{
width: 250px;
background: aliceblue
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 3em;
line-height: 35px;
background: antiquewhite;
/*颜色，图片，图片位置，平铺方式*/
background: antiquewhite url("../image/2.PNG") 220px -3px no-repeat;
}
/*ul li*/
/*
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
background: aliceblue;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background: aliceblue url("../image/1.PNG") 180px -3px no-repeat;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
6. 背景
默认图片背景全部平铺
background-repeat: no-repeat不平铺
repeat-x横铺
repeat-y竖铺
总代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7
8 div{
9 width: 1000px;
10 height: 700px;
11 border: 1px solid red;
12 background-image: url("image/a.png") ;
13 /*默认全部平铺*/
14
15 }
16 .div1{
17 background-repeat: no-repeat ;
18 }
19 .div2{
20 background-repeat: repeat-x ;
21 }
22 .div3{
23 background-repeat: repeat-y ;
24 }
25 </style>
26 </head>
27 <body>
28
29 <div class="div1"></div>
30 <div class="div2"></div>
31 <div class="div3"></div>
32
33
34
35 </body>
36 </html>
7. 渐变
在网站上可以设置渐变格式
复制渐变代码
<style>
/*径向渐变 圆形渐变*/
body{
background-image: linear-gradient(323deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
</style>
标签：repeat,day28,color,text,细节,偏移,background,格式,font From： https://www.cnblogs.com/GUGUZIZI/p/16901265.html