接着回顾CSS的基础样式，之前的学习都不怎么牢固，上次遇到color，bgcolor，background-color，我不知道怎么去选，这可以说明我基础功还是很不牢固的，今天将基础样式再重新整理一遍，同样不说冗余的话。
依然，欢迎指出错误，真心感谢
## CSS背景
### 背景色 backgroud-color
要说背景色，首先就要说一下CSS里面的几种颜色表达方法，CSS里面有主要的三种表达的方法
- 颜色名称命名（如
red） - 十六进制值命名 （如
#fff） - rgb数值命名 （如
rgb（0，0，0））
<html>
<head>
<style type="text/css">
body {background-color: yellow}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; }
</style>
</head>
<body>
<p>rgb的方式改颜色</p>
<p class="no2">颜色名的方式改颜色</p>
</body>
</html>
### 背景图像 backgroud-image 这个属性的默认值是 none，表示背景上没有放置任何图像
<html>
<head>
<style type="text/css">
body {background-image:url(/a_image.jpg);}
</style>
</head>
<body></body>
</html>
引入图片的方式可以通过url()的方式，可以是本地图片也可以是网址(url('http://...'))。
如果是引用本地图片，就要分绝对路径和相对路径了
- 绝对路径：当引用的图片和你的html文件处于不同的文件夹时，其关系为绝对路径。
- 相对路径：当引用的图片和你的html文件处于相同的文件夹时，其关系为相对路径。
### 背景重复background-repeat
在我们添加图片之后，希望根据自己的需要调整图片的规格，排列方式等等，这时候就有进一步控制的样式代码：
<head>
<style type="text/css">
body{
background-image:
url(/a_image.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
上面代码中 ，background-repeat 属性后的值是no-repeat；这表示不重复，整个页面就一张，与其相似的，你可以选择其他的值，如下所示
- repeat 默认。背景图像将在垂直方向和水平方向重复。
- repeat-x 背景图像将在水平方向重复。
- repeat-y 背景图像将在垂直方向重复。
- no-repeat 背景图像将仅显示一次。
- inherit 规定应该从父元素继承 background-repeat 属性的设置。
### 背景定位 background-position 在你插入一张图片时，你会发现你所加入的图片始终位于页面的左上方，有时候我们需要根据实际情况改变图片的位置，这时候就可以用到`background-position`属性了。
<head>
<style type="text/css">
body{
background-image:
url(/a_image.jpg);
background-repeat: no-repeat;
background-position:center;
}
</style>
</head>
<body>
</body>
</html>
与background-repeat 属性一样，你只需要在background-position后面输入相应的值，图片的位置就能发生改变。值有两种表示方法，一种是名称表示，一种是坐标表示。（还有一种是xpos ypos，这个我没有用到过，所以不讲了）
名称表示
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
如果你仅规定了一个关键词，那么第二个值将是"center"。上面的代码中，background-repeat后面只有一个center，这相当于center center，简写一个可以减少代码量也更方便。
坐标表示
- x% y%
**第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果你仅规定了一个值，另一个值将是 50%。**这个方法用的比较多，因为更灵活。
背景关联 background-attachment
有时候你希望把你的联系方式固定在网站的侧边，让用户无论怎么往下翻都能够看到。许多网站的侧边广告栏就也是这样的，这是在css里面有background-attachment属性
<head>
<style type="text/css">
body{
background-image:
url(/a_image.jpg);
background-repeat: no-repeat;
background-position:center;
background-attachment:fixed；
}
</style>
</head>
<body>
</body>
</html>
- scroll 默认值。背景图像会随着页面其余部分的滚动而滚动
- fixed 当页面的其余部分滚动时，背景图像不会滚动
## CSS文本
### 缩进文本 text-indent
<style type="text/css">
p {text-indent: 1cm}
</style>
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进,text-indent 可以使用所有长度单位，包括百分比值。
注意： 一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示： 如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
了解更多
### 水平对齐 text-align text-align 属性规定元素中的文本的水平对齐方式。常见的值如下 >- left 把文本排列到左边。默认值：由浏览器决定。 >- right 把文本排列到右边。 >- center 把文本排列到中间。 >- justify 实现两端对齐文本效果。 >- inherit 规定应该从父元素继承 text-align 属性的值。
### 字间隔 word-spacing 可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的 ```html ``` >- normal 默认。定义单词间的标准空间。 >- length 定义单词间的固定空间。
不过word-spacing属性对中文没有效果，如果要改变中文字符的间距，可以使用letter-spacing属性
### 字母间隔 letter-spacing 这个属性与 word-spacing 的区别在于，字母间隔修改的是**字符或字母之间**的间隔。
<style type="text/css">
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
</style>
- normal 默认。规定字符间没有额外的空间。
- length 定义字符间的固定空间（允许使用负值）。
字符转换 text-transform
text-transform 属性处理文本的大小写。这个属性有 4 个值：
- none 默认。定义带有小写字母和大写字母的标准的文本。
- uppercase 文本中的每个单词以大写字母开头。
- lowercase 定义仅有大写字母。
- capitalize 定义无大写字母，仅有小写字母。
<style type="text/css">
h1 {text-transform: uppercase}
</style>
文本装饰 text-decoration
这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。
- none 默认。定义标准的文本。
- underline 定义文本下的一条线。
- overline 定义文本上的一条线。
- line-though 定义穿过文本下的一条线。
- blink 定义闪烁的文本。
<style type="text/css">
a {text-decoration: none}
</style>
CSS字体
### 指定字体 font-family ```html ``` 你可以在括号内加入多个字体，这样在用户没有安装第一个字体的时候会替换成另外的字体。
<style type="text/css">
p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}
</style>
当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，需要在 font-family 声明中加引号。单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号：
<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
'New York', serif;">This is a paragraph.</p>
字体风格 font-style
font-style 属性最常用于规定斜体文本。该属性有三个值：
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
**斜体（italic）**是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，**倾斜（oblique）**文本则是正常竖直文本的一个倾斜版本。
字体变形 font-variant
font-variant 属性可以设定小型大写字母。小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。
- norma - 默认值。浏览器会显示一个标准的字体。
- small-caps - 浏览器会显示小型大写字母的字体。
<style type="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
### 字体加粗 font-weight 该属性用于设置显示元素的文本中所用的字体加粗。数字值 **400** 相当于 关键字 normal，**700** 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗。 > - normal - 定义标准的字符。 > - bold - 定义粗体字符。 > - bolder - 定义更粗的字符。 > - lighter - 定义更细的字符。 > - 100~900 - 定义由粗到细的字符
<style type="text/css">
p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}
</style>
字体大小 font-size
<style type="text/css">
p {font-size: 100%}
</style>
许多开发者使用 em 单位代替 pixels。1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
扫一扫
1076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
