CSS学习小结
日期：2014-05-17 浏览次数：20720 次
CSS
F CSS的基本概念
? 掌握样式表的语法规则
? 样式表的分类：
– 行内样式表
– 内嵌样式表
– 外部样式表
? 掌握常用的样式
指定显示样式
<P style = "color:red;font-size:30px;font-family:隶书;">
F CSS基础
@ CSS是Cascading Style Sheet的缩写，翻译为“层叠样式表”，简称“样式表”。
@ 样式表的首要目的是为网页上的元素精确定位。其次，把网页上的内容结构和格式控制相分离。即html的标签主要是定义网页的内容，而CSS决定这些网页内容如何显示。
@ 优点：简化网页的格式代码，加快网页下载显示的速度，也减少了需要上传的代码数量，大大减轻了重复劳动的工作量。
F 使用CSS
@ CSS通过“样式”来表示网页的颜色、字体、背景色、边框线及网页内容的位置及大小尺寸等属性。
@ 一系列的样式组成了“样式表”。
@ CSS的语法结构：
选择符{样式属性:取值;样式属性:取值;样式属性:取值;…}
CSS的基本语法
样式和样式表
1．样式
样式是由成对的属性名和属性值以冒号“：”相间组成。
2．样式表
一系列的“样式”以分号“；”相间组成为“样式表”。
根据样式代码的位置，分为三类：
q 行内样式
q 内嵌样式
q 外部样式
q 行内样式：HTML标签直接使用style属性，称为行内样式（Inline Style）。它适用于只需要简单地将一些样式应用于某个独立的元素的情况。
例如：<table style="color:red;margin-left:200px">
…
</table>
注意：在使用行内样式的过程中，建议同学们在<head>标签中添加<meta>标签，添加的<meta>标签如下：
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
内联的样式比其他方法更加灵活。要使用内联样式，必须使用Content-Style-Type HTTP页眉扩展对整个文档进行单独的样式表语言声明。使用内联CSS的网页制作者必须将text/css作为Content-Style-Type HTTP页眉.
@ 内嵌样式表：是在<head>标签内添加<style></style>标签对，在标签对内定义需要的样式。
例如，<head>
<style type=“text/css”>
td{font-size:9pt;color:red}
.font105{font-size:10.5pt;color:blue}
</style>
</head>
注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（<!-- 注释 -->）隐藏内容而不让它显示
内嵌样式-2 选择器
选择器分为：
? HTML 选择器
? CLASS 类选择器
? ID 选择器
? 样式选择器
? HTML标签选择器：在HTML页面中使用的标签，如果在CSS中被定义，那么此网页的所有该标签都将按照CSS中定义的样式显示。
? 类选择器：使用HTML标签的class属性引入CSS中定义的样式规则的名字，称为类选择器，class属性指定的样式名字必须是以“.”开头。
? ID选择器：ID属性是用来定义某一特定的HTML元素，与class属性刚好
