别具光芒CSS网页布局案例剖析摘要和经验.docxVIP

注意：本文档纸张大小为A3。 DOCTYPE （文档类型）:transitional （过渡类型）、strict （严格类型）。 过渡类型：兼容以前版本定义的，但在新版本已经废除的标记和属性。 严格类型：不兼容已经废除的标记和属性。 XHTML是HTML的严谨版，要求更严格，目的是为了标准化，但也很简单，只要一切小写，一切封闭，一 切双引号就0K。 块级元素：说简单点就是其前后回车符，会自动换行；行内元素：没有回车符，在一行显示；超链接a、span、 b、strong都为行内元素。行内元素不能设置高度、宽度、margin、padding等具有几何意义的属性。如需设 置，加上display:block;即可转化为块级元素。 HTML与CSS是内容与形式的关系。以便内容与形式分开，便于管理。 7?dw软件给我们提供了两种只能添加结束标签的选项：键入 y 后、键入起始标签后，两者都自动 生成结束标签＜/*＞o设置方法：编辑?＞首选参数亠代码提示。 8.起始标签和结束标签中的内容，只需双击即可选中，这对于在代码视图中修改＜title＞无标题文档＜/title＞中的 名称甚是方便。 9?同一个class可以应用于多个标记，一个标记也运用多个class,如vhl class二〃blue red〃＞内容＜/hl＞,这是会 出现冲突，因为?blue/.red的优先级相同。这是会以CSS中定义的先后顺序为准，后面的优先于前面的。 10?选择器优先级：行内样式＞ID样式〉类别样式〉标记样式。此外：行内式〉嵌入式＞导入式。 在 HTML 中引入 CSS 时，导入式的＜style＞@import sheetl.css;＜/style＞在 IE8＞ Firefoxl8＞ 360 安全浏览器 6 中没有效果。 在对图片设置CSS时,边距属性用margin,而不是padding； 在对图片设置CSS时，border属性可以这样设置border: lpx #9999cc dashed; 段落首行缩进两个字，用text-indent:2em; 文字行间距，用 line-height:1.5; 16?页面整体设置边距时，对body设置CSS,也用margin 17?附上一段CSS代码： 6 7 Q 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 :二 J 3839 38 39 40 41 42 43 44 45 hl角思网络有限公司/hl img src=nDw.pngf width=n128n height=rf128rf / p 富〉依托于在安防领域丰富的设计芨实施经验、业畀领先的技术硏发优势，畅思网络作为一个专业从事安防设备硏发及生产 的设备供应商，能够为用户提供各种从简单使用到高效集成的安防解决方案。/p p 在原有网络产品和朋务供应商基础上，不断拓展新的业务发展领域，组建了一支具有丰富安防产品背昱和专业技术知识 完善的高素质安防研发队伍，成功研制出技术领先的安防产品。专业的生产人员，庞大的研发队伍，使畅思网络迅速步入行业的前沿o/p V/bcdy /html 最终效果: 一、css选择器 ?基本选择器 ?复合选择器 ■标记选择器 ■ “交集”选择器 ■类别选择器 ■ “并集”选择器 ■ ID选择器 ■ “后代”选择器 ?子选择器 标记选择器：在headstyle/stylex/head中，先写标记hl,后面紧跟大括号｛属性：属性值；｝ 6 style 7 hl{ Q color:red; 9 font-size:25px; 10 } 11 /style 12 /head 13 14 bcdy 15 hl? 是 hl 标题 /hl 16 /bcdy 17 /html 类别选择器：在起始标签中写上class二〃名称〃，在headstyle/stylex/head中，先写英文句号〃?〃，后面紧 跟名称｛属性:属性值；｝ 6 style 7 ? red{ Q color:red; 9 font-size:18px; 10 } 11 /style 12 /head 13 14 bcdy 15 p class=fredrfclass选择器l/p 16 /bcdy 17 /html ID选择器：在起始标签中写上id=名称〃，在headxstylex/stylex/head中，先写#,后面紧跟名称｛属性:属 性值；｝ 6 style 7 #green{ Q font-size:30px; 9 color:#009900; 10 } 11 /style 12 /head 13 14 bcdy 15 p id=Mgreennidi^择器3/p 16 /bcd