HTML and CSS学习概述-续<Lovo>

1,   CSS是层叠样式表（Cascading Style Sheets）的缩写，它用于定义HTML元素的显示形式，是一种格式化网页内容的技术。CSS现在已经被大多数浏览器所支持，成为网页设计者必须掌握的技术之一。

2,CSS将从基础开始建设直到全面替代传统Web设计方法。W3C组织创建的CSS技术将替代HTML中用于表现的HTML元素。
提高页面浏览速度。使用CSS，比传统的Web设计方法至少节约50%以上的文件尺寸。
缩短改版时间，降低维护费用。只要简单修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
强大的字体控制和排版能力。有了CSS，我们不再需要用font标记或者透明的1 px GIF图片来控制标题，改变字体颜色、字体样式等等。
CSS非常容易编写。我们可以象写HTML代码一样轻松地编写CSS。
可以一次设计，随处发布。你的设计不仅仅用于Web浏览器，也可以发布在其他设备上。
更好的控制页面布局。结合CSS和div元素，可以比传统的使用table元素更好地控制页面布局。
实现表现和结构、内容相分离。将网页的表现形式部分剥离出来放在一个独立样式文件中，可以减少未来网页无效的可能。
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到网页的内容，并可能给网页一个较高的评价。

3,将CSS引入HTML的方式有三种
1.外部样式表
不需要style标签
<link rel=“stylesheet” href=“” />(尽量将css与HTML分开，所以常用外联)
2.嵌入样式表
<style type=“text/css”>
p{}
</style>
3.内联样式表
属性名为style
举例:<p style=“”></p>

4,每个样式规则分为选择器和规则本身两个部分，选择器用于规则所应用的元素，规则本身则指定格式。
简单选择器
元素选择器
类选择器
ID选择器
伪类和伪元素选择器
复合选择器
交集选择器
并集选择器
后代选择器

4.1,HTML元素是最典型的选择器类型，任何一个HTML元素都可以做为选择器

4.2,如果想要把某一个样式应用到不同的HTML元素上，可以采用类选择器来定义，然后在不同标签中应用它们。(class="")

4.3,除了使用类选择器的方式定义一个样式以外，还可以使用ID定义样式。ID与类选择器的概念相似，只是ID选择器只能被引用一次，而类选择器可以被多次引用。
要将一个ID包括在样式定义中，应用一个井号（#）作为ID名称的前缀 

4.4,伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。
伪类区别开不同种类的元素。例如，visited links（已访问的链接）和active links（可激活链接）描述了两个锚点的类型。
伪元素指元素的一部分，例如段落的第一个字母。(选择器:伪类 { 属性: 值; }
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */

选择器:伪元素 { 属性:值; }
p:first-letter {font-size:2em}  /* p元素中内容首字母放大 */)

4.5,4种选择器为基础，通过组合，还可以产生更多种类的选择器，实现更强、更方便的选择功能，复合选择器就是由基本选择器通过不同的连接方式构成的。
复合选择器就是两个或多个基本选择器，通过不同方式连接而成的选择器。

4.6,交集选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格，必须连续书写。

4.7并集选择器是多个选择器通过逗号连接而成的。在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，就可以利用并集选择器同时声明风格相同的CSS选择器。

4.8如果需要为位于某个标记符内的元素设置特定的样式规则，则应将选择器指定为具有上下文关系的HTML标记(后代选择器)

4.9层叠样式表背后的概念是，多个样式定义可以层叠向下通过多个层次来影响文档。样式定义的多个层次可以应用于任何文档。层次的优先级别从小到大依次为：
外部样式表
嵌入式样式表
内联样式
如果是同一个样式表中不同选择器，优先级别从小到大依次为：
元素选择器
类别选择器
ID选择器

                                                                                               CSS的基本属性

1,在HTML中，无论是字体的大小，还是图片的长度设置，通常都使用像素或百分比来进行设置。而在CSS中，就有了更多的选择，可以用长度单位，主要分为两种类型，一种是相对类型、另一种是绝对类型。
相对类型
绝对类型

所谓相对，就是要有一个参考基础，相对于该参考基础而设置的尺度单位。这在网页制作中有两种。
1.px(piexl)
像素，根据显示设备的分辨率多少而代表不同长度。
2.em
以目前字符的高度为单位。

所谓绝对，就是无论显示设备分辨率是多少，都代表相同的长度。

2,

CSS定义颜色有多种不同的方法:

