CSS3样式整理
1. 字体样式
font-family：字体（可以设置多个字体 英文、中文）
font-size：字体大小
font-weight：字体粗细
color：字体颜色
<style>
body{
font-family: "Arial Black",楷体;
color:red;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bolder;
}
/*正式用时简写*/
p{
font: obloque lighter 16px "宋体";
}
</style>
<body>
<h1>故事介绍</h1>
<p class="p1">《魁拔》是由北京青青树动漫科技有限公司于2011年开始推出的由王川执导的国产奇幻动画系列大电影。</p>
<p>作品围绕主人公蛮吉等人，讲述了在架空的世界——元泱界中，天地两界共同合力对抗每隔333年诞生的可怕异常生命——魁拔的故事。</p>
<p>Oracle offers a comprehensive and fully integrated stack of cloud applications and platform services</p>
</body>
2. 文本样式
颜色：单词 RGB 0~F,RGBA A:透明度0~1
text-align: center; 排版，居中、居左、居右
text-indent:2em 段落首行缩进
height: 300px;line-height: 300px; 行高和块的高度一样时，就是上下居中
text-decoration: underline、line-through、overline、none; 下划线、中划线、上划线、去下划线。
vertical-align: middle; 水平对齐
<style>
h1{
color: red;
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: #27afff;
height: 300px;
line-height: 300px;
}
.pp1{
text-decoration: underline;
}
.pp2{
text-decoration: line-through;
}
.pp3{
text-decoration: overline;
}
img,span{
vertical-align: middle;
}
</style>
<body>
<p>
<img src="asd.png" alt="">
<span>测试</span>
</p>
<p class="pp1">测试</p>
<p class="pp2">测试</p>
<p class="pp3">测试</p>
<h1>故事介绍</h1>
<p class="p1">《魁拔》是由北京青青树动漫科技有限公司于2011年开始推出的由王川执导的国产奇幻动画系列大电影。</p>
<p>作品围绕主人公蛮吉等人，讲述了在架空的世界——元泱界中，天地两界共同合力对抗每隔333年诞生的可怕异常生命——魁拔的故事。</p>
<p class="p3">Oracle offers a comprehensive and fully integrated stack of cloud applications and platform services</p>
</body>
3. 阴影
text_shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径
<style>
/*text_shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
text_shadow: #3cc7f1 5px 5px 5px;
}
</style>
<body>
<p id="price">测试</p>
</body>
4. 超链接伪类
正常使用下，a, a:hover
<style>
/*默认的颜色*/
a{
color: #000000;
text-decoration: none;
}
/*鼠标悬停的颜色*/
a:hover{
color: orange;
font-size: 50px;
}
/*鼠标按住未释放的颜色*/
a:active{
color: red;
}
/*鼠标按住释放后的颜色*/
a:visited{
color: #ff0080;
}
/*text_shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
text_shadow: #3cc7f1 5px 5px 5px;
}
</style>
<body>
<a>
<img src="asd.png" alt="">
</a>
<p><a href="#">测试</a></p>
<p><a href="">测试</a></p>
<p id="price">测试</p>
</body>
5.列表
#niv{
width: 300px;
height: 500px;
background: #c2bfbf;
}
a{
text-decoration:none;/*去掉下划线*/
color: #000000;
font-size: 15px;
}
.title{
font-size: 22px;
font-width: bold;/*字体粗细 数字也可以*/
text-indent: 2em;/*将段落的第一行缩进*/
line-height: 30px;/*设置行高(或者30%，以百分比计的)*/
/*颜色、图片、图片位置、平铺方式*/
background: red url("../img/jiantou.png") 270px 5px no-repeat;
}
/* ul li
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
background: #c2bfbf;
}
ul li{
height: 30px;
list-style:none; /*square inside url('../img/jiantou.png'); 把图像设置为列表中的列表项目标记*/
text-indent: 1em;
background-image: url("../img/jiantou.png");
background-repeat: no-repeat;
background-position: 230px 2px;
}
a:hover{
color:orange;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="niv">
<h2 class="title">商品</h2>
<ul class="JS_navCtn cate_menu">
<li>
<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>
<li>
<a href="#">男装</a>
<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>
<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>
<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>
<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>
<li>
<a href="#">机票</a>
<a href="#">酒店</a>
<a href="#">旅游</a>
<a href="#">生活</a>
</li>
<li>
<a href="#">理财</a>
<a href="#">众筹</a>
<a href="#">白条</a>
<a href="#">保险</a>
</li>
<li>
<a href="#">安装</a>
<a href="#">维修</a>
<a href="#">清洗</a>
<a href="#">二手</a>
</li>
<li>
<a href="#">工业品</a>
</li>
</ul>
</div>
</body>
</html>
6. 背景
颜色、图片、图片位置、平铺方式
background: red url("../img/jiantou.png") 270px 5px no-repeat;
<style>
div{
width: 1000px;
height: 300px;
border: 1px solid red;/*边框*/
background-image: url("img/jiantou.png");/*背景图片，默认是平铺的*/
}
.div1{
background-repeat: repeat-x;/*背景图片，水平平铺*/
}
.div2{
background-repeat: repeat-y;/*背景图片，垂直平铺*/
}
.div3{
background-repeat: no-repeat;/*背景图片，不平铺*/
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
渐变
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。
<style>
body{
background-image: linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%,#FF0000 100%);
/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
}
</style>
浙公网安备 33010602011771号