第4章1 CSS基础概要.pptVIP

ID选择器 #id color: yellow; font-size: 30px; { } ID选择器 属性 值 属性 值 声明 声明 ID选择器 style type=text/css #one{ font-weight:bold; /* 粗体 */ } #two{ font-size:30px; /* 字体大小 */ color:#009900; /* 颜色 */ } /style body p id=oneID选择器1/p p id=twoID选择器2/p p id=twoID选择器3/p p id=one twoID选择器3/p 上例中，第一行应用了#one的样式，第二行和第三行将一个id选择器应用到了两个元素上，显然违反了一个id选择器只能应用在一个元素上的规定，但浏览器却也显示了CSS样式风格且没有报错。虽然如此，我们在编写CSS代码时，还是应该养成良好的编码习惯，一个id最多只能赋予一个html元素，因为每个元素定义的id不只是CSS可以调用，JavaScript等脚本语言也可以调用，如果一个html中有两个相同id属性的元素，那么将导致JavaScript在查找id时出错，例如函数getElementById ( )。第四行在浏览器中没有任何CSS样式风格显示，这意味着ID选择器不支持像class选择器那样的多风格同时使用。因为元素和id是一一对应的关系，不能为一个元素指定多个id，也不能将多个元素定义为一个id。类似id=one two这样的写法是完全错误的 类名和id名的大小写 关于类名和id名的大小写：CSS大体上是不区分大小写的语言，但是对于标记实体的类名和id名是否区分大小写取决于标记语言是否区分大小写，如果使用XHTML，那么类名和id名是区分大小写的，如果是HTML，则不区分大小写 DW中对CSS的可视化编辑 新建CSS规则的过程 DW对CSS的建立和编辑有很好的支持，对CSS的所有操作都集中在“CSS样式”面板中，一般我们首先要点“新建CSS规则” 来新建样式，这时会弹出如图所示的对话框： CSS规则定义面板 编辑CSS样式－也在CSS面板里 用CSS修饰文本－简单CSS属性的应用 CSS的文本属性 CSS中控制文本样式的属性主要有font-属性类和text-属性类，再加上修改颜色的color属性和行高line-height属性。DW中这些属性的设置是放在CSS规则定义面板的“类型”和“区块”中的。 其中text-indent表示首行缩进，在每段开头空两格通常是用text-indent: 2em;来实现，text-decoration: none;表示去掉下划线，line-height: 150%;表示调整为1.5 倍行间距。 文本对齐属性(text-align) 这个属性用来设定文本的对齐方式。有以下值： left (居左，缺省值) right (居右) center (居中) justify (两端对齐) 示例代码如下： .p2 {text-align:right} 注意：行内元素无法应用对齐属性，为什么？ 文本修饰属性(text-decoration) 这个属性主要设定文本划线的属性。有以下值： none (无，缺省值) underline?(下划线) overline (上划线) line-through (当中划线) 示例代码如下： .p2 {text-decoration: underline overline;} 文本缩进属性(text-indent) 这个属性设定文本首行缩进。其值有以下设定方法： length (长度，可以用绝对单位(cm, mm, in, pt,?pc)或者相对单位 (em, ex, px)) percentage (百分比，相当于父对象宽度的百分比) 示例代码如下： .p1 {text-indent: 8mm} 行高属性(line-height) 这个属性设定每行之间的距离。其值有以下设定方法： normal (缺省值) length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px)) percentage (百分比，相当于父对象高度的百分比) 示例代码如下： .p1 {line-height:1cm} 文本颜色属性(color) 用颜色属性(color)可以改变文本的字体颜色。示例代码如下： .p1{color:gray} 字间距属性(letter-spacing) 这个属性用来设定字符之间的距离。 normal (缺省值) length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px)) 示例代码如下： .p