1. Why the web beautification
- Effective delivery page information
- Beautify the page, the page pretty, in order to attract users
- Highlighting the theme of the page
- Improve the user experience
span Tags: words to be focused, using the span set up
<!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>
2. Font Style
<!--
font-family: 字体
font-size： 字体大小
font-weight: 字体粗细
color ： 字体颜色
-->
<style>
body{
font-family: "Arial Black", 楷体;
color: #a13d30;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bolder;
}
</style>
3. Text Styles
1, color color rgb rgba
2, text alignment manner text-align = center
3, first line indent text-indent: 2em
4, line height line-height: single-line text up and down the middle! line-height = height
5, decorative text-decoration:
6, text picture horizontal alignment : vertical-align: middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色：
单词
RGB 0~F
RGBA A：0~1
text-align : 排版，居中，
text-indent: 2em; 段落首行缩进
height: 300px;
line-height: 300px;
行高，和 块的高度一致，就可以上下居中
-->
<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">
我是个俗气至顶的人，见山是山，见海是海，见花便是花。
唯独见了你，云海开始翻涌，江湖开始澎湃，昆虫的小须挠着全世界的痒。
你无需开口，我和天地万物便统统奔向你
</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="images/a.png" alt="">
<span>asdasdajsldjalksdjalksd</span>
</p>
q
</body>
</html>
4. Shadow
/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
text-shadow: #3cc7f5 10px -10px 2px;
}
The pseudo class Hyperlink
Under normal circumstances, a, a: hover
/*默认的颜色*/
a{
text-decoration: none;
color: #000;
}
/*鼠标悬浮的状态（只需要记住 :hover）*/
a:hover{
color: orange;
font-size: 50px;
}
6. List
/*ul li*/
/*
list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
/*ul{*/
/*background: #a0a0a0;*/
/*}*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
7. Background
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/tx.jpg");
/*默认是全部平铺的 repeat*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
8. Gradient
background-color: #FFFFFF;
background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%)
