层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
1、字体样式
- font-family
body{font-family: Times,"Times New Roman", "楷体";}
p{font-family:Verdana,"楷体";}
- font-size属性
单位
px（像素）
em、rem、cm、mm、pt、pc
h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}
-
font-style属性
normal、italic和oblique
<span class="a">
111111111
</span>
<span class="b">
111111111
</span>
<span class="c">
111111111
</span>
.a{
font-style: normal;
}
.b{
font-style: italic;
}
.c{
font-style: oblique;
}
- font属性
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
p span{font:oblique bold 12px "楷体";}
2、文本属性
- color属性
[1] RGB
十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
rgb(r,g,b) : 正整数的取值为0～255
[2] RGBA
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1
color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);
color:rgba(0,0,255,0.5);
-
排版文本段落
- 文本装饰
text-decoration属性 -
垂直对齐方式
vertical-align属性：middle、top、bottom
- 文本阴影
text-shadow : color x-offset y-offset blur-radius;
颜色 X轴位移量 Y轴位移量 阴影模糊范围
浏览器兼容性
- 超链接伪类
设置伪类的顺序：a:link->a:visited->a:hover->a:active -
背景
[1] 背景颜色
background-color 背景颜色值：十六进制方法表示
[2] 背景图像
background-image:url(图片路径);
[3] 背景重复方式
background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
[4] 背景定位
background-position属性
.title {
font-size:18px;
font-weight:bold;
color:#FFF;
text-indent:1em;
line-height:35px;
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
/*颜色 图片路径 背景定位 背景不重复显示*/
}
[5] 背景尺寸 background-size
- 渐变
[1] 线性渐变
颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
[2] 径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
linear-gradient ( position, color1, color2,…)
渐变方向 第一种颜色 第二种颜色
*浏览器兼容性
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-
练习
<!-- html -->
<div>
<h3>
热播
</h3>
<ul>
<li>
<img src="image/img1.png" alt="">
<h4>神武赵子龙</h4>
<p>怒，林更新不抱网红抱女神</p>
<p>点击次数：242445次</p>
</li>
<li>
<img src="image/img2.png" alt="">
<h4>旋风十一人</h4>
<p>胡歌变教练在撩前女友</p>
<p>点击次数：242445次</p>
</li>
<li>
<img src="image/img3.png" alt="">
<h4>太阳的后裔</h4>
<p>宋慧乔吃嫩草</p>
<p>点击次数：242445次</p>
</li>
<li>
<img src="image/img4.png" alt="">
<h4>山海经之赤影传说</h4>
<p>娜扎张翰再度联手</p>
<p>点击次数：242445次</p>
</li>
</ul>
</div>
<style>
/* css */
* {
padding: 0;
margin: 0 auto;
}
body div {
/* border: 1px solid red; */
padding: 0;
margin: 0 auto;
width: 1000px;
}
div ul {
list-style: none;
padding-top: 10px;
margin: 0 auto;
}
li {
/* border: green 1px solid; */
display: inline-block;
padding: 5px;
border-radius: 15px;
}
div ul li:hover {
border-color: #dfdfdf;
border-radius: 10px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.2);
background-color: #fff;
}
li img {
border-radius: 15px 15px 0px 0px;
}
li h4:nth-of-type(1) {
/* border: green 1px solid; */
padding-top: 10px;
margin: 0 auto;
font-size: 16px;
color: gray;
}
li p:nth-of-type(1) {
margin: 0 auto;
/* border: green 1px solid; */
padding-top: 5px;
color: #640000;
font-size: 14px;
}
li p:nth-of-type(2) {
margin: 0 auto;
/* border: green 1px solid; */
padding-top: 5px;
font-size: 12px;
color: blue;
}
</style>
网友评论