HTML5学习笔记（6）CSS3-基础入门

         CSS（Cascading StyleSheet）是层叠样式表，在网页制作时候采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景等效果实现更加精确地控制。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发作的。CSS的好处在于用户只需要一次性定义文字的显示样式，就可以在各个网页中统一使用了。

                                             （百度的页面就是用CSS做的） 

1. CSS基本语句

选择器{

属性名：值；

属性名：值；}

div{
width：100px；
font-size:16pt;
color:red
}

// 把div元素的宽度设置为100，大小设置为16，颜色为红色

基本语句都有一个选择器（Selector），用于指定在HTML文档中哪种HTML标记元素（如body、p或h3）套用{}内的属性设置。

2. 在HTML文档中应用CSS样式

1. 内部样式表

在网页中可以使用style元素定义一个内部样式表，指定该网页内元素的CSS样式

 
   
 
 
   CSS示例
   
文字的颜色和背景颜色是之前的属性设置
 
 

2.样式表文件

一个网站包含很多网页，通常这些网页都使用相同的样式，可以定义一个样式表文件，样式表文件的扩展名为.css，然后在所有网页中引用样式表文件。在HTML文档中可以使用link元素引用外部样式表。

创建一个style.css文件

  A {color: red}
  P {background-color: blue; color:white}

引用style.css文件

  
    
  
 
   CSS示例
   
文字的颜色和背景颜色为css中的设置
 
 

3. CSS选择器

1. 标记选择器

标记选择器决定哪些标记元素采用相应的CSS样式

比如在style.css文件中对 p标记 样式的申明如下

P{
font-size:12px
background:#900 //红色
color：090   //绿色
}

2.类别选择器

在定义HTML元素时，可以使用class属性指定元素的类别。

这个区域的字体为红色
这个段落的字体为红色

CSS的类选择器根据类名来选择，前面以“."来标志，如：

.demoDiv{
color:#FF0000
}

这样所有class为demoDiv的元素内容都会应用这个样式，包括div和p

3.ID选择器

ID，相当于HTML文档中元素的“身份证”，以保证其在一个HTML文档中具有唯一性，要将一个ID包括在样式定义中，需要‘#’号作为ID名称的前缀，例如讲id=‘highlight’的元素设置背景为黄色的代码如下：

# highlight{background-color：yellow}