h3{color:blue;} 使用颜色的英文名称作为属性值
h3{color:#0000ff;}    使用是十六进制数值
h3{color:#00f;} 第二种方式的简写
h3{color:rgb(0,0,255);} 使用给定红绿蓝3种颜色分量的十进制数值
h3{color:rgb(0%,0%,100%);} 使用给定红绿蓝3种颜色分量的百分比

3,设置文字的字体

h1{
            font-family:黑体;
}
p{
    font-family: Arial,"Times New Roman";
}
如果Arial字体和Times New Roman字体，其含义是告诉浏览器首先在访问者的计算机中寻找Arial字体，如果不存在则使用Times New Roman字体。

4,设置字体倾斜效果
font-style:normal; /*正常字体模式*/
font-style:italic;/*斜体*/
设置文字加粗效果
font-weight:nomal; /*正常*/
font-weight:bold; /*粗体*/
font-weight:bolder; /*加粗*/
font-weight:100/*范围100-900，数字越大字体越粗*/

5,英文字母大小写转换

p.one{
            text-transform: capitalize; /*单词首字母大写*/
}
p.two{
            text-transform: uppercase; /*全部大写*/
}
p.three{
            text-transform: lowercase; /*全部小写*/
}

6,控制文字大小

font-size:12px; /*设置文字大小为12像素*/
font-size:2em; /*设置文字大小为当前文字大小的两倍*/
font-size:150%; /*设置文字大小为原来文字大小的1.5倍*/

6,文字的装饰效果
text-decoration: none; /*正常显示*/
text-decoration: underline; /*下划线*/
text-decoration: line-through; /*删除线*/
text-decoration: overline; /*顶线*/

7,设置段落首行缩进
text-indent:2em; /*首行缩进2个标准字符大小的距离*/
设置字词间距
在英文中，文本是由单词构成的，而单词是由字母构成的，因此对于英文文本来说，要控制文本的疏密成都，需要从两个方面考虑，即设置单词内部的字母间距(letter-spacing)和单词之间的距离(word-spacing)
word-spacing:10px;
letter-spacing:-1px;

8,设置段落内部的文字行高
如果不使用CSS，在HTML中是无法控制段落中行与行之间的距离的。而在CSS中，line-height正是用于控制行的高度，通过它可以调整行与行之间的距离。下面列出line-height属性的设置值：
长度：数值，可以用前面介绍的尺度单位。
倍数：font-size设置值的倍数
百分比：相对于font-size的百分比

9,控制文本的水平位置
text-align属性可以方便地设置文本的水平位置。
left：左对齐（浏览器默认）
right：右对齐
center：居中对齐
justify：两端对齐
设置文字与背景颜色
background-color:#000; /*背景色*/
color:#000; /*前景色*/

10,设置段落的垂直对齐方式
在CSS中有一个用于垂直方向对齐的属性vertical-align。在目前的浏览器中，只能对表格单元格中的元素进行垂直对齐设置，而对于一般的块级元素，例如div等，都是不起作用的。比如在表格单元格中使用vertical-align:middle，那么该单元格中的元素会实现垂直居中对齐，如果放在div中则没有效果。
使用line-height属性进行设置
如果文字内容只有一行，则可以使用line-height与height相同的办法使文字垂直居中。
弊端：如果文本内容超过一行，该方法则无效。

                                                                                   CSS的基本属性---图像样式

1,在HTML中可以直接通过<img>标记的border属性为图片添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的粗细。如果值为0，则显示为没有边框。不过这种方式的限制是边框只能是黑色，而且风格单一，且都是实线。

2,在CSS中可以通过边框属性为图片添加各式各样的边框。一个边框由3个要素组成。
1.border-width(粗细)：可以使用各种CSS中的长度单位。
2.border-color(颜色)：可以使用各种合法的颜色来定义。
3.border-style(线性)：可以在一些预先定义好的线性中选择。
为不同的边框分别设置样式
实际上一个边框分为四个方向，分别是left(左)、right(右)、top(上)、bottom(下)。可以为这四个方向的边框分别设置边框样式，比如：border-left-style、border-top-width。
在熟悉边框设置，可以将border的各个值写到一个语句中，用空格分离。比如：border:1px solid red，这个表示边框宽度为1像素，红色的实线。

3,CSS中控制图片的大小与HTML一样，也是通过width和height两个属性来实现。所不同的是CSS中可以使用更多的值，比如百分比。

img{
    width:50%; /* 相对宽度 */
    height:100px; /* 绝对高度 */
}

4,文字环绕
文字环绕图片的方式在实际页面中的应用非常广泛，如果再配合内容、背景等多种手段便可以实现各种绚丽的效果。在CSS中主要是通过给图片设置float属性来实现文字环绕的。

img{
       float:left;     /* 图片在文字左边 */
}

5,当图片与文字同时出现在页面上的时候，图片的对齐方式就显得很重要了。如果能够合理地将图片对齐到理想的位置，成为页面是否整体协调、统一的重要因素。下面从水平对齐和垂直对齐两方面来阐述。
水平对齐
水平对齐可以通过text-align属性来设置。比如在img标记的父标记中设置text-align后，该图片同样能根据设定的值进行对齐，比如：
<p style=“text-align:right”><img src=“1.jpg” /></p>
垂直对齐
图片垂直方向上的对齐方式主要体现在与文字搭配的情况下，尤其当图片的高度与文字本身不一致时。在CSS中同样是通过vertical-align属性来实现各种效果的。

<p><img src=“1.jpg” style=“vertical-align:text-bottom” /></p>

6,设置背景颜色
background-color:#00F
设置背景图片
background-image:url(bg.jpg)
设置背景图片平铺
在默认情况下，图像会自动向水平和垂直方向平铺。如果不希望平铺，或者只希望沿着一个方向平铺，可以使用background-repeat属性来控制。该属性有如下几种值：
repeat：水平和垂直方向平铺，默认值。
no-repeat：不平铺。
repeat-x：只沿水平方向平铺。
repeat-y：只沿垂直方向平铺。

7,如果设置背景图像不平铺，那么这背景图像默认是在元素的左上角显示。如果希望背景图像出现在右下角或其他位置的话，就需要使用CSS的一个属性background-position。

body{
    background-image:url(bg.jpg);
    background-repeat:no-repeat;/*不平铺*/
    background-position:right bottom;
}
/*
在background-position属性中，设置两个值:
    1.第一个值用于设定水平方向位置，可以选择left(左)、center(中)、right(右)。
    2.第二个值用于设定垂直方向的位置，可以选择top(上)、center(中)、bottom(下)。
除了可以使用固定值外，也可以使用像素和百分比来设定显示位置。
 */

8,在网页上设置背景图片时，随着滚动条的移动，背景图片也会跟着一起移动。如果使用CSS的background-attachment属性可以把背景图像设置成固定不变的效果，使背景图像固定。

body{
            background-image:url(bg.jpg);
            background-repeat: no-repeat;
            background-position: 50% 0px;
            background-attachment: fixed;
}