网页设计实例教程陈旭东孙永芳崔为花张晓诺04章节.pptVIP

本章内容 4.1 CSS的基本类型 4.2 CSS的基本写法 4.3 CSS和表格结合 4.4 CSS和层结合 4.5 CSS和列表标签结合 4.1 CSS的基本类型 1. 自定义CSS 用户可以在文档的任何区域或文本中应用自定义CSS，应用自定义CSS后，相应的标签会出现class属性，该属性的值就是自定义CSS的名称。如果应用与部分文字，那么会出现span和/span标签，并且其中包含class属性。自定义CSS的名字前有一个“.”开头，其后是CSS样式的名字。 示例代码如下： .bg { background: url(bg.gif); } body class=bg 4.1 CSS的基本类型 2. 重定义标签的CSS 可以针对某一个html标签来定义CSS，也就是说定义的CSS只能应用于选择的标签。例如为td 标签定义了CSS，则页面中所有的td标签都自动应用该样式。 示例代码如下： td{color:#666666; font-size: 14px} 4.1 CSS的基本类型 3. CSS选择符 CSS选择符为特殊的组合标签定义CSS。CSS选择符是一种特殊类型的样式，常用的有四种，意义如下： a:link：定义正常状态下链接文字的样式 a:active： 定义鼠标点击时链接的样式 a:visited： 定义链接访问后的样式 a:hover： 设定鼠标位于链接上时的样式 4.1 CSS的基本类型 A:link { font-size: 12px; color: #000000; text-decoration: none } A:visited { font-size: 12px; color: #FF9900; text-decoration: none } A:active { font-size: 12px; color: #000000; text-decoration: none } A:hover { font-size: 12px; color: #000000; text-decoration: underline;  position: relative; left: 1px; top: 1px; clip: rect(); } 4.1 CSS的基本类型 4. ID选择符 ID选择符方式定义的CSS以“#”开头，其后是CSS样式的名字，定义的样式和页面元素的ID属性结合在一起。因为ID属性在页面内是唯一标识符，不能重复。所以ID选择符方式定义的CSS样式在页面内也只能起一次作用。 示例代码如下： #picbox { position:absolute; width:128px; height:132px; z-index:1; } div id=picbox/div 4.1 CSS的基本类型 5. 关联选择符 CSS提供了更灵活的使用方式。和上面的重定义标签的CSS做个对比吧。如果定义了重定义标签CSS，则页面中所有该标签都自动应用CSS。如果想在页面的某个范围内应用，该怎么办呢？ 答案就是使用关联选择符。示例代码如下： .para strong{ color:#FF0000; font-size: 16px;} Html代码如下： strong普通加重文本/strong pstrong普通加重文本/strong/p p class=parastrong红色加重文本，字号16px/strong/p 对代码的第一、二行，CSS样式并不起作用；在第三行中，外层的段落标签p应用了CSS 样式para，那么位于该段落标签内的strong自动应用该CSS样式。 4.1 CSS的基本类型 6. 组合定义 为了是样式表文件更简洁，可以把具有相同声明定义的选择符组合在一起，并用逗号分割开，示例代码如下： H1,H2,H3{font-size: 16px;} H1 B, H2 B, .para strong{ color:#FF0000; font-size: 16px;} 4.1 CSS的基本类型 7. 通配符 在CSS里，*是通配符，同时定义所有HTML标签的属性，例如将所有标签内的字体定义为12号字，代码如下： *{font-size:12px;} 再比如使用下述代码，将所有标签的外间距和内边距设置为0： *{ margin:0; padding:0;} 4.2 CSS的基本写法 1. 在HEAD内的实现 CSS最基本的应用方法实在HTML文件的头部，即在head与/head标签内，并且以style标签开始，以/style