第三章CSS练习.docx

选择符选择符指的是要修改的元素。CSS中常用的选择符包括HTML选择符、类选择符、id选择符。HTML选择符所有的HTML标签都可以作为CSS的选择符，HTML选择符后是对应的元素的属性及属性值，指定了HTML选择符的样式后，当前页面中的相应元素会自动套用定义的样式。实例!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtdhtmlheadmeta http-equiv=Content-Type content=text/html; charset=UTF-8titleCSS使用示例-HTML选择符/titlestyle type=text/cssbody {background-color: yellow;}h1,h2,p {background-color: #00FF00;color: red}/style/headbody 这是body内的文字br/ h1这是标题1文字/h1 h2这是标题2文字/h2 p这是段落文字/p/body/html显示结果类选择符如果要对页面中的元素定义不同的格式，仅使用标签选择符是不够的，还需要类选择符。类选择符在选择符之前需要加一个实心的圆点，表示选择符的类型是类选择符。其格式为：selector.classname{ property1:value; property2:value; …}使用类选择符时，也可以不指定具体的选择符，直接使用“.”加类名，或者在“.”前添加“*”。这样可以使不同的选择符共享样式，提高代码的重用性。如果要对页面中的多种元素分类定义不同的格式，可以使用这种方式。其语法为：.classname{property1:value;…propertyN:value;}实例：!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtdhtmlheadmeta http-equiv=Content-Type content=text/html; charset=UTF-8titleCSS使用示例-类选择符/titlestyle type=text/css.one {color: red;font-size: 12pt;}.two {color: green;font-size: 14pt;}.three {color: #800080;font-size: 16pt;}/style/headbodyh1 class=one这是引用one类样式的标题1/h1p class=one这是引用one类样式的段落/pp class=two这是引用two类样式的段落/pp class=three这是引用three类样式的段落/p/body/html显示结果例题:html xmlns=/1999/xhtml head stylespan{font-size:80px;font-family:Arial,helvetica,sans-serif;}.g1, .g2{color:#1648EE;}.o1, .e{color:#D7162E;}.o2{color:#F4AA15;}.l{color:#42c34a;} /style /head bodyspan class=g1G/spanspan class=o1o/spanspan class=o2o/spanspan class=g2g/spanspan class=ll/spanspan class=ee/span /body/html显示结果：例题：html headstyle.cal{vertical-align:10px}/style /head body101-102=1 怎样移动一个数字，使等式成立？？br答案是 101-10span class=cal2/span = 1 /body/html显示结果：3．id选择符当需要为某一个元素单独设计样式时，可以使用id选择符。使用id选择符可以为每个元素的具体对象定义不同的模式，使用id选择符要先为设计样式的对象定义一个id属性。id选择符是唯一的，不同的元素的id值是不能重复的。例如：div id=“top”/div 然后使用以下方式定义top的样式：#top{ property1:value; property2:value; …}例题：!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtdhtmlheadmeta http-equiv=Content-Type content