CSS简单笔记

一、加入样式表到HTML文档
1、内联样式
<p style="color: #F00">
2、内嵌样式
<style type="text/css">p {color: #F00;}</style>
3、外部样式
<link rel="stylesheet"type="text/ css" href="external.css"/>
4、样式表适用的环境
所有流行的浏览器都支持最普通的media属性。该属性可以应用到<link>元素中来确定样式表适用的环境。比如：
<link rel="stylesheet" media="handheld" type="text/ css" href="external.css"/>
说明样式表适用于手持设备。media支持的属性值有screen，print，all等

二、样式表的语法
CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。
基本格式如下：
selector {property: value} ，多个属性/值对必须由分号隔开。

选择符可以是多种形式：
1、要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：
body {color: black}
2、类选择符，以点号开头，比如
.right {text-align: right}
应用类选择符到标记
在标记的class属性中填入类的名称，注意不要点号。如：
<div class="dreamdu1">连接div标签与dreamdu1样式<div>
<div class="dreamdu12px dreamdublack dreamdubold">使用空格分开多个样式连接div标签<div>

3、ID选择符

在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式，样式只应用于ID参数指定的元素。例如：
<p id="intro">
这个段落向右对齐
</p>
定义ID选择符要在ID名称前加上一个“#”号。下面这个例子，ID属性将匹配所有id="intro"的元素：
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

将ID和选择器结合
h2#title{

}
标识应用于ID属性为title的h2标记

4、选择符组

你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：
h1, h2, h3, h4, h5, h6 { color: green }

5、包含选择符

可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，
table a
{
font-size: 12px
}

三、样式表层叠
样式表层叠指可以将多个样式表应用到同一个页面元素，该元素展现所有应用的样式，对于多个样式表中重复定义的部分，高层样式将覆盖低层样式。最高层的样式是内联样式，其次是内嵌式样式，最后是外部样式。可以使用内联或内嵌式样式表覆盖外部定义的样式表。
对于外部定义的样式表，按照加入的顺序层次逐渐变高，最有加入的外部样式表在外部样式中具有最高的层次。
比如，依次加入如下样式表：
<link rel="stylesheet"type="text/ css" href="first.css"/>
<link rel="stylesheet"type="text/ css" href="second.css"/>
<link rel="stylesheet"type="text/ css" href="third.css"/>
最后一个链接样式表（third.css）层次最高，优先执行它所包含的所有规则。任何在third.css中没有定义的规则则按照第二个样式表（second.css）执行，以此类推。third.css中定义的样式将覆盖在first.css或second.css中定义的同名样式。

四、样式表继承
在Html元素中，子元素将继承赋予父元素的特定CSS值。

五、样式表的组织
大型工程中可能会存在多个样式表，如何组织这些样式表呢？
1、文件夹方式
css
--default
----default.css
--user
----register.css
----login.css
--news
----news.css
将样式表按照对应的网站模块分门别类的存放。

2、应用import属性
@import url("default.css");
@import url("news.css");