CSS3样式-美化界面
一、字体样式
字体样式的基本属性
1.font-family属性
<!--
Verdana 为设置的英文字体类型
“楷体” 为设置的中文字体类型
-->
<style>
p {
font-family: Verdana, "楷体";
}
</style>
2.font-size属性
单位
-
px(像素)
-
em、rem、cm、mm、pt、pc
rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。em 单位基于使用他们的元素的字体大小。rem 单位基于 html 元素的字体大小。em 单位可能受任何继承的父元素字体大小影响。rem 单位可以从浏览器字体设置中继承字体大小。 -
html代码
<body> 我是body <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> </body> -
css代码
<style>
body{
font-size: 10px;
}
/* 正常设置字体大小 */
h1 {
font-size: 32px;
}
/*
rem 单位基于 html 元素的字体大小
默认通常为16px,2rem则相当于32px
*/
h2 {
font-size: 2rem;
}
/*
em 单位可能受任何继承的父元素字体大小影响
若未设置父类元素字体大小，则默认也为16px,2em则相当于32px
*/
h3 {
font-size: 2em;
}
</style>
-
网页呈现效果
呈现效果
3.font-style属性
-
normal 默认状态，正常字体
-
italic 是指斜体字，可以理解成是使用文字的斜体
-
oblique oblique 是倾斜的文字，是让没有斜体属性的文字倾斜
-
html代码
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
-
css代码
h1 { font-style: normal; } h2 { font-style: italic; } h3 { font-style: oblique; } -
网页效果
呈现效果
4.font-weight属性
font-weight相关属性值
5.font属性
- 字体属性的顺序：字体风格→字体粗细→字体大小→字体类型（font-style→font-weight→font-size→font-family）
二、文本样式
文本样式的基本属性
1.color属性
填写颜色的几种方式
-
RGB
十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量rgb(r,g,b) : 正整数的取值为0～255p{color:#A983D8;} -
RGBA
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1p{color:rgba(0,0,255,0.5);} /*0.5代表透明度为半透明*/ -
直接输入颜色
p{color:red;}
2.text-align属性 文本排版
text-align属性相关值
3.text-decoration属性 文本装饰
text-decoration属性相关值
4.vertical-align属性 垂直对齐方式
- middle 居中
- top 置于顶部
- bottom 置于底部
5.text-shadow 文本阴影
-
语法
/* 语法： text-shadow : color x-offset y-offset blur-radius; color 阴影颜色 x-offset X轴位移，用来指定阴影水平位移量 y-offset Y轴位移，用来指定阴影垂直位移量 blur-radius 阴影模糊半径，代表阴影向外模糊的模糊范围 */ text-shadow: blue 5px 5px 5px;
*呈现效果
阴影呈现效果
三、超链接伪类
1.伪类样式
-
语法
语法规范
-
示例
设置a标签移入的效果：颜色变为#B46210；文本装饰增加下划线
伪类实例图
2.使用CSS设置超链接
-
设置伪类的顺序：a:link->a:visited->a:hover->a:active
超链接伪类样式
四、列表样式
1.列表类型（list-style-type）
例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。
要修改用于列表项的标志类型，可以使用属性 list-style-type
-
列表类型的常见值
列表类型常见值
2.列表项图像（list-style-image）
有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：
ul li {
list-style-image: url(xxx.gif)
}
只需要简单地使用一个 url() 值，就可以使用图像作为标志。
3.列表标志位置（list-style-position）
CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的
4.简写列表样式（list-style）
为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样：
li {
list-style: url(example.gif) square inside
}
list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。
五、背景样式
1.背景颜色（background-color）
-
背景颜色也可以直接填写颜色也可以用十六进制方法表示
background-color: red; background-color: #778866;
2.背景图像（background-image）
-
背景图像中有url属性，括号中填写图片的路径
background-image: url('image/xxx.jpg');
3.背景定位（background-position）
background-position: 10px 10px;
background-position: 50% 50%;
background-position: left center;
背景定位属性值
4.背景重复方式（background-repeat）
属性值
- repeat：沿水平和垂直两个方向平铺
- no-repeat：不平铺，即只显示一次
- repeat-x：只沿水平方向平铺
- repeat-y：只沿垂直方向平铺
5.背景属性（background）
设置背景属性值的顺序：背景颜色→背景图像→背景定位→背景重复方式
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
5.背景尺寸（background-size）
背景尺寸属性值
六、CSS3渐变
1.线性渐变（linear-gradient）
- 颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
-
语法
语法规范
-
设置兼容Webkit内核的浏览器
兼容性
-
示例图
渐变示例图
2.径直渐变
- 圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
3.浏览器兼容性
兼容性图片
- IE浏览器是Trident内核，加前缀：-ms-
- Chrome浏览器是Webkit内核，加前缀：-webkit-
- Safari浏览器是Webkit内核，加前缀：-webkit-
- Opera浏览器是Blink内核，加前缀：-o-
- Firefox浏览器是Mozilla内核，加前缀：-moz-
