CSS样式 1.内联式CSS样式表:把CSS代码直接写在现有HTML标签中 (1)<p style="color:red">这里是红色的字</p> (2)<p> 这里是红色的字</p style="color:red"> 注:CSS样式代码要写在style=""双引号中,如果右多条CSS样式代码设置可以写在一起,中间用分号隔开 <p style="color:red" ; font-size:12px>这里是红色的12像素的字</p> 2.嵌入式CSS样式表:把CSS代码写在<style type="text/css"></style>标签中间 <style type="text/css"> span{ color:red; } </style> <body> <span>这里是红色的字</span> </body> 3.外部式CSS样式:把CSS写在单独的一个文件中 在index.html文件中: <link href="style.css" rel="stylesheet" type="text/css" /> <body> <span>这里是红色的字</span> </body> 在style.css文件中 span{ color:red; } 注: 1.CSS样式文件名称以有意义的英文字母命名,如main.css 2.rel="stylesheet" type="text/css"是固定写法不可修改 3.<link>标签位置一般写在<head>标签之内 三种方法的优先级:离修饰的内容距离越近越优先,就近原则
选择器 选择器{ 样式 } 在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式"作用于网页中的哪些元素 标签选择器:html代码中的标签 p{pont-size:12px; line-height:1.6em;} 上面的p,就是一个p标签 类选择器 语法: .类选择器名称{CSS样式代码;} 英文圆点开头 名称可以随意起 例: <style type="text/css"> .stress{ color:red; } </style> <body> <span clss="stress"> 要修饰的文字</span> </body>
ID选择器 ID选择器类似类选择器,区别在于 1.为标签设置id="ID名称",而不是class="类名称" 2.ID选择符的前面是#,而不是. 例: <style type="text/css"> #stress{ color:red; } </style> <body> <span id="stress"> 要修饰的文字</span> </body> 注:ID选择器在文档中只能使用一次 可以用类选择器词列表方法为一个元素同时设置多个样式,ID选择器却不可以 例: .stress{ color:red; } .bigsize{ font-size:25px; } <p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>
子选择器 即大于符号(>),用于选择指定标签元素的第一代子元素 例子:
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>子选择符</title>
6 <style type="text/css">
7 .food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
8
9 </style>
10 </head>
11 <body>
12 <p class="first">三年级时,<span>我还是一个<span>胆小如鼠</span>的小女孩</span>,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
13 <h1>食物</h1>
14 <ul class="food">
15 <li>水果
16 <ul>
17 <li>香蕉</li>
18 <li>苹果</li>
19 <li>梨</li>
20 </ul>
21 </li>
22 <li>蔬菜
23 <ul>
24 <li>白菜</li>
25 <li>油菜</li>
26 <li>卷心菜</li>
27 </ul>
28 </li>
29 </ul>
30 </body>
31 </html>
包含(后代)选择器 即加入空格,用于选择指定标签元素下的后辈元素 注:与子选择器的区别:子选择器仅是指它的直接后代,或者可以理解为作用于子元素的第一代后代 而后代选择器是作用于所有子后代元素。
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>后代选择器</title>
6 <style type="text/css">
7 .first span{color:red;}
8
9 .food li{
10 border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
11 }
12 </style>
13 </head>
14 <body>
15 <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
16 <!--下面是本小节任务代码-->
17 <ul class="food">
18 <li>水果
19 <ul>
20 <li>香蕉</li>
21 <li>苹果</li>
22 <li>梨</li>
23 </ul>
24 </li>
25 <li>蔬菜
26 <ul>
27 <li>白菜</li>
28 <li>油菜</li>
29 <li>卷心菜</li>
30 </ul>
31 </li>
32 </ul>
33
34 </body>
35 </html>
通用选择器 匹配html中所有标签元素 例子:
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>* 选择符</title>
6 <style type="text/css">
7 * {color:red;}
8
9
10 </style>
11 </head>
12 <body>
13 <h1>勇气</h1>
14 <p>三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
15 <p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
16 <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
17 </body>
18 </html>
分组选择符 在html中多个标签元素设置同一个样式时,可以用分组选择符(,) 如: h1,span{color:red;} 相当于: h1{color;red;} span{color:red;}