CSS学习实用笔记一.Css:Cascading Style Sheets 串联式样式表
二.按其位置 1. 内嵌样式（在需要的地方直接嵌套） <p style="color: sienna;margin-left:20px">一个段落</p>
2. 内部样式（典型声明方式）：把样式表放到页面的<head>里 <head> ...... <style type="text/css">
<!-- hr{color:sienna} p{margin-left:20px} body{backgroup-image:url("images/back.gif")} --!>
</style> ...... </head> 注意：有些底版本的浏览器不能识别style标记，会忽略style标记内容，并以文本形式直接显示在页面，为了避免这样的情况发生，我们用加HTML注释的方式（<!-- 注释 -->）隐藏内容而不让它显示。
3. 外部样式：存在一个样式表文件，在页面中用<link>(必须放在<head>标记内)连接此样式表文件。 <head> ...... <link href="mystyle.css" rel="stylesheet" type="text/css" media="all"> ...... <head> mystyle.css :已经存在的样式表， rel="stylesheet" : 确定在页面中使用这个外部样式表， type="text/css" ：此连接的文件类型是样式表文本， href=”mystyle.css”是文件所在的位置， media :选择媒体类型
一个外部样式表文件可以应用于多个页面，当你改变这个样式表文件时，所有页面的样式都随之而改变。 三. CSS注释 1. /*开头，*/结束 2. /* 定义段落样式表*/ p { text-align:center; /*文本居中排列*/ color:black; /*文字为黑色*/ font-family:"sans serif" /*字体为sans serif，注意此处属性值有多个单词组成，需要引号*/ }四.几种不同css定义方法 1.集体声明： 1> h1,h2,h3,h4,h4,h5,h6{color:green} 2> p,table{font-size:9pt} 等效(分项声明)：p{font-size:9pt} table{font-size:9pt} 2.类选择符声明： 1〉 定义两个不同的段落，向右对齐，另一个居中对齐
p.right{text-align: right} p.center{text-align: center}
2〉分别适用段落的类 <p class="right">这是段落向右对齐</p> <p class="center">这是段落居中排列</p> 3> 不用html标记，直接定义类选择符，则所有html标记都可以直接调用这个类选择符 定义： .center{text-align:center} 调用： <h1 class="center">此标题居中排列</h1> <p class="center">此段落也是居中排列</p>
3. ID选择符： 对这个单一元素定义单独的样式表(局限性较大) 定义ID选择符要在ID名称前加 "#" 号 ID选择符的应用和类选择符类似，只要把class换成ID即可。将上例中类用ID替代： 1〉 定义：（ /* 下例格式与上面的.center一样调用，匹配所有 id="intro" 元素 */ ） #intro { font-size: 110%; font-weight: bold; color:#0000ff； background-color:transparent }
2> 调用上述定义： <p id="intro">段落可以调用</p> <table id="intro">表格也可以调用</table>
3> 定义后只能单独调用：
定义： p#intro { font-size: 110%; font-weight: bold; color:#0000ff； background-color:transparent } 调用：<p id="intro">只有我才能调用</p>五.定义链接样式 1. a:link{font-size : 18pt ;text-decoration : none ;color : blue ;} a:visited {font-size : 18pt;text-decoration : none ;color : brown ;} a:hover {font-size : 24pt ;text-decoration : underline ;color : red;} a:active {font-size : 24pt ;text-decoration : none ;color : green ;} 2.顺序lvha 六．待续......
转载于:https://www.cnblogs.com/Weaver/archive/2006/12/29/607420.html
相关资源：云知梦 css3 学习笔记