css样式中定义样式,CSS样式类型

什么是CSS样式，怎样定义和使用它？

CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。链入外部样式表文件 (Linking to a Style Sheet) 你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下： head titletitle of article/title link rel=stylesheet href=" " type="text/css"/head 而在XML中，你应该如下例所示在声明区中加入： ? xml-stylesheet type="text/css" href=" " ?定义内部样式块对象 (Embedding a Style Block) 你可以在你的HTML文档的HTML和BODY标记之间插入一个STYLE.../STYLE块对象。 定义方式请参阅样式表语法。示例如下： html style type="text/css" !-- body {font: 10pt "Arial"} h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon} h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} p {font: 10pt/12pt "Arial"; color: black} -- /style body 请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。 内联定义 (Inline Styles) 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下： 这一行被增加了左右的外补丁 样式表语法 (CSS Syntax) Selector { property: value } 参数说明： Selector -- 选择符 property : value -- 样式表定义。属性和属性值之间用冒号(:)隔开。定义之间用分号(;)隔开 继承的值 (The ' Inherit ' Value) 每个属性都有一个指定的值：Inherit。它的意思是：将父对象的值等同为计算机值得到。这个值通常仅仅是备用的。显式的声明它可用来强调。 选择符说明： #表示选择id .表示选择class 比如我有个 这时就得用#test{属性}来给id为test的div来制定样式 而 则应该用.test{属性}来给其指定样式。 编辑本段根据分辨率不同，调用不同的css文件 dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0 SCRIPT LANGUAGE="javascript" !-- if (window.navigator.userAgent.indexOf("MSIE")=1) { var IE1024=""; var IE800=""; var IE1152=""; var IEother=""; ScreenWidth(IE1024,IE800,IE1152,IEother) }else{ if (window.navigator.userAgent.indexOf("Firefox")=1) { file://如果浏览器为Firefox var Firefox1024=""; var Firefox800=""; var Firefox1152=""; var Firefoxother=""; ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother) }else{ file://如果浏览器为其他 var Other1024=""; var Other800=""; var Other1152=""; var Otherother=""; ScreenWidth(Other1024,Other800,Other1152,Otherother) } } function ScreenWidth(CSS1,CSS2,CSS3,CSS4){ if ((screen.width == 1024) (screen.height == 768)){ setActiveStyleSheet(CSS1); }else{ if ((screen.width == 800) (screen.height == 600)){ setActiveStyleSheet(CSS2); }else{ if ((screen.width == 1152) (screen.height == 864)){ setActiveStyleSheet(CSS3); }else{ setActiveStyleSheet(CSS4); }}} } function setActiveStyleSheet(title){ document.getElementsByTagName("link")[0].href="style/"+title; } ; /SCRIPT 解释： var IE1024=""; var IE800=""; var IE1152=""; var IEother=""; 引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名. var Firefox1024=""; var Firefox800=""; var Firefox1152=""; var Firefoxother=""; 引号里面分别填写，用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名. var Other1024=""; var Other800=""; var Other1152=""; var Otherother=""; 引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名. 不判断分辨率，只判断浏览器 应E.Qiang提议，编如下代码。实现根据浏览器类型自动调用不同CSS。 代码： SCRIPT LANGUAGE="javascript" !-- if (window.navigator.userAgent.indexOf("MSIE")=1) { file://如果浏览器为IE setActiveStyleSheet("default.css"); }else{ if (window.navigator.userAgent.indexOf("Firefox")=1) { file://如果浏览器为Firefox setActiveStyleSheet("default2.css"); }else{ file://如果浏览器为其他 setActiveStyleSheet("newsky.css"); } } function setActiveStyleSheet(title){ document.getElementsByTagName("link")[0].href="style/"+title; } ; /SCRIPT 解释： 如果浏览器为IE，则调用default.css 如果浏览器为Firefox，则调用default2.css 如果浏览器为其他，则调用newsky.css 用法：放在head/head中即可。 中国专业css标准化推广网站 【Div之家】 css 层叠样式表 引入层叠样式表的方法包括： 1，外联式样式表 2，内嵌样式表 3，元素内定 4，导入样式表 外联式样式表 例：head link rel="stylesheet" href="/css/default.css" /head body .... /body /html 属性：rel 用来说明link元素在这里要完成的任务是连接一个独立的css文件。而href属性给出了所要连接css文件的url地址 内嵌式样式表： 例：html head style type="text/css" !-- td{font:9pt;color:red} .font105{font:10.5pt;color:blue} -- /style /head body..../body /html 元素内定 格式： 导入式样式表 〈html head style type="text/css" !-- @import url(css/home.css); -- /style body .... /body /html

