七海的html和css学习笔记（七）

第七章  CSS入门

        结合html和css

                先来看一个简单的css语句：p{ //代表设置<p>元素的样式，称之为选择器
background-color : red; //表示设置<p>元素的字体颜色，属性和属性值之间用冒号“：”隔开，语句用分号“;”结尾
} //语句使用花括号“{”和“}”括起来。                整个语句称之为一个规则（RULE）。
                将css语句放入html的<style>元素中即可。

                当不同元素的属性相同时，可以这样书写规则：

h1,h2{//设置两个选择器，选择器之间用逗号隔开
color:red;
}

                那如果想为h1设置额外的属性呢：h1,h2{//设置两个选择器，选择器之间用逗号隔开 color:red; }
h1{
font-family : sans-serif;
}         css的注释是/*这里是注释*/，两边可以不在同一行。

         封装css

               我们可以将css代码单独封装起来，再导入到html代码里（注意不要复制<style>标记，因为style属于html的标签）,封装起来的文件以.css结尾，我们把css文件称之为外部样式表。

               然后通过<link>元素将外部样式表导入到html代码中，下面看一下代码示例：
<link type="text/css" rel="stylesheet" href="lounge.css">                1. 使用link元素”链入“外部信息。
              2. 这个信息的类型是“text/css”。换句话说，这是一个css样式表，在html5中，不再需要这个属性（这是可选的）。

                3. rel属性指定了html文件与所连接文件之间的关系。我们要链接到一个样式表，所以这里使用值”stylesheet“。

                4. 样式表放在href中（这里使用的是相对链接，不过也可以是一个URL）。

                5. link是一个void元素，他没有结束标记。

        属性的继承

                就像人会从父母那里继承蓝色眼睛和黄色头发，同样的，元素也可以从他们的父元素继承样式。比如在<p>元素中写入了一个<em>元素，那么<p>元素就称之为<em>的父元素。元素会继承父元素的所有规则。
             

        继承覆盖

                比如有一个<em>元素继承了父元素<p>的所有规则，但是<em>元素需要自己的特殊规则该怎么办呢?                这个时候就可以使用覆盖，在css代码中单独的定义<em>元素的规则，如果定义的<em>元素规则和父元素的重合，那么，从父元素继承的规则将被覆盖，使用的是<em>单独定义的规则。

         类（class）

                如果想对元素内容分别设置样式呢？比如一大段文本被<p>标记，里面有多个<em>元素，想分别设置每个<em>元素的样式，使它们的颜色各不相同。
                这时就要引入类(class)的概念了。那么，类到底是什么，可以把它想象成是一个俱乐部，要加入这个俱乐部，就必须认可这个俱乐部所有的权利和责任，如遵循它们的样式标准。

                创建一个类有两步：首先，为html中的元素增加一个class属性，这样就会把元素增加到这个类中。其次，在css中选择这个类。下面看一下代码示例：
<p class="laugh"> //将这个p元素增加到了laugh类中
hahahaha
</p>                这就在html中将元素添加到了类中。下面看一下如何在css中选择这个类：p.laugh{ //先选择这个类中的元素，这里就是p，然后用"."指定一个类，最后写上类名laugh
//这里写指定样式的属性
}                这样就可以选择属于某个类的p元素，为他们指定样式。
                如果相对该类中的所有属性进行统一修改样式，可以这样做：
.laugh{ //不指定元素，直接输.laugh
//这里写样式代码
}                一个元素可以加入多个类。可以这样写：<p class="laugh xiao haha"> //各个类名放在class属性中，类名间用空格分离，类名的顺序并不重要。                如果一个元素属于多个类，所有这些都定义了相同的属性，会有什么结果？比如三个类都定义了color属性，会用哪个颜色？
                如果一个规则比其他规则更特定，就会使用那个规则的颜色，更特定是什么意思？后面会讨论这个内容，现在可以先来简单的了解一下规则的特定程度，使你对规则的特定程度有个认识：
p{color:black;} //这个规则会选择所有原来的段落元素
.greentea{color:green;} //这个规则选择greentea类的所有成员，这个规则更特定一些
p.greentea{color:green} //这个规则只选择greentea类的p元素，所以这个比上一个更特定一些
p.raspberry{color:blue} //这个规则也只是选择一个特定类中的段落，所以它与上一个p.greentea规则特定程度相同
                那如果<p class="laugh xiao haha">中，p.laugh、p.xiao、p.haha三个类的特定程度相同，又同时设定了颜色样式，那么会采用哪个颜色呢?
                这时会选择css文件中最后列出的那个规则。如果由于两个选择器有相同的特定性而无法解决冲突，就要利用样式表文件中的规则的顺序来解决问题。也就是说，你要使用css文件中最后列出的规则（与html代码中指定类的顺序无关）。

        检查你的css代码

                上一章提供了一个用于检查html代码的网站。同样的，css也有一个用于检查代码的网站：
                                                                                                                http://jigsaw.w3.org/css-validator/

        本章所介绍的属性

                

color : red //将颜色设置为红色
background-color : red;//将背景颜色设置为红色
border : 1px soild gray;//设置边框，1像素，实线，灰色
font-family : sans-serif //设置字体
border-bottom : 1px soild black;//在文本下加一条下划线，1像素 实线，黑色

top //控制元素顶部的位置
text-align //使用这个属性将文本居中，左对齐或右对齐
letter-spacing //这个属性可以在字母间设置间距
font-style //使用这个属性来倾斜文本
font-weight //用这个属性设置文本的粗细，可以用它来设置粗体
left //利用这个属性指定一个元素的左边所在的位置
list-style //用这个属性可以改变你列表中列表项的外观
padding //如果一个元素边缘和它的内容之间需要有空间，可以使用padding(内边距)
line-weight //这个属性设置一个文本元素中的行间距
font-size //让文本更大或更小
background-image //用这个属性在元素后面放置一个图像