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文档,方便地看到效果,像我们以前做的一样。
我的个人博客:
当前标题:css样式中定义样式,CSS样式类型
网站URL:http://myzitong.com/article/phjicg.html