创新互联专注于黄石港企业网站建设,成都响应式网站建设公司,商城开发。黄石港网站建设公司,为黄石港等地区提供建站服务。全流程按需搭建网站，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

css样式的定义

t是定义在div+css中的一个类名

div class="t"

td/td

td/td

/div

.t是定义div class="t"/div上的整体样式

.t td定义每个td/td的样式

html中使用css定义样式的方式有哪些？哪种方式优先级最高？

在HTML中常用以下3种方式定义CSS：Embedding（嵌入式）、Linking（引用式）、Inline（内联式）

一、嵌入式：使用HTML的style元素，在文档中定义CSS样式

head

style type="text/css"

h1{color:red}

p{color:blue}

/style

head

二、内联式 ：每一个HTML元素都包含一个style属性，可以直接定义样式。该样式仅能用于该元素的内容，对于另一个同名的元素则不起作用。

p style="color:#FFF;font-weight:bold;"内联样式/p

三、外部引用式：外部引用指HTML文档本身不含有CSS样式，而是动态引用外部的CSS文件定义文档的表现形式。

1、使用样式表的处理指令语句-在HTML文档的开头部分写一个关于样式表的指令处理语句

?xml-stylesheet type="text/css" href="mystyle.css" ?

html

指令语句

/html

不过只有使用xml语法格式编写的html文档才支持使用该指令，大多数浏览器仅当被保存为xhtml或xml格式才有效，且JS不能处理这种CSS，所以不建议使用。

2、使用@import命令 -在style元素之间使用@import命令导入外部的css文件

head

style type="text/css"

!--下面两行代码效果一样

@import "mystyle.css";

@import url("mystyle.css");

--

/style

/head

任何@import规则必须出现在所有规则之前。参数是一个css文件的URL地址。在一个css文件中也可以用@import指令将另一个css文件导入。

3、使用link元素

head

link rel="stylesheet" href="css的url" type="text/css"

/head

这也是最常用的方式。

4、使用HTTP消息报头链接到样式表 -可以使用HTTP消息报头的link字段链接一个外部样式表。 link:mystyle.css;rel=stylesheet;

//等同于link rel="stylesheet" href="css的url" type="text/css"

HTTP报头中可以使用多个link，从而链接多个样式表，且HTTP报头中的link比HTML文档中的link（head元素中）具有优先级。

css怎么定义全局样式为蓝色,楷体？

在样式文件或style标签里设置全局样式，具体的写法如下：

style

*{

color: blue;

font-family: '楷体';

}

/style

color表示字体颜色， font-family表示字体样式

如何定义css样式

有三条途径可以把CSS应用到HTML中去。

内联

内联样式通过style属性直接套进HTML中去。

看起来像这样：

p style="color: red"text/p

这将会是指定的段落变成红色。

我们的建议是，HTML应该是独立的、样式自由的文档，所以内联样式无论在什么情况下都应该尽量避免。

内部

内部样式服务于整个当前页面。在头标签head里面，样式标签style里包含当前页面的所有样式。

看起来像这样：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "" html head titleCSS Example/title style type="text/css" p { color: red; } a { color: blue; } /style ...

这将使这个页面的所有段落都是红色的，所有的连接都是蓝色的。

与内联样式类似，你应该是HTML文档和CSS文档分离开来，下面，我们的救世来了……

外部

外部样式为整个网站的多个页面服务。这是一个独立的CSS文档，简单的一个范例如下：

p { color: red; } a { color: blue; }

如果这个文档存为“web.css”的话，它可以这样跟HTML文档连接起来：

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

html

head

titleCSS Example/title

link rel="stylesheet" type="text/css" href="web.css" / ...

在CSS高级指南中，我们还将看到其他连接外部样式表的方法，但到目前，这已经足够了。

想从本指南中收获更多，尝试着在你的文本编辑器中新建一个文档，在HTML文档相同的目录中，把这些代码保存为“web.css”。

现在像下面一样改进你的HTML文档：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "" html head titleMy first web page/title link rel="stylesheet" type="text/css" href="web.css" / /head ...

保存HTML文档。现在已经把HTML和CSS连接起来了，但还是空白一片，没有改变什么东西。随着进一步学习CSS初级指南，你可以增添或者改变CSS文档，通过刷新浏览器里的HTML文档，方便地看到效果，像我们以前做的一样。

我的个人博客：