学习笔记2017.07.17-day15,am-CSS实例练习

在学习完CSS之后，好多属性名称拼写以及值也都忘了个差不多了，所以说呢，还是经常用一用，练一练。

此次实例地址为：http://www.runoob.com/css/css-examples.html CSS实例|菜鸟教程

1.CSS背景颜色、背景图片、背景图片垂直或水平平铺、背景图像定位、 background简写

• body背景以及各个元素背景用background-color:red;来定义，后边的值可以为颜色英文代、十六进制和RGB来定义。

例如：<div style="background-color:red;"></div>这个div的背景颜色为红色。

• 在背景中，可以添加颜色，还可以添加图片。

背景图片的语法是：background-image:url('路径')  以此来调用图片作为背景。在使用图片作为背景的同时，要保证图片是否适用于此，否则造成文章不易阅读。

• 在插入背景图之后，图片只是很小的一部分，没办法铺满全屏。这是我们就要用background-repeat属性来规定图片水平或者垂直平铺的问题。

例如：body{ background-image:url('路径')；

background-repeat:repeat-x;/*repeat-x为X轴横向平铺，repeat-y为Y轴水平平铺*/

}

• 单个图像的话，我们如果需要对其定位，则使用background-position来定义它的位置

例如：body{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;/*此时图像的定位为右上*/

}

注意：另外在图片的定位中，可以添加background-attachment:fixed,来固定图像，从而不随页面滚动

• 在上述所有背景属性中，都很长，书写的时候很费劲。咱们可以通过简写来加快书写速度：

例如:background:url('路径') no-repeat right top;  

/*这个背景属性说明图片为某某，不重复，定位是右上*/

这个简写是有顺序的，顺序为：

1、background-color2、background-image3、background-repeat4、background-attachment

5、background-position

这些属性不一定需要全用，可以按照实际应用来使用。

2.CSS文本颜色、文本对齐方式、文本修饰、文本转换、文本缩进

• 文本颜色需要使用color属性来定义，后边的值可以为颜色英文代、十六进制和RGB来定义。例如：color:red

• 文本的对齐方式是使用text-align来实现文本左右居中对齐。属性值为:reght、left、center、justify（此为两端对齐方式）

• 文本修饰,通过下划线来对文本进行修饰。使用text-decoration来规定文本下划线的方式。此属性同样可以针对链接文字来规定下划线方式。

例如<a href="http://baidu.com/"  style="text-decoration:none">链接</a>/*此为消除链接下划线*/

text-decoration属性值包括：none、underline、overline、line-through几个常用的。

• 文本转换讲的是通过text-transform来定义文本大小写的方式。text-transform的值为：

none:默认

captialize:文本中的每个单词首字母大写

uppercase:全部为大写字母

lowercase:全部为小写字母

• 文本缩进中包括首行文字缩进（相当于中文每段前空两格的意思）、字符间的缩进、每行的行高、文本之间空格的距离大小。

文字的缩进使用text-indent来定义，属性值为像素。

字符间的缩进使用letter-spacing来定义，属性值为像素。

行高的缩进使用line-height来定义，属性值为像素。

文本之间的空格大小使用word-spacing来定义，属性值为像素。

• 另外还有两点是禁用文字换行和文字相对图像的对齐方式。

禁用文字换行一般用不到，因为网页大部分都是垂直阅读，而不是横向阅读，在此了解就可以。禁用文字换行使用white-space:nowrap;来定义。

文字相对图像对齐方式是使用vertical-align:text-top或者vertical-align:text-bottom来定义。

3.CSS字体、字体大小、字体样式、font简写。

• 在CSS字体中使用fong-family:宋体;来定义字体。
• 使用font-size来定义字体大小，字体大小单位可以使用PX、em和%来定义。
• 字体样式分为斜体和粗体：
• 斜体使用fong-style来定义，font-style值为：

normal：默认值。浏览器显示一个标准的字体样式。

italic：显示一个斜体的字体样式。

oblique：显示一个倾斜的字体样式。

inherit：规定应该从父元素继承字体样式。

• 粗体使用font-weight来定义，font-weight值为：

normal：默认值。

bold：定义粗体字符。

bolder：定义更粗字体。

lighter：定义更细字体。

100-900整数：定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

• font 简写属性在一个声明中设置所有字体属性。

可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"
font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
注意： line - height属性设置行与行之间的空间。