css样式范例,css样式框架

css外部样式如何调用？

css外部样式如何调用方法如下：

创新互联公司是一家专注于做网站、成都网站制作与策划设计,鹤峰网站建设哪家好?创新互联公司做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:鹤峰等地区。鹤峰做网站价格咨询:13518219792

1、直接在div中使用css样式制作div+css网页

2、html中使用style自带式

3、使用@import引用外部CSS文件

4、使用link引用外部CSS文件 推荐此方法

接下来将逐个讲解html引用css方法的例子

1、直接在html标签元素内嵌入css样式，如div style="font-size:14px; color:#FF0000;"我是div css测试内容-支持/div 效果如下图

2、在html头部head部分内style声明插入代码如下：

style type="text/css" 

!-- 

.ceshi {font-size:14px; color:#FF0000;}/*这里是设置CSS的样式内容*/ 

-- 

/style

具体方法如下图：

3、使用@import引用外部CSS文件方法

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"" 

html xmlns="" 

head 

meta http-equiv="Content-Type" content="text/html; charset=gb2312" / 

titlecss引用方法实例-测试实例/title 

style type="text/css" 

!-- 

@import url(wcss.css);/*这里是通过@import引用CSS的样式内容*/ 

-- 

/style 

/head 

body 

div class="ceshi"我是div css测试内容支持/div 

/body 

/html

Wcss.css文件内代码.ceshi {font-size:14px; color:#FF0000;}

效果如下图：

可以看出使用此方法和使用自带式引用css样式表方法有相同处，都是需要在html的head内使用style标签引用外部css。

4、使用link来调用外部的css文件

在head放置link rel="stylesheet" href="wcss.css" type="text/css" /来调用外部的wcss.css文件来实现html引用css文件

详细如下图

此方法就不需要style标签，而是直接通过link一个样式来引用外部样式。

求javascript控制CSS样式定位范例

var obj = document.getElementById("div");

obj.style.backgroundColor = "Red";

css中的属性名称对应style.后面的属性, css中有"-"的, 比如:margin-left, 在js中把"-"去掉,并且第二个单词首字母大写, 即为:obj.style.marginLeft

怎样做好CSS样式的管理呢

学习WEB标准的朋友一般都是从学习CSS开始，为什么呢？因为CSS是一种很有意思的语言，它能让我们的网页千变万化。也许我们一开始的接触只是因为链接的样式修改，然后慢慢发现CSS的强大而又简单，于是我们用它来控制整个网页的布局、排版、色彩、图片等等工作。学习了CSS之后我们又会发现XHTML的结构更为重要，一个好的XHTML结构可以让CSS少费很多事。同时也会避免网页在不同浏览器之间的差异。于是又开始学习了XHTML代码，并且不断的去摸索着XHTML的结构的特点。会写CSS了，也懂得XHTML结构的重要性并能灵活应用的时候，是不是就可以了呢。也许这时我们就会发现其实样式的管理同样非常的重要。

大家也许都已经有了自己的管理方式，因为所要应用的网页类型的不同可能管理的思路也不一样，这里我只是把我的样式管理做一个整理。算是给大家提供一个可以参考与研究的范例，给对于没有形成自己的管理方式的朋友们提供一个参照范本。

我的样式管理是针对于单一项目、单一的风格体系的网站，一般这样的网站都是中小型的网站，风格是上一致的。对于大型网站，或是风格差异很大的'网站体系是不适用的。我们在做样式之前首先要想到样式的易维护性。一旦需要修改就必需要快速方便，修改工作的成本是很高的，所以我们要尽量避免这样的工作所占用时间的扩大。那我们就有必要把样式与结构代码分开。下面看一下我的目录分配方法：

其中，[images] 是存放xHTML中出现的图片，[jonStyle]我统称之为主题包，在样式包中包括了[CSS]、、[js]分别存放CSS样式表、样式表中所引用的图片、网页中所用的JS。这里存放图片的与外面的[images]虽然都是存放图片的，但是这里的图片的性质却是不一样的。是CSS中所引用的图片，所有的图片的显示与否都与CSS样式有关，他的归属性是，里的图片是归属于CSS的，而不是XHTML的。而CSS是不会引用[images]中的图片。[images]中的图片只归属于xHTML，xHTML也不要直接使用中的图片。

这里把[js]也放在了[jonStyle]文件夹中也许会有人觉得不妥，我的考虑是这样的：行为与样式本都是使得这个XHTML的结构能多姿多彩。当我们需要更换皮肤的时候，也有可通这个行为也是需要更换的。比如：在第一套方案中，某个区块的内容是要上下滚动的，然而在第二套方案中，这个区块就需要左右滚动。那么这个行为也需要与样工一起更换。当然实际应用的时候不一定是这么简单理由。

基本上大的结构是这这样的。那么样式表的结构又是怎么样的呢？我是这样来划分的：样式包中有一个base.css（基本共用样式）module.css（模块样式）forms.css （表单样式）mend.css（补丁样式）print.css（打印样式）

其中base.css是一个基本的样式，也就是所有网页的共性样式，这个样式与module.css配合基本上可以显示正常的页面。表单的划分，也可以有利于对不同地方的表单的样式管理。WEB标准涉及兼容性，所以需要有样式补丁当然还有针对性的这里就不一一列举。最后一个的打印样式，是提供给打印设置使用的。

我通过这样的划分，在对于维护与网站的样工更新上，就显得非常的容易，基本上可以在不需要程序人员的参与下就可以完成对网站的皮肤的更换。如果一个网站同时具备很多个主题包，那么只要简单的在XHTML中更换主题包的名称就可以使用不同的样式。这与网站的程序相配合将可以做出非常好的，具有很强扩展性的应用网站来！

CSS根据表格内容显示不同的样式，怎么写判断呢？

这个需要后端语言支持，CSS无法判断内容，CSS是样式表只负责描述页面的样式，而不负责内容

你可以使用后端语言判断不同的内容给表格添加不同的class，然后在css中为相应的class设置样式

急求一组CSS源代码范例…拜托拜托啦～

不知道可不可以用js,我这里有一个以前收藏起来的贴上来，看看可不可以帮助你,下面是代码（图片可以自己换换）：

style

body{

padding: 0px;

margin: 0px;

font: 70% verdana, geneva, arial, helvetica, sans-serif;

color: #000;

text-align: center

}

#outer{

padding: 0px;

margin: 0px;

width: 800px;

text-align: center

}

#focus{

border: #ccc 2px solid;

margin: 0px;

padding: 0px;

padding-top: 15px;

background: url(/images/tile.gif) #eee repeat-y left top;

width:694px;

position: relative;

height: 180px

}

