css学习札记（一）
日期：2014-05-17 浏览次数：20665 次
一 css样式表基础 1，css基本概念 css（cascading style sheet）即层叠样式表，简称样式表，要理解样式表的概念先要理解样式的概念，样式是对网页中的元素（字体，段落图像，列表等）属性的整体概括，即描述所有网页对象的显示形式（例如文字的大小，字体，背景及图像的颜色，大小等都是样式）。层叠，就是指当HTML文件引用多个css文件时，如果css文件之间所定义的样式发生了冲突，将依据层次的先后来处理其样式对内容的控制。 2，css基本语法 css语法包括三部分：选择符，样式属性和属性值 css基本语法： selector{property:value; property:value;.... proerty:value} selector代表选择符，property代表属性，value代表属性值 选择符包括多种样式，所有HTML标记都可以作为选择符，如body，p，table等都是选择符。但在利用css的语法给他们定义属性和值时，其中属性和值要用冒号隔开。 例如：body{color:red} 如果属性值由多个单词组成，并且单词间有空格，那么必须给值加上引号，如字体的名称经常是几个单词组成 例如：p{font-family:"Courier New"} 如果需要对一个选择符指定多个属性时，用分号将属性隔开 例如：p{text-align:center; color:red; font-family:calibri} 为了提高代码的可读性，上面的例子也可以分行写 p { text-align:center; color:red; font-family:calibri } 相同属性和值的选择符组合起来称为选择符组。如果需要给选择符组定义属性和值，只要用逗号将选择符组分开即可，这样可以减少重复定义样式 例如： p,table{font-size:10pt} 其效果完全等效于： p{font-size:10pt} table{font-size:10pt} 3，类选择符 用户类选择符可以把相同的元素分类定义成不同的样式，在定义类选择符时，在自定义类名称的面前加一个句点（.）。 类选择符语法： 标记名.类名{样式属性:取值; 样式属性:取值;...} 例如：要设置两个不同文字颜色的段落，一个为红色，一个为蓝色，可以利用如下代码预定义两个类 p.red{color:red} p.blue{color:blue} 以上的代码中定义了段落选择符p的red和blue两个类，即red和blue成为类选择符，其中类得名称可以是任意英文字母或是字母开头的数字组合。要注意的是，这里的p（HTML）标记是可以省略的。而且在实际应用中，这种省略HTML标记的类选择符是最常用的css方法，因为这种方法定义的类选择符没有适用范围的限制。而不省略HTML标记的类选择符，其适用范围仅限于该标记所包含的内容，例如下面省略了HTML标记的类选择符。 .red{color:red} .blue{color:blue} 但是要怎么样才能在不同的段落里应用这些样式呢？只要在HTML标记里加入已经定义的class参数即可，如下应用了刚才定义的两个类选择符 <p class=red>或者是<p class=blue> 4，id选择符 在HTML文档中，需要唯一标识一个元素时，就会赋予它一个id标识，以便哎对整个文档进行处理时能够很快地找到这个元素。而id选择符就是用来对这个单一元素定义单独的样式。其定义方法与类选择符大同小异，只需要把句点（.）改为井号（#），而调用时需要把class改为id id选择符语法：标记名#标识名{样式属性:取值; 样式属性:取值;...} 例如，如果要在页面中定义一个id为salary的元素，并要设置这个元素为红色，那么只要添加如下代码 #salary{color:red} <p id="salary"> 由于id选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用 5，包含选择符 包含选择符是对某种元素包含关系（如元素1里包含元素2）定义的样式表。这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。例如： table b{font-size:11px}这里只是说明表格b内的字号为11像素，对表格外的字号没有影响 6，伪类 伪类不属于选择符，它是让页面呈现丰富表现力的特殊属性，之所以称为“伪”，是因为它指定的对象在文档中并不存在，他们指定的是元素的某种状态 应用最广泛的伪类是链接的4个状态——未链接状态（a:link）,已访问链接状态：（a:visited）,鼠标指针悬停在链接上的状态（a:hover）以及被激活（在鼠标单击与发生的事件）的链接状态（a:active）。在HTML页面内，使用<a>标记链接元素并没有设置4个状态的代码，但是可以通过设置链接的伪类来使其呈现这些状态。选择符和伪类之间用英文分号隔开 7，选择符优先级 在应用选择符的过程中，可能会遇到同一个元素由不同选择符定义的情况，这时候就要考虑到选择符的优先级。通常我们使用的选择符包括id选择符，类选择符，包含选择符和HTML标记选择符等。因为id选择符是最后被加到元素上的，所以优先级最高，其次是类选择符。!important语法主要用来提升样式规则应用优先级。只要使用了!important语法声明，浏览器就会优先选择它声明的样式显示。所以若想打破已定义的优先级顺序们可以使用!important声明 8，插入css样式表 插入css样式表到HTML文件中有4种方法，分别是：链入外部样式表，内部样式表，嵌入样式表和导入外部样式表。单在应用这4种方法将css文件插入到HTML文件时，由于css文件的定义可以放置在HTML文件的几个不同位置，所以将其分为头部，主体和外部。css文件的定义可以放置在HTML文件的几个不同位置，所以将其分为头部，主体和外部。 css文件定义在HTML文件头部的方法：内部样式表 css文件定义在HTML文件主体的方法：嵌入样式表 css文件定义在HTML文件外部的方法：链入外部样式表，导入外部样式表 9，链入外部样式表 链入外部样式表先把样式表保存为一个单独的文件，然后在HTML文件中使用<link>标记链接，同时这个<link>标记必须放到HTML代码的<head>区域内 基本语法：
