目录
CSS元素
1、使用CSS的意义
- 有效的传递页面信息
- 使用CSS美化过的页面文本,使页面漂亮、美观,吸引用户
- 可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容
- 具有良好的用户体验
< span>标签:能让某几个文字或者某个词语凸显出来,从而添加对应的样式!
<p>好好学习,<span>天天向上</span></p>
2、字体样式
字体类型 font-family
p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}
字体大小 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
字体的粗细 font-weight
字体属性 font
字体属性的顺序:字体风格→字体粗细→字体大小→字体类型
p span{
font:oblique bold 12px "楷体";
}
3、文本样式
文本颜色color
- RGB:十六进制方法表示颜色:前两位表示红色分量,中间两位表示绿色分量,最后两位表示蓝色分量rgb(r,g,b) : 正整数的取值为0~255
- RGBA:在RGB基础上增加了控制alpha透明度的参数,其中这个透明通道值为0~1
color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);
color:rgba(0,0,255,0.5);
排版文本段落
水平对齐方式:text-align属性
首行缩进:text-indent:em或px
行高:line-height:px
文本修饰和垂直对齐
文本装饰:text-decoration属性
垂直对齐方式:vertical-align属性:middle、top、bottom
4、文本阴影
text-shadow属性在CSS2.0中出现,但迟迟未被各大浏览器所支持,因此在CSS2.1中被废弃,如今在CSS3中得到了各大浏览器的支持!
5、超链接伪类
通常只设置两种状态,一是a{color:#333;},一是a:hover { color:#B46210;}
6、列表样式
- list-style-type
- list-style-image
- list-style-position
- list-style
li{
list-style:none;
}
去除列表前面的小黑点
7、背景样式
背景图像:background-image
背景颜色:background-color
设置背景图像
- background-image属性
- background-repeat属性
背景定位:background-position属性
设置背景
背景属性:background属性
.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;
}
background: 背景颜色 背景图像 背景定位 背景不重复显示
背景尺寸 background-size
8、CSS渐变样式
推荐一个网站:http://color.oulu.me/
线性渐变
颜色沿着一条直线过渡:从左到右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合
CSS3渐变兼容
- IE浏览器是Trident内核,加前缀:-ms-
- Chrome浏览器是Webkit内核,加前缀:-webkit-
- Safari浏览器是Webkit内核,加前缀:-webkit-
- Opera浏览器是Blink内核,加前缀:-o-
- Firefox浏览器是Mozilla内核,加前缀:-moz-
兼容Webkit内核的浏览器
-webkit-linear-gradient ( position, 1 color1, color2,…)