CSS简介 WEB前端三剑客之二
什么是CSS CSS 指的是层叠样式表（Cascading StyleSheet）。
CSS语法规则 选择器 {属性: 取值} h1{ color:red; font-size:14px; } selector { declaration1; declaration2; ... declarationN; } h1{ color:red; font-size:14px; } 选择器 {属性: 取值}
示例：test.htm + mycss.css <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="mycss.css" type="text/css"> </head> <body> <h1>Bioinformatics</h1> </body> </html> //mycss.css h1{ color: red; font-size: 50px; }
元素选择器
派生选择器 li strong{ color: red; } <p><strong>我是黑色，因为我不在列表当中，所以这个规则对我不起作用</strong></p> <u1> <li><strong>我是红色。这是因为 strong 元素位于 li 元素内。</li> </u1>
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="mycss.css" type="text/css"> </head> <body> <p><strong>我是黑色，因为我不在列表当中，所以这个规则对我不起作用</strong></p> <u1> <li><strong>我是红色，这是因为 strong 元素位于 li 元素内。</strong></li> </u1> </body> </html>
id选择器 mycss.css #pid a{ color:#00755f; } #divid { color: red; <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <body> <p id="pid">hello css<a href="http://www.sjtu.edu.cn">sjtu</a></p> <div id="divid">this is a div</div> </body> </html> mycss.css #pid a{ color:#00755f; } #divid { color: red;
类选择器 .divclass { color: red; } .pclass a{ color: green; }
属性选择器 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style type="text/css"> [title]{ color: #00ff14; } [title=te]{ color: red; </style> </head> <body> <p title=>属性选择器</p> <p title="te">属性和值选择器</p> </body> </html> 属性选择器
基本样式（Basic style） 背景（background）、文本（text）
背景样式 属性 描述 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-color 设置元素的背景颜色 background-image 把图片设置为背景 background-position 设置背景图片的起始位置 background-repeat 设置背景图片是否及如何重复
背景颜色：background-color <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>I love bioinformatics</p> </body> </html> body{ background-color: red; } p{ width: 150px; padding: 10px; background-color: #0014ff;
背景图片：background-image <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>I love bioinformatics</p> </body> </html> body{ background-image: url("python.png"); background-repeat: no-repeat; // repeat-x, repeat-y, no-repeat }
背景位置；background-position body{ background-image: url("python.png"); background-repeat: no-repeat; // repeat-x(y) background-position: center top; // center middle background-attachment: fixed; }
文本样式 属性 描述 color 文本颜色 direction 文本方向 line-height 行高 letter-spacing 字符间距 text-align 对齐元素中的文本 text-decoration 向文本添加修饰 text-indent 缩进元素中文本的首行 text-transform 元素中的字母 unicode-bidi 设置文本方向 white-space 元素中空白的处理方式 word-spacing 字间距 文本样式
链接 链接类型 意义 a:link 普通的、未被访问的链接 a:visited 用户已访问的链接 a:hover 鼠标指针位于链接的上方 a:active 链接被点击的时刻 a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00;} /* 已被访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;} /* 正在被点击的链接 */
链接2 a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;} a:link {text-decoration: underline;} a:visited {text-decoration: none;} a:hover {text-decoration: underline;} a:active {text-decoration: underline;}
列表(list) <ul class="circle"> <li>bioinforamtics</li> <ul class="square"> <ol class="upper-roman"> </ol> <ol class="lower-alpha"> 列表(list) ul.circle {list-style-type:circle} ul.square {list-style-type:square} ol.upper-roman {list-style-type:upper-roman} ol.lower-alpha {list-style-type:lower-alpha}
表格（table） 属性 描述 border-collapse 设置是否把表格边框合并为单一的边框 border-spacing 设置分隔单元格边框的距离 caption-side 设置表格标题的位置 empty-cells 设置是否显示表格中的空单元格 table-ayout 设置显示单元、行和列的算法
#tb td,th{ border: 1px solid green; padding: 5px; } #tb{ border-collapse: collapse; width: 500px; text-align: center; #tb th{ color: black; background-color: lightseagreen; #tb tr.tr2 td{ background-color: #B2FF99; <table id="tb"> <tr> <th>name</th> <th>age</th> <th>number</th> </tr> <td>li</td> <td>3</td> <td>4</td> <tr class="tr2"> </table>