CSS—基本常识

来源：互联网发布：美人之间淘宝网编辑：程序博客网时间：2024/06/05 03:40

1. 作用：给网页统一的设置样式(字体，颜色，位置，大小)

2. 优点(与html相比)：

1. css提供了更多的功能
2. 使用css可以将内容与显示风格完全分离

3. 语法：选择器{属性:属性值;属性2:属性值}

1. 选择器：选择出需要设置样式的内容(所有li)
2. 属性：设置什么(字体颜色)
3. 属性值：设置值(red)

4. 选择器：

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>

5. 优先级：相同的选择器设置相同的属性时，后定义的选择器优先级高

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"/>

<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>

test0303.css:

p.p1{color:#48AFFF;font-size:30px}p.p2{color:#5CFF7F;font-size:30px}

效果图：

6. 选择器：

1. 标记选择器：标记名：li
2. 类选择器：在头标记写上：class="abc"，引用时：.类名(例：.abc;li.abc)
3. ID选择器：#id名，定义了唯一的一个元素
4. 全局选择器：*，所有元素
5. 组合选择器：li.abc class=abc的li元素
6. 继承选择器：td li
7. 伪类：

7. 背景图片：

1. 设置方式：
2. 属性：

1. background—image
2. background—repeat：

1. repeat ：横向纵向重复(默认值)
2. no—repeat ：不重复
3. repeat—x ：背景图片横向平铺
4. repeat—y ：背景图片纵向平铺

3. background—attachment：

阅读全文

0 0