css用来定义html页内容表现格式,可以处理字体、色彩、背景、图文、布局等
特点:网页内容与表现格式相分离 一个选择器可以包含多个属性:值,之前用“;”分开
定义背景颜色、背景图像:
background-color:设置元素的背景颜色
{
background-image:把图像设置为背景
background-image:url("图片地址")
background-repeat:设置背景图片是否及如何重复 默认值为 repeat
}
no-repeat 图像不平铺
repeat-x 图像在水平方向上平铺
repeat-y 图像在垂直方向上平铺
repeat 图像在水平、垂直方向上都平铺
background-position:right|left|top|bottom 设置背景图像的起始位置
background-attachment: 背景图像是否固定或者随着页面的其余部分滚动
css3背景:
background-size: 款 高 规定背景图片的尺寸
background-origin:规定背景图片的定位区域
background-clip:规定背景的绘制区域
伪类#
伪类:
主要用于超链接
可以看做是一种特殊的类别选择符,它最大的用处就是可以对连接在不同状态下定义不同的演示效果
系统超链接:
未点击时:蓝色+下划线,点击后:深紫色+下划线
伪类可以根据连接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性,改变连接的默认效果
因连接共4中状态,所以需要定义4个
定义:
a:link{ 未访问的
text-decoration:underline;
color:red;
}
a:visited{ } 被访问过的
a:hover{ } 悬停
a:active{ } 鼠标点击时连接的样式
注意:由于css优先级的关系(后面比前面的优先级高),在写a的css样式时,
一定要按照a:link,a:visited,a:hover,a:actived的顺序书写
样式表###
样式表的应用方式:
遵循最近原则,建议:不要同时使用三种样式
内部样式表:css在<head>区定义
外部样式表:css写在一个单独的css文件中 连接性质为样式表 css路径
使用:html文件<head>区+<link rel="stylesheet" href="mystyle.css(css文件)" type="text/css">
行内样式表:样式规则使用频率不高,可以把样式定义在元素标签里,使用style属性进行定义。
body{
margin:0px;
}
多列######
/*
多列:
css3中,可以创建多列来对文本或者区域进行布局
属性:
column-count: 列的数量
column-gap: 每列间隔的距离
column-rule: 每列间隔的线及线的颜色
*/
.div5{
/*列的数量*/
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/*每列间隔距离*/
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
/*每列间隔的线及线的颜色*/
column-rule: 2px outset lightblue;
-webkit-column-rule: 2px outset lightblue;
-moz-column-rule: 2px outset lightblue;}
网友评论