CSS中样式

CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。要想让CSS对网页内容有效果,必须将CSS代码引入网页,通常有四种方式,详见下文。    

      .1

       使用HTML标签的STYLE属性

将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式。这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利于后期的修改和维护,当需要修改网站的样式时,一个相同的修改可能涉及多个地方,维护成本高。使用STYLE属性的样式效果最强,会覆盖掉其它几种引入方式的相同样式效果。

      .2

      将样式代码写在页面<STYLE>...</STYLE>标签之中

  • <STYLE>...</STYLE>结构可以位于页面<HTML>标签中的任何位置,也可以多次出现。通常是将整个<STYLE>...</STYLE>结构写在页面的<HEAD>...</HEAD>部分中。这种引入CSS方式的特点是每个页面的CSS代码可能具有统一性和规划性,一个页面内部便于复用和维护,但多个页面之间的CSS代码复用仍然不够。

    .3

  • 使用 LINK标签,引入外部CSS文件

    将css代码写在一个单独的文件中,用link标签直接引入该文件到页面中。一个页面可以多次使用LINK标签引入多个外部css文件,注意这些CSS代码的相互影响,通常是后引入的CSS文件会覆盖前面引入的CSS文件的相同效果。这种引入CSS的方式是目前最为流行的,可以在站个网站范围内进行CSS代码的规划,方便复用和维护,但这样将代码高度集中,代码量可能过大,维护不当的话又容易出现混乱。

  • .4

    使用@import引入CSS文件

    使用@import引入CSS文件有两种方式,一种可以放在页面中的<STYLE>...</STYLE> 中,用法如下:

     @import url(index2.css);

    另外也可以放在CSS文件中使用,用法如下:

     @import "sub.css";

    使用用@import引入CSS可以很方便的引入外部文件的CSS代码,方便维护和规划。但是每多引入一个CSS文件,就会对服务器增加一次连接请求,当访问量较大时,需在维护性和性能上进行权衡。

时间: 2024-10-05 05:50:17

CSS中样式的相关文章

CSS中样式覆盖优先顺序

原文地址:http://www.3lian.com/edu/2014/09-25/168393.html 层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式 其中样式表又有: 类选择器 < 类派生选择器 < ID选择器 < ID派生选择器 派生选择器以前叫上下文选择器,所以完整的层叠优先级是: 浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派

css中的段落样式及背景

一.段落样式 css中关于段落的样式主要有行高,缩进,段落对齐,文字间距,文字溢出,段落换行等.它们的具体语法如下: line-height : normal | length text-indent : length text-align : left | right | center | justify letter-spacing : normal | length text-overflow:clip | ellipsis word-wrap:normal | break-word 其中

CSS中的样式覆盖原则

规则一:由于继承而发生样式冲突时,最近祖先获胜(最近原则).CSS的继承机制使得元素可以从包含它的祖先元素中继承样式,考虑下面这种情况: <html> <head> <title>rule 1</title> <style> body {color:black;} p {color:blue;} </style> </head> <body> <p>welcome to <strong>

css中的列表样式

在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化. 在css中对列表样式主要是对列表项目前列表符号的设置,其语法如下: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian

css中的继承、层叠、样式优先级机制

一.继承与层叠: 注: 可继承的样式: font-size font-family color ul li dl dt dd; 不可继承的样式:border padding margin width height ; 二.样式优先级机制: 1.css中的选择器有如下几类: 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p...) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器(li a) 7.通配符选

css中的类样式和id样式有何区别?

W3C标准中对于ID与CLASS的设定是:ID具有唯一性,CLASS具有普遍性. 而目前大部分浏览器确实可以定义页面中多个元素的ID相同,并赋以相同的样式,因为目前的浏览器和CSS都对其睁一只眼闭一只眼. 就比如说法律规定你做好事,但你也可以去做坏事一样.这是一个标准,你可以遵守,也可以不遵守,但是不遵守的后果很严重. 在CSS中你可能不会碰到太大的问题.但是当用JavaScript调用ID时,问题就来了,比如下面的代码: <p id="html">第一段文字</p&

CSS中的ul与li样式详解 list-type

转自新浪博客http://blog.sina.com.cn/u/2539885750 ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.list-style-position属性和list-style属性. 一.list-style-type属性 list-style-type属性是用来定义li列表的项目符号的,即列表前面的修饰.list-style-type属性是一个可继承的属

CSS中的背景、雪碧图、超链接的伪类样式

一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填充 background-repeat: no-repeat;(有这三个常用的属性值: no-repeat.repeat-x.repeat-y) 4.背景图片大小 background-size:100% 100%: cover(覆盖):(先让图片水平填满容器)图片等比例缩放,直到最小部分填满容器有可能会出现

CSS中的三种样式来源:创作人员、读者和用户代理

CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式. 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样式就叫做创作人员样式. 然后是用户代理样式(agent's+style),用户代理也就是我们通常所说的浏览器(IE.Firefox等等),这些浏览器会提供一些默认的样式,比如IE浏览器中,一个纯粹由html代码构成的网页里,我们会发现超链接会带有一个蓝色的前景色,这其实就用户代理样式,借用一些插件