学习笔记9
今天来进行系统的学习一下CSS(层叠样式表).
首先说一下层叠次序，四个优先权：
1.浏览器缺省设置
2.外部样式表
3内部样式表（位于 <head> 标签内部）
4.内联样式（在 HTML 元素内部）
CSS的结构：
selector {declaration1; declaration2; ... declarationN }选择器和一个或多个声明。每条声明由一个属性和一个值组成。例如h1{color:red;font-size:14px;}。如果值为多个字符，则需要给值加引号如 p{font-family:"sans serif";}常见的属性值有margin ,color,padding,font-family,background,font-style,font-weight,text-align border
CSS的高级用法：
选择器的分组例.h1,h2,h3{color:red;};
继承和派生，例body{font-size=10px;color:red;} p{color:green;}
id选择器 例 #red{color:red;}
类选择器 例 .class{}
属性选择器 例[title]{}
CSS的创建
外部样式表<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
内部样式表<head><style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style></head>
内联样式<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
多重样式 例 h1{text-align:center}居中对齐 h1{color: red} ->h1{text-align:center;color: red}
CSS的使用
背景 background-color background-image background-repeat:repeat-x(平铺) background-position:center background-position:50% 50% background-position:20px 100px
背景关联background-attachment:fixed声明图像相对于可视区是固定的
文本 text-indent:5em(文本缩进)，text-indent:-5em(悬挂缩进，建议针对负缩进再设置一个外边距或一些内边距) 百分比缩进div {width: 500px;} p {text-indent: 20%;} 处理空白符 p{white-space: normal;}
字体 body {font-family: sans-serif;} 如果用户代理上没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示 h1 元素。我们可以通过结合特定字体名和通用字体系列来解决这个问题：h1 {font-family: Georgia, serif;}
链接 a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
CSS列表 ul {list-style-type : square}把无序列表中的列表项标志设置为方块 li {list-style : url(example.gif) square inside}
表格边框 table th td{border:1px solid blue;}