#description{

width:550px;

height:150px;

overflow:hidden;

margin-right:15px;

float:left;

}

.dis{

float:left;

width:40px;

text-align: center;

padding-top:50px;

cursor:pointer;

}

#description ul, #description li {

float:left;

display: inline;

margin: 0;

padding: 0;

height:150px

}

.view_pic a:active,

.view_pic a:visited,

.view_pic a:link {

display: inline;

margin: 0;

padding: 0;

padding-left: 5;

padding-right: 5;

text-decoration: none;

}

.view_pic a:hover {

color: #ffffff;

display: inline;

text-decoration: none;

}

img {border:0px}

/STYLE

/head

body

div id=LayerMenu style="display:none ; z-index: 1000; filter: alpha(opacity=0); position: absolute; left:384px; top:69px; width:126px; height:20px;border:1px solid green;background:#e11;padding:2px;font-size:12px" 抱歉,已经到头了!

/div

div id=outer

div id=focus

div class="dis"

img id="img_l" src="back.png" alt="向左滚动" onClick="doSlide(-1)" /

/div

div id=description

div id="view_pic0" style="height:100px;width:1650px"

ul id="view_pic" class=view_pic

lia href="#"img src="png-0001.png"//a/li

lia href="#"img src="png-0002.png"//a/li

lia href="#"img src="png-0003.png"//a/li

lia href="#"img src="png-0004.png"//a/li

lia href="#"img src="png-0005.png"//a/li

lia href="#"img src="png-0006.png"//a/li

lia href="#"img src="png-0007.png"//a/li

lia href="#"img src="png-0008.png"//a/li

lia href="#"img src="png-0009.png"//a/li

lia href="#"img src="png-0010.png"//a/li

lia href="#"img src="png-0011.png"//a/li

lia href="#"img src="png-0012.png"//a/li

lia href="#"img src="png-0012.png"//a/li

/ul

/div

/div

div class="dis"

img id="img_r" src="next.png" alt="向右滚动" onClick="doSlide(1)" /

/div

/div

/div

script

var ok_obj=document.getElementById("view_pic").getElementsByTagName("LI")

var ok=Math.ceil(ok_obj.length/3)-1

var ele=document.getElementById("description");

var w=ele.clientWidth;

var n=20,t=50;

var timers=new Array(n);

var k=0;doSlide(0);

function doSlide(s){

if (k=ok s0|| k=0 s0)MenuClick()

else{

k+=s;

var x=ele.scrollLeft;

var d=k*w-x;

for(var i=0;in;i++)(

function(){

if(timers[i]) clearTimeout(timers[i]);

var j=i;

// alert(x)

timers[i]=setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t);

}

)();

}}

/script

SCRIPT language=javascript

var intDelay=30; //设置菜单显示速度，越大越慢

var intInterval=5;

function MenuClick(){

LayerMenu.filters.alpha.opacity=0;

LayerMenu.style.display="";

GradientShow();

}

function GradientShow()

{

LayerMenu.filters.alpha.opacity+=intInterval;

if (LayerMenu.filters.alpha.opacity100) setTimeout("GradientShow()",intDelay);

else setTimeout("GradientClose()",1500)

}

function GradientClose()

{

LayerMenu.filters.alpha.opacity-=intInterval;

if (LayerMenu.filters.alpha.opacity0) {

setTimeout("GradientClose()",intDelay);

}

else {

LayerMenu.style.display="none";

}

}

GradientClose()

/SCRIPT

css样式怎么调用

CSS是一门指定文档该如何呈现给用户的语言。

一、CSS帮助您将文档信息的内容和如何展现它的细节相分离

创建html文档

创建样式表

在与前面相同的目录中，新建另一个文本文件。该文件将成为您的样式表。请将它命名为：style1.css

在您的CSS文件中，复制、粘贴下面的行，并保存该文件:

二、连接您的文档和样式表

为将您的文档和样式表相连，请编辑您的HTML文件。并添加下面高亮的行：

保存该文件并刷新您的浏览器。该样式表将首字母显示为红色，如下所示：

三、rel=“stylesheet”是什么意思呢 

范例中呈现的是标准HTML link标签嵌入css档案的写法，其中「rel="stylesheet" type="text/css"」所代表的意思，就是告诉浏览器要导入一个在外部的css档案，透过href导入名为xxxx.css的样式档案。