|
发表于 2011-1-7 11:29:22
|
显示全部楼层
CSS款式表
CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(加强)节制网页样式并容许将样式信息与网页内容分散的一种标志性语言。
目次
怎样将样式表加入您的网页根据分辨率差别,调用不同的css文件CSS样式表-参数阐明css 样式表的命名已经支持CSS的浏览器CSS结谈判规则根本语法规则组合承继注解伪类和伪元素定位锚伪类首行伪元素首个字母伪元素层叠次序 如何将样式表加入您的网页 你可以用以下三种方式将样式表参加您的网页。而最靠近目的的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但笼盖重叠的定义。破例请参阅important声明。 将样式表加入到HTML中 /css/font.css" type="text/css"> </head> 而在XML中,你应该如下例所示在声明区中加入: <? xml-stylesheet type="text/css" href="/css/font.css" ?>> 定义内部样式块对象 (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,TIMBERLAND 6inch,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; } file://--> </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; } file://--> </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样式表-参数说明 Selector -- 选择符 property : value -- 样式表定义。属性和属性值之间用冒号( 隔开。界说之间用分号(;)隔开 继承的值 (The ' Inherit ' Value) 每个属性都有一个指定的值:Inherit。它的意思是:将父对象的值等同为计算机值失去。这个值通常仅仅是备用的。显式的声明它可用来夸大。css 样式表的命名 div+css样式表的id和class的区别:就一句来归纳综合, class可以定义多个值并且能够运用到多个标签上,但id只能是一个。所以就开端查一些相关的div+css样式表id和class的常用命名规则,请各人参考一下: 起首讲一下div+css样式表的id的罕用命名规则 页头:header 登录条:loginBar 标记:logo 侧栏:sideBar 告白:banner导航:nav 子导航:subNav菜单:menu 子菜单:subMenu搜寻:search转动:scroll页面主体:main内容:content标签页:tab 文章列表:list提醒信息:msg小本领:tips栏目题目:title加入:joinus指南:guild办事:service热门:hot消息:news下载:download注册:regsiter状况:status按钮:btn投票:vote互助火伴:partner友谊链接:friendLink页脚:footer版权:copyRight 实际上下面的div+css样式表的id命名也会常常用大小写和_来区别,譬如主导航就是MainNav,要是另有须要在区分便是MainNav_1,MainNav_2等等。也可使用"类型+变量名称"的规则来命名,比如写一个赤色字体的class,可以.f_red {}(f是font 字体的缩写)。总之准则是:巨细写、_、缩写,大大增强代码的可读性。 再讲一下div+css样式表的class的常用定名规则 外衣:wrap 主导航:mainNav 子导航:subnav 页 脚:footer全部页面:content页 眉:header 页 脚:footer 商 标:label 标 题:title 主导航:mainNav(globalNav)边导航:sidebar 左导航:leftsideBar 右导航:rightsideBar 旗 志:logo 标 语:banner菜单内容:menu1Content 菜单容量:menuContainer 子菜单:submenu 边导航图标:sidebarIcon 解释:note 面包屑:breadCrumb(即页面所处地位导航提示) 容器:container内容:content搜刮:search 登岸:login 功效区:shop(如购物车,收银台) 当前的:current 固然像div+css样式表的id和class的命名远远不止这些,可能还会有更多的命名,你可以用一些普通的易懂.轻易明白的一些来命名,如果您有更好的div+css样式表的id和class的命名规则的话,请留言,多多指教.曾经支撑CSS的阅读器 支持CSS的欣赏器数字在继承敏捷地增加。饰演重要脚色的Netscape Navigator 4.0支持大少数的CSS1和CSS 定位。Microsoft Internet Explorer 3不彻底地支持CSS1,而优良的CSS1和CSS 定位被应用到IE4中,伴同着初期的CSS 打印支持。 恒久以来,在UNIX平台上的Emacs-W3和Arena都支持样式表,而且W3C的Amaya浏览器将CSS 支持交融到一个"所见即所得"的编纂器以制作强盛的CSS网页。 如今,阛阓上愈来愈多的浏览器和IE竞争,IE浏览器已经失去往日独大的职位地方。火狐(firefox)、翱翔、腾讯TT,百度一下,以及新秀360和可牛险些整个都是支持CSS的。CSS布局和规则基本语法例则 选择符 任何HTML元素均可以是一个CSS1的挑选符。选择符仅仅是指向分外样式的元素。例如, P { text-indent: 3em } 之中的选择符是P。 类选择符 繁多个选择符能有不同的CLASS(类),于是允许统一元素有不同样式。例如,一个网页制作者大概但愿视其语言而定,用不同的颜色显示代码 : code.html { color: #191970 } code.css { color: #4b0082 }以上的例子创建了两个类,css和html,供HTML的CODE元素使用,timberland ブーツ。CLASS属性是用于在HTML中以指明元素的类,比方, < CLASS=warning>每个选择符只允许有一个类。例如,code.html.proprietary是有效的。</p>类的申明也可以毋庸相关的元素: .note { font-size: small }在这个例子,名为note的类可以被用于任何元素。 一个精良的风俗是在命名类的时候,根据它们的功能而不是依据它们的表面。上述例子中的note类也可以命名为small,但若网页制作者决定扭转这个类的样式,使得它再也不是小字体的话,那末这个名字就变得毫偶然义了。 ID 选择符ID 选择符个体地定义每个元素的成份。这种选择符应当尽可能罕用,因为他具备必定的范围。一个ID选择符的指定要有批示符"#"在名字后面。例如,ID选择符可以指定如下: #svp94O { text-indent: 3em }这点可以参考HTML中的ID属性: < ID=svp94O>文本缩进3em</P>关联选择符联系关系选择符只不外是一个用空格离隔的两个或更多的单一选择符构成的字符串。这些选择符可以指定一样平常属性,并且由于层叠顺序的规则,它们的优先权比单一的选择符大。例如, 以下的高低文选择符 P EM { background: yellow }是P EM。这个值表示段落中的强调文本会是黄色配景;而标题的强调文本则不受影响。 声明属性一个属性被指定到选择符是为了使用它的样式。属性的例子包罗颜色、边界和字体。 值声明的值是一个属性担当的指定。例如,属性颜色能接受值red。组合 为了淘汰样式表的反复声明,组合的选择符声明是允许的。例如,文档中所有的题目可以通过组合给出相同的声明: H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif }继承 现实上,全部在选择符中嵌套的选择符都会继承外层选择符指定的属性值,除非别的变动。例如,一个BODY定义了的颜色值也会应用到段落的文本中。 有些情况是内部选择符不继承四周的选择符的值,但实践上这些都是特别的。例如,上界限属性是不会继承的;直觉上,一个段落不会有同文档BODY一样的上边界值。注解 样式内外面的表明使用C语言编程中同样的商定要领去指定。CSS1注解的例子如以下款式: /* COMMENTS CANNOT BE NESTED */伪类和伪元素 伪类和伪元素是特殊的类和元素,能主动地被支持CSS的浏览器所辨认,ティンバーランド 6インチ。伪类差别开不同品种的元素(例如,visited links(已访问的连接)和active links(可激活连接)描写了两个定位锚(anchors)的范例)。伪元素指元素的一部份,例如段落的第一个字母。 伪类或伪元素规则的情势如 选择符:伪类 { 属性: 值 }或 选择符:伪元素 { 属性: 值 }伪类和伪元素不该用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一块儿使用,如下: 选择符.类: 伪类 { 属性: 值 }或 选择符.类: 伪元素 { 属性: 值 }定位锚伪类 伪类可以指定A元素以不同的方式表现连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示,乃至不同字体大小和气势派头。 一个风趣的结果是使以后(或“可激活”)连接以不同色彩、更大的字体显示。而后,当网页的已走访连接被重选时,又以不同颜色、更小字体显示。这个样式表的示例如下: A:link { color: red } A:active { color: blue; font-size: 125% } A:visited { color: green; font-size: 85% }首行伪元素 通常在报纸上的文章,例如Wall Street Journal中的,文本的首行都市以粗印体而且全体小写地展现。CSS1包含了这个功能,ティンバー カスタムメイド,将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。下列是一个首行伪元素的例子: P:first-line { font-variant: small-caps; font-weight: bold }首个字母伪元素 首个字母伪元素用于加大(drop caps)和其他效果。含有已指定值选择符的文本的首个字母会根据指定的值展现。一个首个字母伪元素可以用于任何块级元素。例如: P:first-letter { font-size: 300%; float: left }会比平凡字体加大三倍。层叠顺序 当使用了多个样式表,样式表需要争取特定选择符的控制权。在这些环境下,总会有样式表的规则能取得控制权。如下的特性将抉择相互对峙的样式表的效果,timberland ブーツ ウィート。 1.! important 规则可以用指定的! important 特指为重要的。一个特指为重要的样式会凌驾于与之对峙的别的雷同权重的样式。同样地,当网页制作者和读者都指定了首要规则时,网页制作者的规矩会超出读者的。以下是 ! important 声明的例子: BODY { background: url(bar.gif) white; background-repeat: repeat-x ! important } 2.Origin of Rules (Author's vs. Reader's) 正如曩昔所提及的,网页制作者和读者都有本领去指定样式表。当二者的规则产生辩论,网页制造者的规则会高出于读者的其它相同权重的规则。而网页制作者和读者的样式表都超越涉猎器的内置样式表。 网页制作者应当警惕地使用! important 规则,因为它们会逾越用户任何的! important 规则。例如,一个用户因为视觉干系,会请求大字体或指定的色彩,而且如许的用户会有大概声明白定的样式规则为! important,因为这些样式对付用户阅读网页是极其紧张的。任何的! important 规则会超越一般的规则,以是发起网页制造者使用一般的规则以确保有特殊样式必要的用户能浏览网页。 3.选择符规则: 计算特性 基于它们的特性级别,样式表也可以超越与之冲突的样式表,一个较高特性的样式永久都凌驾于一个较低特性的样式。这只无非是盘算选择符的指定个数的一个统计游戏。 a.统计抉择符中的ID属性个数。 b.统计选择符中的CLASS属性个数。 c.统计选择符中的HTML标记名格式。 末了,按精确的顺序写出三个数字,不要加空格或逗号,vrml,得到一个三位数。( 注意,你需要将数字转换成一个以三个数字末端的更大的数。)相应于选择符的终极数字列表可以很容易肯定较高数字特性凌驾于较低数字的。以下是一个按特性分类的选择符的列表: #id1 {xxx} /* a=1 b=0 c=0 --> 特征 = 100 */ UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */ LI.red {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */ LI {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */ 4.特性的顺序 为了利便使用,当两个规则具同样权重时,取背面的谁人。 词条图册更多图册 扩大阅读: 1
编程源码交换:/css
4
css结构教程:
5
涂鸦板css样式
7
WDG /zh/reference/css/structure.html
凋谢分类: html,web,CSS,样式表,div之家 “CSS样式表”相干词条: |
|