CSS

cindy851217

于 2008-12-26 09:29:00 发布

阅读量471

点赞数

文章标签： html css class import stylesheet javascript

本文链接：https://blog.csdn.net/cindy851217/article/details/3610966

版权

css:层叠样式表，它可以轻松设置网页元素的显示位置和格式外，还可以产生滤镜，图像谈话，网页淡入淡出的渐变效果。简单的说，css就是要多网页的显示效果实现与Word一样的排版控制。
设置CSS的几种方式：

·内联样式表：直接设置html标签的style属性的方式
HTML4.01标准建议：在网页的<head></head>标签中设置<meta http-equiv="Content-Style-Type" content="text/css">或者<meta http-equiv="Content-Style-Type" content="text/xsl">(采用数据岛的情况下)
———————————————————————————————————————————
·嵌入样式表：
在网页的<head></head>标签中设置<style>元素
<head>
     <style type="text/css" media="screen,projection">
       
     </style>
</head>
type属性指定类型，media属性指定当网页文档在哪些媒介上输出的时候才起作用
为什么这里要用    ?
如果客户端的浏览器支持style标签，则中的内容不会被忽略，如果客户端的浏览器不支持style标签，则中的内容将会被忽略

在<style></style>标签对中定义的每条样式规则的基本格式如下：
selector{property1:value1;property2=value2;......}

selector(选择器)：就是选择该样式规则作用于的网页元素
3种选择器：
1.网页元素(标签)HTML选择器
2.Class选择器
3.id选择器
————————————————————————————————————————————
·外部样式表：

首先编写一个test.css文件，文件中的内容如下：
P{
           font-size:20pt;
           color:blue;
           font-family:宋体；
           list-style-type:circle;
           text-decoration:underline
          }
接着编写一个要使用这个样式表的网页文件，假设网页文件与上面建立的css文件放置在相同的目录，那么在我们的网页文件中应该按一下规则引入这个css文件：
将<link rel="StyleSheet" href="test.css" type="text/css" media="screen" />(其中的href属性指定css文件)这个标签元素放置在<head></head>标签元素之内

————————————————————————————————————————————
·输入样式表：
可以使用css的@import声明将一个外部样式表文件输入到另外一个css文件中，被输入的css文件中的样式规则定义语句就成为了输入到的css文件的一部分。也可以使用@import声明将一个css文件输入到网页文件的<style></style>标签对中，被输入的css文件中的样式规则定义语句就成了<style></style>标签对中的语句
<style>

</style>

—————————————————————————————————————————————
Class选择器：
要将一种HTML标签所创建的各个网页元素分成几类，需要将这个HTML标签的class属性设置为不同的值
<p class="stop">sometext1</p> //这个段落使用 p.stop{color:red}这个样式(由class属性值确定)
<p class="warning">sometext1</p> //这个段落使用 p.warning{color:yellow}这个样式
<p class="normal">sometext1</p> //这个段落使用 p.normal{color:green}这个样式
在样式表中，可以分别为某个HTML标签的各个类别定义样式规则：
<style>
p.stop{color:red}
p.warning{color:yellow}
p.normal{color:green}
</style>
在样式表中，可以为某个类别的所有HTML标签定义样式规则(网页文件中的HTML标签元素的class属性为blueone的标签都使用 .blueone{color:blue}这个样式)：
<style>
.blueone{color:blue}
</style>

id选择器：
id属性用来定义某一个特定的HTML元素，id属性唯一标识一个html标签元素，id选择器就是为样式规则定义语句选择唯一的一个HTML标签元素
在样式表中，id值为yellowone的HTML标签元素规则定义语句如下：
<style>
#yellowone{color:yellow}
</style>

——————————————————————————————————————————————
总结：
ID选择器只能为单个HTML标签原色设置样式规则，因此具有一定的局限性。在CSS中应该尽量少用。

JavaScript可以根据这个ID值来操纵和定位这个特定的HTML标签元素对象。因此在JavaScript中被广泛使用

在网页中使用了嵌入和链接样式表之后，对某个元素的显示效果不满意的话，我们需要去修改已定义的相关样式表，这样很不方便。那么，我们可以直接使用内联样式表来设置这个标签元素的style属性来更新样式表

关联选择器：html标签元素的样式与这个关联选择器所定义的样式关联 eg: p em{color:yellow}，关联选择器定义的样式规则的优先权比单一选择器定义的样式规则的优先权要高
如果在
p em{color:yellow}
的后面部分定义了如下样式规则：
em{color:green}
但是，在段落标签<p>中定义的强调文本元素<em>仍用黄色字体
组合选择器：多个HTML标签元素使用同一种样式 eg:h1,h2,h3,h4,h5,p, ...{color:green}
伪元素选择器: