1. 作用:给网页统一的设置样式(字体,颜色,位置,大小)
2. 优点(与html相比):
1. css提供了更多的功能
2. 使用css可以将内容与显示风格完全分离
3. 语法:选择器{属性:属性值;属性2:属性值}
4. 选择器 :1. 选择器:选择出需要设置样式的内容(所有li)
2. 属性:设置什么(字体颜色)
3. 属性值:设置值(red)
5. 优先级:相同的选择器设置相同的属性时,后定义的选择器优先级高1. 标记选择器 :标记名:li
2. 类选择器 :在头标记写上:class="abc",引用时:.类名(例:.abc;li.abc)
3. ID选择器:#id名,定义了唯一的一个元素
4. 全局选择器 :*,所有元素
5. 组合选择器 :(类和标记结合使用)li.abc class=abc的li元素
6. 继承选择器 :td li
7. 伪类 :
<html> <head> <title>各种选择器</title> <style> /**此处写样式*/ /**标记选择器*/ li{font-size:20px;color:#206699;background-color:#ffffff;font-style:italic;text-shadow:0px 0px 20px orange} /**类选择器*/ p{background-color:ffeeff;font-size:25px;color:#206688} table{border-color:#206688 #eeddee #206688 #eeddee} .aaa{color:#105533} /**id选择器*/ #userId{font-size:20px;color:206688} #password{font-size:20px;color:206688} /**全局选择器*/ *{font-size:17px} /**组合选择器*/ li.aaa{font-size:23px} /**继承选择器*/ td li{color:774433} </style> </head> <body> <center> <p class="aaa">歌曲:不要说话</p> <p>作者:陈奕迅</p> <ul> <li>深色的海面布满白色的月光</li> <li>我出神望着海面不知飞哪去</li> <li>听见他在告诉你</li> <li>说他真的喜欢你</li> <li>暖成咖啡</li> <li class="aaa">安静地拿给你</li> <li>愿意在角落唱沙哑的歌</li> <li>再大声也都是给你</li> <li>灯光再亮也抱住你</li> </ul> <br/><br/> <table border=1> <tr> <td id="userId">用户名:</td> <td> <input type="text" name="userName" value="世纪佳缘"/> </td> </tr> <tr> <td id="password">密码:</td> <td> <input type="password" name="password"/> </td> </tr> <tr> <td>重复密码:</td> <td> <input type="password" name="password"/> </td> </tr> <tr> <td id="sex">性别:</td> <td> <input type="radio" name="sex" value="男" checked/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td id="hobby">爱好:</td> <td><li> <input type="checkbox" name="hobby" value="听歌"/>听歌 <input type="checkbox" name="hobby" value="篮球"/>篮球 <input type="checkbox" name="hobby" value="看书"/>看书 <input type="checkbox" name="hobby" value="写日记"/>写日记 </td> </tr> <tr> <td>学历:</td> <td><select name="degree"> <option value="1">小学</option> <option value="2">初中</option> <option value="3">高中</option> <option value="4" selected>大学</option> <option value="5">硕士</option> <option value="6">博士</option> </td> </tr> <tr> <td>获得奖项:</td> <td> <textarea rows="5" cols="20">请填写您获得的相关奖项</textarea> </td> </tr> <tr> <td>按钮:</td> <td><input type="button" name="summit" value="普通按钮:"/>按钮</td> </tr> <tr> <td>重置:</td> <td><input type="reset" name="reset" value="重置按钮:"/>重置</td> </tr> <tr> <td>提交:</td> <td><input type="submit" name="submit" value="提交按钮:"/>提交</td> </tr> <tr> <td>图片按钮:</td> <td><input type="image" name="image" src="city.jpg" width="50" height="50"/>图片按钮</td> </tr> </table> <center> <body> </html>
1. !important:
2. inline:
3. id:
4. class:
5. element:
6. 定义的位置:
1. 内部样式块:在html的<style></style>中定义(见上例),作用范围是当前网页
<html> <head> <title>定义内部样式块</title> <style> li{color:red} </style> </head> <body> <ul> <li>我们的爱</li> <li>过了就不再回来</li> <li>倔强坚持</li> <li>我还默默的等待</li> </ul> </body> </html>
2. 内联定义样式:直接在各标记的头标记的style属性里定义
<html> <head> <title>内联定义样式</title> <style> </style> </head> <body> <p style="color:red">积累,不计回报的积累,一旦太过计较,你的心就很难平静,往往就会半途而废</p> </body> </html>
3. 链入外部样式:<link href="路径" rel="stylesheet" type="text/css"/>
test0303.css:<html> <head> <title>链入外部样式</title> <link href="test0303.css" rel="stylesheet" type="text/css"/> </head> <body> <center> <p class="p1"> 虽然你现在可能看不见未来<br/> 不知道你现在所拥有的,懂得的,了解的能带领你到什么样的境界 </p> <p class="p2"> 直到未来的某个时刻<br/> 当你蓦然回首时 你才能将所走过的路串起来,进而发现就是这些 点点滴滴造就了你 </p> </center> </body> </html>
p.p1{color:#48AFFF;font-size:30px} p.p2{color:#5CFF7F;font-size:30px}
效果图:
6. 选择器:
7. 背景图片:1. 标记选择器 :标记名:li
2. 类选择器 :在头标记写上:class="abc",引用时:.类名(例:.abc;li.abc)
3. ID选择器 :#id名,定义了唯一的一个元素
4. 全局选择器 :*,所有元素
5. 组合选择器 :li.abc class=abc的li元素
6. 继承选择器 :td li
7. 伪类 :
1. 设置方式:
2. 属性:
1. background—image
2. background—repeat:
1. repeat :横向纵向重复(默认值)
2. no—repeat :不重复
3. repeat—x :背景图片横向平铺
4. repeat—y :背景图片纵向平铺
3. background—attachment: