页面美化
字体样式
font标签中可以按顺序设置如下属性：
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*font-family 字体样式
font-size 字体大小
font-style 字体风格
font-weight 字体粗细
color 字体颜色*/
p{
font:oblique bolder 20px arial "微软雅黑" ;
}
/*p{
font-family: arial "楷体";
font-size: 20px;
font-style: oblique;
font-weight: 900;
color: #FF7F50;
}*/
</style>
</head>
<body>
<p>
一 莫高窟大门外，有一条河，过河有一溜空地，高高低低建着几座僧人圆寂塔。塔呈圆形，状近葫芦，外敷白色。从几座坍弛的来看，塔心竖一木桩，四周以黄泥塑成，基座垒以青砖。历来住持莫高窟的僧侣都不富裕，从这里也可找见证明。夕阳西下，朔风凛冽，这个破落的塔群...
</p>
<p>
王掌柜，常四爷，秦二爷，宋二爷…… 六十年的老茶馆，终究没有能抵挡得住那股浊气弥漫的年代。 见证了是非转变的王掌柜，终究没有逃脱恶霸流氓的欺辱。 一心实业救国的秦二爷，终究穷困潦倒无所获。 问心无愧的常四爷，孤独终生无人送终。 宋二爷爱鸟如命，却终被浊气所污。 这些个见证了六十年时代的更变，从大清受洋...
</p>
<p>
Just because someone doesn't love you the way you want them to,doesn't mean they don't love you with all they have.
</p>
</body>
文本样式
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color: #FF7F50;
/*缩进两个字*/
text-indent: 2em;
}
.t1{
/*颜色设置 rgb()和rgba() a表示透明度0-1*/
/*color:rgb(0,255,255);*/
color:rgba(0,255,255,0.1);
/*文本位置*/
text-align: center;
}
.en{
background-color: #7FFFD4;
height: 60px;
/*行高设置,且可设置上下居中(行高=height)*/
line-height: 60px;
}
.c1{
/*上划线*/
text-decoration: overline;
}
.c2{
/*中划线*/
text-decoration: line-through;
}
.c3{
/*下划线*/
text-decoration: underline;
}
a{
/*去掉下划线*/
text-decoration: none;
}
img{
width: 50px;
height: 50px;
}
s1,img{
/*图片文字垂直居中*/
vertical-align: middle;
};
</style>
</head>
<body>
<p class="t1">文本</p>
<p>
一 莫高窟大门外，有一条河，过河有一溜空地，高高低低建着几座僧人圆寂塔。塔呈圆形，状近葫芦，外敷白色。从几座坍弛的来看，塔心竖一木桩，四周以黄泥塑成，基座垒以青砖。历来住持莫高窟的僧侣都不富裕，从这里也可找见证明。夕阳西下，朔风凛冽，这个破落的塔群...
</p>
<p>
王掌柜，常四爷，秦二爷，宋二爷…… 六十年的老茶馆，终究没有能抵挡得住那股浊气弥漫的年代。 见证了是非转变的王掌柜，终究没有逃脱恶霸流氓的欺辱。 一心实业救国的秦二爷，终究穷困潦倒无所获。 问心无愧的常四爷，孤独终生无人送终。 宋二爷爱鸟如命，却终被浊气所污。 这些个见证了六十年时代的更变，从大清受洋...
</p>
<p class="en">
Just because someone doesn't love you the way you want them to,doesn't mean they don't love you with all they have.
</p>
<a href="#">123</a>
<p class="c1">12345</p>
<p class="c2">12345</p>
<p class="c3">12345</p>
<p>
<img src="img/n1.jpg"/>
<span id="s1">
1234567
</span>
</p>
</body>
超链接伪类
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*未访问*/
a:link{
color:#000000;
}
/*鼠标点击*/
a:visited{
color: #8A2BE2;
}
/*鼠标悬浮*/
a:hover{
color: #FF7F50;
}
/*激活以后*/
a:active{
color: #00FFFF;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点击一下</a>
</body>
阴影
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*text-shadow:水平向右 垂直向下 阴影宽度 阴影颜色*/
p{
text-shadow: 5px 5px 5px red;
}
</style>
</head>
<body>
<p>
王掌柜，常四爷，秦二爷，宋二爷
</p>
</body>
列表图标
/*square正方形
circle 空心圆
decimal 数字
none 去掉
*/
ul li{
list-style: none;
}
背景
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url(‘smiley.gif’); 也是允许的。
通常建议使用这个属性，而不是分别使用单个属性。
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 500px;
height: 500px;
border: 1px solid black;
/*background: red;*/
}
#d1{
/*背景图片*/
background-image: url("img/logos.jpg");
/*背景图片是否重复*/
background-repeat: no-repeat;
}
#d2{
background:bisque url("img/logos.jpg") no-repeat 0px 0px ;
}
#d3{
background-image: url("img/logos.jpg");
background-repeat: repeat-x;
/*背景颜色*/
background-color: aquamarine;
/*背景图片的位置*/
background-position: 0px 100px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
渐变
渐变详细解释：https://www.runoob.com/css3/css3-gradients.html
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义*/
#b{
width: 200px ;
height: 200px;
background-image: linear-gradient(19deg, #FF3FEF 0%, #21DEFF 100%);
}
</style>
</head>
<body>
<div id="b"></div>
</body>
如有不对的地方欢迎指出，大家共同进步！
529
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
