初步了解CSS.ppt

CSS id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 # 来定义。 #red {color:red;} #green {color:green;} p{color:red;} 下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。 p id=red这个段落是红色。/p p id=green这个段落是绿色。/p CSS 类选择器 .center {text-align: center;} 在 CSS 中，类选择器以一个点号显示： 所有拥有 center 类的 HTML 元素均为居中。 在下面的 HTML 代码中，h1 元素有 center 类。这意味着h1将遵守 .center 选择器中的规则。 h1 class=center这里的文字会居中。/h1 CSS id选择器和类选择器的区别 ?在html中 id属性是唯一的。 假设你给一个div定义一个id属性即 div id=“xx”/div，则以后的div中我们一般不再使用xx这个编号。类选择器则可以使用多次。 ?不能使用 ID 词列表。 div中不能使用div id =xx xx2 xx3/div 类选择器可以这样div class=xx xx2 xx3/div 在实际编写中我一般多用类选择器，因为类选择器可以重复使用。 如何插入样式表 外部样式表 head link rel=stylesheet type=text/css href=mystyle.css / /head 内部样式表 head style type=text/css hr {color: sienna;} p {margin-left: 20px;} body {background-image: url(images/back40.gif);} /style /head 如何插入样式表 内联样式 div style=“font-size:10px;font-color:#ff0000“ 这里是内容 /div 直接定义在body部分的 div后 常用的CSS 元素属性 div+css布局时要用到的属性 width 宽度 height 高度 margin 外边距 padding 内边距 border 边框属性 后面常用的值 px 像素 %百分比 auto 自动 #xxx 颜色 常用的CSS 元素属性 元素后面常用的值 px 像素 %百分比 auto 自动 例：width:1000px 宽度为1000像素 width: 100% 宽度为100%屏幕宽度 width: auto 自动宽度（根据框内的内容自动调整宽度） 注意：margin（外边距）和padding（内边距）的使用 margin-top头部边距 margin-bottom:底部边距 margin-left:左侧边距 margin-right:右侧边距 margin: 0 auto 表示整个层居中 margin: 20px 10px 20px 10px (顺序为:上右下左,‘margin-top’、‘margin-right’、‘margin-bottom’、‘margin-left’,按照顺时针方向罗列的。 常用的CSS 元素属性 border属性 有三个子属性： border-width 线宽 border-style线型 border-color颜色 例：border:1px solid #3300FF 边框宽度1px 实线 颜色# 3300FF（也可以用border-top/border-left/border-right/border-bottom 定义单边边框） border:none 无边框 a img {border:none;} 图片加超链接后会自动出现边框，此时需要设置以上样式，将图片的边框去掉。 专题制做 技巧分享 de 之 初步了解CSS 常用的HTML标签 !DOCTYPE 定义文档类型 html定义 HTML 文档 title定义文档的标题 body定义文档的主体 h1 - h6 定义 HTML 标题 img图像 br/简单折行 p 段落 b粗体文本 strong粗体文本 big大号文本 em 强调文本 form定义供用户输入的 HTML 表单 input输入控件 button定义按钮 a