HTML和CSS

1.html常用标签:Text,Textarea,Radio,Checkbox,Select,File,Hidden,Submit,Reset,Button

2. 一般说来CSS所有样式有下面的规则(第四个最有优先性)

    1). Browser default: 浏览器默认

    2). External style sheet: 外部样式表

    3). Internal style sheet (inside the <head> tag): 内嵌样式表(在<head>标签内)

    4). Inline style (inside an HTML element): 行内样式(在一HTML元素内)

3. CSS的语法由三部分组成:一个选择器,一个属性和一个值。例如:selector {property:value},body{color:black}

4. 如果值为多个单词则用双引号括起来: p {font-family: "sans serif"}

5. 注意:如果你想指定多个属性,你就必须将每个属性用分号隔开: p {text-align:center;color:red}

6. 你可以将选择器组合。用逗号分隔每个选择器。下的例子将所有的标题元素组合起来,它们的颜色都变为绿色:h1,h2,h3,h4,h5,h6 { color: green }

7. 用选择器类(.className)你可以将同一类型的HTML元素定义出不同的样式。注意:每个HTML元素只能有一个类属性。

8. 类属性定义的时候,可以是:标签名.类名,如:p.right {text-align: right}。

    你也可以省略标签名称直接去定义,这样就可以在所有的HTML元素中使用:如:.center {text-align: center}

9. 请不要用以数字开头为名称的类,在Mozilla/Firefox中不能正常运作。

10. 使用id 选择器你可以为不同的HTML元素定义相同的样式。举例:#green {color: green},p#green {color: green}

11. 和class一样,id的名称的开头也不要使用数字,不然就无法在Mozilla/Firefox中正常运作了

12. CSS注释格式:/* 内容 */

13. 当浏览器阅读样式表,它会依据它(样式表)来格式化文档。有三种方法可以插入样式表:

     1). 外部样式表(External Style Sheet )

     2). 内嵌样式表(Internal Style Sheet )

     3). 行内样式(Inline Styles

14. 使用外部样式表是使样式应用于多张网页的理想方法。通过这个方法你只需改动一个文件就能改变整个网站的外观。使用<link>标签让每个页面都连接到样式表。

      <link>标签在head区域使用:

      <head>

                <link rel="stylesheet" type="text/css" href="mystyle.css" />

      </head>

      浏览器将从mystyle.css文件中读取样式定义信息,并依据它来格式化文档

15. 外部样式表可以用任何一个文字编辑器来书写。文件不应该包含任何的html标签。并保存为一个后缀为.css的文件.下面是一个样式表文件的内容:

      hr {color: sienna}

      p {margin-left: 20px}

16. 注意:请不要在属性值和其单位间加上空格!如:margin-left: 20px

17. 一份内嵌样式表应该在当有单独文档有特殊样式的时候使用。使用<style>标签在head区域内定义样式,像这样:

      <head>

               <style type="text/css">

                          hr {color: red}   

                          p {margin-left: 20px}

                          body {background-image: url("images/back40.gif")}

                </style>

       </head>

18. 注意:浏览器一般会忽略未知的标签。这就意味着老的浏览器不能支持样式,会忽略<style>标签,但<style>里的内容会显示在页面上。在HTML注释元素中隐藏它可以

      来避免这类情况在老的浏览器中发生:

      <head>

               <style type="text/css">   

               <!--

                         hr {color: sienna}

                         p {margin-left: 20px}

               body {background-image:url("images/back40.gif")} -->

               </style>

        </head>

19. 使用行内样式就失去了样式表的优势而将内容和形式相混淆了。一般这类方法在个别元素需要改变样式的时候使用。在相关的标签上用style属性来加入行内样式。样式属性可以包含

      任何CSS属性。例子中将展示怎样给一个段落加上左间距并将颜色改为red:

      <p style="color: red; margin-left: 20px"> This is a paragraph </p>

20. 设置CSS样式可以通过:选择器,类属性,ID属性

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。