除了上述的宽高(width,height)基本属性,css中还有其他常用的属性。
背景background
background从显示效果上分为:背景颜色和背景图片,针对背景图片又提出了背景图片重复,背景图片起始位置,背景图片是否固定(是否随着内容而滚动)。背景会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色/背景图片。
具体为:
background-color:颜色值(默认为transparent可以是颜色英文关键字如 "red"、rgb如 "rgb(255,0,0)"、十六进制如 "#ff0000");/*用于设置背景颜色*/
颜色介绍:http://www.w3school.com.cn/cssref/css_colors.asp
background-image: url(图片地址,默认值为none,如果设置了背景图片,那么图片默认位于元素的左上角,并在水平和垂直方向上重复。); /*用于设置背景图片*/
background-repeat: repeat(默认)/repeat-x/repeat-y/no-repeat;/*用于设置背景图片是否重复及如何重复,默认地,背景图像在水平和垂直方向上重复(repeat), repeat –x表示水平方向重复,repeat-y表示垂直方向重复。no-repeat表示背景图像不重复*/
background-position:x方向的位置 y方向的位置;/*用于设置背景图片的位置,属性值可以是top/bottom/center(y方向的位置) left /right/ center(x方向的位置) 四个关键字(使用关键字,则两个属性值之间无顺序,只写一个关键字时,另一个默认为center)。也可以是具体的值(**px)或者百分比,也可以混用(采用数值或百分比,如果只规定了一个值,另一个值将是 50% )。值得注意的是,使用关键字或百分比,背景图片的偏移点是图片中心,而使用数值,偏移点是图片左上角*/
background-attachment: scroll/ fixed; /*用于设置如果文档比较长,那么当文档向下滚动时,背景图像是否随之滚动。属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动,如果背景图片不重复的话,滚动距离超过背景图片的高度时,背景图片将不能出现在屏幕上。值得注意的是,背景图片固定是相对于视口*/
需要注意的是背景不充当内容填充,即背景不能撑开一个容器的宽高,就像背景灯光不占据空间是一样的道理。
建议:设置背景图片的时候最好设置同色系的背景色,看起来会更为融合。同时背景图片加载较慢时也会有个过度。
eg:
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
div{
width:400px;
height:400px;
margin:10px;
border:10px dotted pink;
background-color:red;/*为元素设置一种纯色背景。*/
background-image:url(img/1.jpg);
}
.repeat{
background-repeat:repeat-x;
}
.bgAttachment2{
background-position:center center;
background-attachment:fixed;
}
.all{
background:#000 url(img/1.jpg) center center no-repeat fixed;
color:#fff;
overflow:scroll;
}
</style>
</head>
<body>
<div class="index">
这个例子说明background的各个属性的默认值。
</div>
<div class="repeat">
这个例子说明元素的内容会覆盖在背景图片上,背景图片会覆盖在背景色上。你可以通过f12选中该标签改变下background-repeat的值看看其他属性值的效果
</div>
<div class="bgAttachment1">
这个例子说明background-position和background-attachment的效果。
</div>
<div class="bgAttachment2">
这个例子说明background-position和background-attachment的效果。<br>
这个例子说明background-position和background-attachment的效果。<br>
这个例子说明background-position和background-attachment的效果。<br>
这个例子说明background-position和background-attachment的效果。<br>
这个例子说明background-position和background-attachment的效果。<br>
这个例子说明background-position和background-attachment的效果。<br>
这个例子说明background-position和background-attachment的效果。<br>
这个例子说明background-position和background-attachment的效果。<br>
这个例子说明background-position和background-attachment的效果。<br>
</div>
<div class="all">
可以将background所有的属性写在一起。各子属性的值之间无顺序,但是注意:background-position属性本身有两个属性值,这两个值之间还是有顺序的,他两捆绑在一起,不可分割。<br>
另外,注意这边背景图片固定是相对于视口的,可以调整窗口大小查看效果。
</div>
</body>
</html>
边框
边框就是一个元素边缘一圈显示的效果。
从外观的角度,边框可以分为边框样式,宽度,颜色。其中样式最为重要,因为如果没有样式,将根本没有边框(没有边框宽度和颜色时都会采用默认值)。
从方向上的角度,边框可以分为上右下左,即上边的边框,右边的边框,下边和左边的边框。
边框样式
border-style: none/dotted/dashed/solid/double/groove/ridge/inset/outset;/*属性用来定义边框的样式*/
边框宽度
border-width: 可以指定长度值,比如 2px 或 0.1em;也可以使用 3 个关键字(thin 、medium(默认值) 和 thick)。;/*为边框指定边框线条的宽度*/
注意:CSS没有定义 3个关键字的具体宽度,具体显示出来的效果得看浏览器解析。
注意:边框是占据宽高的。假如我们定义了一个div的宽是200px,又给他增加了2px的边框,这时他的宽是204(左右两边各2px)。
边框颜色
border-color属性用于设置边框的颜色。
属性值:颜色值。
这三个值可以放到同一个属性中,写成border:颜色 样式 宽度(无顺序)
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
div{
width: 400px;
height: 40px;
margin: 10px;
}
.borderTest1{border-style:solid;}
.borderTest2{border-width:1px;border-color: red;}
.borderTest3{border-width:1px;border-color: red;border-style:solid;}
.borderTest4{border:1pxsolid red;}
</style>
</head>
<body>
<div class="borderTest1">只定义border-style的时候,border可以显示</div>
<div class="borderTest2">只定义border-width和border-color的时候,border不能显示</div>
<div class="borderTest3"></div>
<div class="borderTest4">样式、边框宽、边框颜色合写到一起,属性值之间无顺序</div>
</body>
</html>
从方向上分:分为上左下右
border-top,border-right,border-bottom,border-left。
不写明方向时,默认四个方向的样式相同,如上边所说的border-color,设置的是四个方向的颜色;写明方向时表示只设置该方向上的值,如border-bottom-color表示只设置下边框的颜色。
同时也可将多个方向进行简写。
两个值表示:上下 左右。如border-color:#599933 #000;表示上下颜色是绿色,左右的颜色是黑色。
三个值表示:上 左右 下.如border-color:#599933 #000 #666;表示上颜色是绿色,左右的颜色是黑色,下颜色是灰色。
四个值表示:上 右 下 左(顺时针方向)。border-color:#599933 #000 #666 #9c27b0;表示上颜色是绿色,右颜色是黑色,下颜色是灰色,左是紫色。
css中符合属性的方向基本都是这个规律。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
div{
width: 400px;
height: 40px;
margin: 10px;
border-style:solid;
}
.borderTest1{border-color:#000;}
.borderTest2{border-bottom-color:#666;}
.borderTest3{border-color:#000 #666;}
.borderTest4{border-color:#599933 #000 #666;}
.borderTest5{border-color:#599933 #000 #666 #9c27b0;}
</style>
</head>
<body>
<divclass="borderTest1">不写明方向时,默认四个方向的样式相同,如上边所说的border-color,设置的是四个方向的颜色。</div>
<divclass="borderTest2">写明方向时表示只设置该方向上的值,如border-bottom-color表示只设置下边框的颜色。</div>
<divclass="borderTest3">两个值表示:上下 左右。</div>
<divclass="borderTest4">三个值表示:上 左右 下</div>
<divclass="borderTest5">四个值表示:上 右 下 左(顺时针方向)</div>
</body>
</html>
小贴士:
border的形状:随着容器的宽高变化的。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
.test1{
width: 0;
height: 0;
border: 100px solid#fff;
border-left-color:#ccc;
}
.test2{
width: 100px;
height: 100px;
border: 50px solid#fff;
border-left-color:#ccc;
}
</style>
</head>
<body>
<divclass="test1"></div>
<divclass="test2"></div>
</body>
</html>
文字文本
容器中文字的显示效果可以用文字属性(font)来控制。其效果与word中的效果类似,可以选择字体的系列(宋体黑体什么的),斜体,是否加粗,字体大小等。其对应的属性名分别是
font-family:字体名称1, 字体名称2, 字体名称3,,如楷体,宋体,幼圆;/*浏览器会根据这个列表,依次查找这些字体。如果前者不可用,则采用后者。如果列出的所有字体都不可用,就会简单地选择一种可用的 serif 字体。当字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $之类的符号,需要在该属性值中加引号*/
font-style: italic斜体/ normal正常;
font-weight: bolder更粗/bold加粗/normal正常/lighter更细,或者也可以使用100/200/300/400/500/600/700/800/900/*文字加粗。关键字 100 ~ 900 为字体指定了 9 级加粗度*/
font-size: 具体数值,如14px/百分比表示基于父元素的一个百分比值;/* W3C 推荐使用 em 尺寸单位,1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。*/
font:font-style | font-weight |font-size/line-height | font-family;/*!!!font复合样式需要注意书写顺序*/
对于一段文字组成的文本,我们也可以通过css进行首行缩进、对齐方式、文本装饰、行高、文本颜色。其对应的属性名分别是
text-indent:可以是一个具体的值(px/em/cm),也可以是百分比表示基于父元素宽度的百分比的缩进。/*缩进元素中文本的首行。推荐使用em,因为中文中我么一般缩进两个汉字,但是汉字的大小可能会变,所以我们统一采用em为单位*/
text-align: left把文本排列到左边/ right把文本排列到右边/ center把文本排列到中间/ justify两端对齐文本效果,将文字均匀的铺在中间; /*对齐元素中的文本。*/
text-decoration: underline定义文本下的一条线/overline定义文本上的一条线/line-through定义穿过文本下的一条线/blink定义闪烁的文本(只有火狐支持blink);/*向文本添加修饰*/
line-height:一个具体的值(px/em/cm)/*每行文本占的高度。当行高的值与容器高度一致且只有一行文本时,文字会垂直居中显示。*/
多行文字测量行高的方法:(from妙味课堂)
1、确认文字大小
2、确认两行文字之间的空隙大小
3、空隙大小除以2,得出来的值就是每行文字的上下的空隙大小
3.1 当行高为奇数时,那么文字的上方要比下方少一个像素
3.2 当行高为偶数是,那么文字上下空隙值一致
4、通过辅助项测量多行文字的行高
color:颜色值;/* 设置文本颜色*/
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
div{
border:1px solid #000;
width:500px;
margin:10px;
text-indent:2em;
text-align:justify;
text-decoration:line-through;
line-height:30px;
color:red;
}
.font1{
font-weight:700;
font-style:italic;
font-size:20px;
font-family:"楷体";
}
.font2{
font:bold italic 26px/50px "楷体";/* 26px/50px 表示字体大小26px,行高50px*/
}
</style>
</head>
<body>
<divclass="font1">
文字文本/文字文本/文字文本/文字文本/文字文本/文字文本/文字文本/文字文本/文字文本/文字文本/文字文本/
</div>
<divclass="font2">
文字文本/文字文本/文字文本/文字文本/文字文本/文字文本/文字文本/文字文本/文字文本/文字文本/文字文本/
</div>
</body>
</html>
小结:
在css中,属性名为该属性的英文单词。如边框的属性名为border,背景的属性名为background。如果属性名是两个单词组成,则在两个单词之间用-连接。比如边框颜色为border-color。
像宽高这样的不可再分的属性成为单一属性,像border这样还可再分的称为复合属性。