第二节 css常用的基本样式

来源：互联网发布：怎样开淘宝网店编辑：程序博客网时间：2024/06/03 18:44

除了上述的宽高（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这样还可再分的称为复合属性。

1 0