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