CSS

浏览数：41 / 时间：2015年06月09日

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>