精华内容
下载资源
问答
  • 创建漂亮的CSS样式

    千次阅读 2011-09-17 14:01:20
    作为一个CSS方面的专家,所做的不只是记住选择符(Selectors)那么简单,提升样式表的效用和可维护性,以及设计蓝图和管理工作流程都是工作的一部分.在本篇文章中,Jina Bolton给出了10个CSS技巧提示,这些内容是由对12位...
     
    

    作为一个CSS方面的专家,所做的不只是记住选择符(Selectors)那么简单,提升样式表的效用和可维护性,以及设计蓝图和管理工作流程都是工作的一部分.在本篇文章中,Jina Bolton给出了10个CSS技巧提示,这些内容是由对12位顶尖的设计者的调查提炼而来.

    接下来,我将重点放在创建性感的样式表方法的讨论之上.一旦CSS被用来创建具有魅力的网站,CSS的书写事实上就已经成为了艺术.使用何种方法创建,架构以及管理CSS成为了一件美妙的事情.

    那么怎么创建这些性感的样式表?样式表应该具有那些特征呢?

    几个月前,我有幸出席了在俄勒冈州波兰特岛所召开的Web Visions 2007的主题会议.在准备我的演讲报告时,我调查了12位工作在网页设计方面的设计人员和开发人员.基于调查的结果,再结合我自己的工作经验,我编写了下面的一个列表用来在创建样式表的时候给予自己以适当的提醒.

    01. 保持CSS脱离标记

    使用链接或者导入样式表的方法对于中阶或高阶的CSS开发人员来说都是再正常不过的事情,但是我在这里依然会强调一下这种方法的重要性.我见过的许多站点,在创站之初,CSS文件很整洁,组织的也井井有条,但是随着时间的推移,这些文档由于内嵌的甚至内联(inline)的样式出现而变得杂乱无章,一方面可能是由于给予的更新期限很短,另一方面或许就是纯粹的由于懒惰.

    你正忙于一个拥有成千上万条的渠道内容同时出现的网站的大面积更新,给你的期限很短,所以你就选择了使用内嵌或者内联样式这样一些”快速修补”的方法.一些年过去了,习惯依然…,直到有一天你被告知这个站点需要重新设计,但是所有的内容仍然不变,这个时候而你只有一个星期去完成.想象一下,这将是一个怎样的境况.

    其实这是很普遍的情况,更新样式表是一个再简单不过的任务,在你几年的”快速修补”之后,这些样式遍布了整个站点,相信你根本没办法记住他们在那里.所以现在你面对的只有2个选择a)在一个星期之内找出一个方法去清理规整这些样式b)找一份新的工作吧.

    千万不要将你的工作变得愈来愈困难.使用链接和导入样式表是你的不二之选.规范的创建并保持样式表的整洁,你会活得更容易一些.

    提示:小心使用链接或导入的方法会在标记上添加冗余的样式.每次你创建新的样式表,你都会更新要不就是添加新的样式,过多的外联样式不只会使补丁的修复变得困难,也会使样式表更难于维护.因此可以理解为什么大型站点会为不同的区块部分而去分离样式表.小心不要玩过火了,过犹不及.

    这里很值得提及一下的是过多的样式表将会使HTTP的请求数增加.这些都会潜在的影响性能.因此,Internet Explorer将链接的样式表数限制在了32个.

    02. 语法不是猜字谜.

    你应该明白为什么我会说到这个.语法学是你最好的朋友,选择合适的,有意义的元素去描述你的内容,确保你所选择的是富有语意的类(class)和ID特征值.做正确的事情会使你的生活变得容易很多,如果你是某个团队的一分子,对团队其他成员来说也是如此.看一下下面的这条规则:

    .l13k { color: #369; }

    如果你是刚接手这个工作,你在CSS文件中看到了上面的内容,你能不能说清楚这个类是什么意思?大部分情况下你都会说不.这个类的名称可能是个缩写,但是恐怕没有办法去弄清楚他到底是什么的缩写,眼前是一摸黑.或者是这种情况,可能是你把它放到这里,你现在很清楚它是什么意思,但是你能保证3年之后你还记得它是什么意思么?

    现在我们看一下下面的规则:

    .left-blue { color: #369; }

    你可能立即知道这个类选择符是为左侧边栏的显示蓝色区块而创建的,这时它就正确的表达了一定的语意.正如我在上面提到的,一旦要你在在一周内要重新设计,但是在重构过程中,这个区块需要定位到右边,颜色变为红色,类的特征值就没有任何意义,所以你现在需要改变你所有的特征值,要不就什么都不改变,不过这样可能或导致重重的困惑.

    因此解决上面问题的最好方法就是在类特征值的命名中避免使用颜色(包括颜色名称和十六进制值)或者宽度,高度的尺寸值.同时你也尽量的避免去使用任何表明表现形式的值,例如box.反之,将表现和内容分离的意义也就不复存在了.

    最后,我们看一下最合适的命名规则:

    .product-description { color: #369; }

    你应该能理解,这个规则是应用于产品描述.无论你的设计改变了多少次都不会改变.清楚明了的感觉不错.

    03. 体会注释的优点

    如果使用注释的方法得当的话,为你的CSS文件添加注释可以在开发过程中给予你和其他人很大的帮助.最常见的是为CSS样式规则添加提示信息,不过使用注释对优化组织结构和提升效用也很有帮助.

    提示和标签

    这是注释最常用的途径,可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦.这种应用简洁性最为重要.例如:

    /*   */
    img { border: 0; }

    时间戳和签名

    许多设计人员和开发人员会在最新更新的CSS文件标注日期时间,以及他们的名字.这些都会提供给我们一些联系信息以及文档更新信息.

    /*    —————————————————-*/

    对于一项工程,这种方法会很有用,如果你是小组一分子时,这更是显得尤其重要.要提醒的是,一些组织都要求在文档中留下这类信息,而有些公司喜欢把名字和日期这些信息放在文档之外的地方,所以在开始之前最好弄清楚这些事情.

    组织

    在CSS文档中使用注释指示不同的区块是个不错的主意.例如,如果所有的头部信息被组合在一起,你可以使用注释使它和下面的区块样式区分开来.

    /* HEADER —————————————————-*/

    接下来我会就此进行进一步的阐述,现在我们先讨论一下如何”分离样式类型”

    注释标记

    如果你的CSS文件都是按照我上面所说的按照区块进行划分的话,使用注释标记可以配合”查找”功能使你在文档的各个部分之间切换自如.标注一个章节(Chapter),例如使用等号”=”,然后在后面添加一个区块的名称,例如”HEADER”,这样就为你的CSS文档创建了一个”锚点”.

    /* =HEADER —————————————————-*/

    这种方法在内容繁杂的样式表中尤其有用.更多的相关信息你可以在 网页教学网

    Stop Design站点上了解.

    参考

    将注释作为参考说明不常见但不失为一个有用的方法,一个典型的例子是Steve Smith在他的CSS文档中包含一个为配色而添加的参考信息注释.
    /* COLORS
       Body Background:       #2F2C22
       Main Text:             #B3A576
       Links:                 #9C6D25
       Dark Brown Border:     #222019
       Green Headline:        #958944
    */

    你可以将这个向导性的注释放在CSS文档的顶部以提醒你站点是如何配色的.另一个例子则是将注释作为类目录(index-like)的方法.你可以定义不同的区块以便于你在它们之间快速切换,可能会用到注释标记的用法,下面是一个例子

     —————————————————-*/

    04.清楚什么时候使用条件注释语句和技巧(hacks)

    现在有很大一部分文章会提及CSS技巧(hacks)产生的问题,并且说明在当前所有的Internet Explorer发行版本中为什么要使用条件注释语句.自然而然,肯定会有相左的意见.以前我也一直以为使用条件注释语句会比使用CSS技巧(hacks)好一些,直到最近有太多的例子证明这两种方法都算不得什么好的解决方案.

    想象一下,你现在要为一个元素设置最小高度值,对于Internet Explorer 6来说,由于它不支持min-height属性,但是使用height属性就可以达到所要的效果,于是你就创建了一个新的样式表文件,并且在文档标记中使用注释语句来引用它,难道你所做的就只是为了这么一条CSS规则?如果将height和min-height属性放在一个CSS文件中,然后使用小技巧(hack)针对不同浏览器切换属性是不是会好一些?这种情况下,我坚持认为少用条件注释语句为好.Webjx.Com

    换个角度想一下,如果你放置了多个样式表文件,条件语句可能会使你的调试过程变得困难.如果你要更改一些东西,例如在上面的例子中,你就需要打开多个文件进行修改.很多情况下,对你来说,这将是一个繁重的任务.可以想象一下,如果你在主要的CSS文件中定义的规则,然后在需要3个不同的IE样式表中进行重定义.这些都给后期的工作留下了不必要的烦恼,尤其是如果另外一个开发人员在编辑时没有注意到这些需要重新编写的文件的存在.

    假如你现在还在使用条件语句,我推荐你在主样式表中添加一个注释以便后来的开发人员知道IE专有样式规则的存在.当必须编辑height或者类似的属性时,这种方法可以提醒你需要修改的不仅仅是一个文件.

    再次提醒一下,如果你使用CSS Hack 的方法,浏览器更新带来的更改可能对今后的工作带来影响,你现在使用的Hacks可能在下一个版本中就无法工作了.

    05.组织选择符和声明

    经常的,要保持CSS的整洁度和有序性.我喜欢将选择符按照样式的类别进行组织划分. Webjx.Com

    • 重置样式(reset styles)
    • 排版样式(typography styles)
    • 布局样式(layout styles (header, content, footer, etc.))
    • 模块和widget样式module or widget styles
    • 其他(etc).

    然后,在每个组里面,我按照DOM等级将选择符组织划分:

    • 任何父级元素样式(any parent styles)
    • 块级元素样式(block-level element styles) (段落,列表等.)
    • 内联元素样式(inline element styles) (链接,缩写等.)
    • 其他(etc).

    然后在上面划分的基础上进行详细的划分: 网页教学网

    • 段落(paragraphs)
    • 引用(blockquotes)
    • 地址(addresses)
    • 列表(lists)
    • 表单(forms)
    • 表格(tables)
    • 其他(etc).

    最后,我按照样式类型组织CSS声明

    • 位置样式(positioning  styles)
    • 浮动/清除浮动样式(float/clear styles)
    • 显示/可见样式(display/visibility styles)
    • 空间样式(spacing styles)(margin, padding, border)
    • 尺寸样式(dimensions styles)
    • 排版相关样式(typography-related styles)(line-height, color, etc.)
    • 其他样式(miscellaneous styles)(list-style, cursors, etc.)

    许多人喜欢根据声明的字母顺序来排列,这种方法对我来说可能不太适合,但可能对你来说会非常适合.不过一旦你选择了任何组织方法,就最好坚持下去以保持其统一性.

    06. 创建框架(framework,库)

    当你在编写CSS时,如果你已经发现你经常反复的做同一件事情,考虑一下创建一个框架或库可能是个不错的主意.将一个样式表组合组成的框架作为你的网站的基础能够缩短的你开发时间.较为典型的样式表基本上都包含以下内容:

    • screen.css - 一个screen CSS文件包含你所有应用在屏幕显示上的所有样式,可以选择性的导入附加样式,如以下样式表文件:
    • reset.css - reset CSS文件被用于重置所有默认的浏览器样式,让我们更容易的完成各种浏览器下的兼容性问题.
    • typography.css - typography CSS文件被用来定义字体,大小,行间距,字间距和字体颜色.
    • grid.css - grid CSS文件被用来组织布局和结构.通过定义基本的头部,底部和列设置为你网站的创建轮廓,线框模型(winframe)
    • print.css - print CSS文件包含页面被打印时显示的样式.

    一个CSS框架的例子是由Olav Bjørkøy创建的Blueprint framework,开发人员主要为Jeff CroftEric Meyer等人.另一个流行的框架就是Yahoo! User Interface Library建立的.不过许多开发人员认为这些成型的框架包含的标记和CSS有那么一点臃肿,当然也包括了太多的表现类(class)和属性名称.

    声明:当我在写这篇文章时,Jeff Croft发表了一篇主题为What’s not to love about CSS frameworks?(什么让你摒弃CSS框架),在这篇文章的评论中和谈及他听说许多人说我严重反对CSS框架,我不知道这从何说起,但是我仍然要重申一下我的观点,我不反对使用CSS框架,并且非常坚持使用它们.

    最好的结果就是你最好创建适合自己或者你所在组织的框架.

    07. 保持文档可读性和性能优化的平衡

    每个开发者的样式风格可能不尽相同.许多开发者书写的样式表文件具有很好的可读性,并且会在把文件正式上传之前进行一些性能优化措施,例如移除注释,空白,缩进以及换行等步骤.这是一个不错的方法,也值得推荐.尽管如此,在某些情况下如果你不能进行那些步骤的时候,最好找到一个能够保持文档可读性和性能优化平衡的方法.对此,Steve Smith 有一个不错的建议.

    另外,考虑一下使用连字符号替换下划线,微格式(Microformats )将连字符号作为标准的分割符号,不过某些特定的老版本浏览器在处理上可能有问题.你可以阅读一下Underscores in class and ID Names(类和ID中的下划线)这边文章来了解更多信息.

    08. 管理文本编辑器

    每个艺术家都会对使用他所了解的适合他们的工具,对于设计者和开发者来说也是如此.对于CSS,最好了解你所使用的编辑器.

    现在有很多的文本编辑器可以使用,如TextMate,Coda,BB Edit,TextPad,Dreamweaver等,我在这里不是要告诉你选择那一个编辑器.每个编辑器都有自己的优势和劣势,最适合的编辑器取决于你的偏好.不过,一旦你选择了一个编辑器,最好把它了解的清清楚楚.例如快捷键时什么,有那些能用到的提示和技巧等等.Webjx.Com

    管理好文本编辑器时加快开发速度最好的方法.它会让你在创建样式表时更有效率. 网页教学网

    09.使用版本控制

    平滑维护是创建性感的样式表中关键的步骤.版本控制能帮上你不少的忙,它不只是对小组开发有用,对单独的设计者和开发者来说也很有用.

    许多应用程序内置了源代码控制机制,Dreamweaver使用 登记/登出系统帮助开发人员确认所编辑的文件不是已经编辑过的文件,而同步功能可以将本地文件和远程文件进行同步,合并和替换.这些功能很容易上手,但在某些地方还是有不足之处.

    Subversion (SVN) 和 Concurrent Versions System (CVS) 提供了更为强大的功能.通过附加的功能,你可以进行恢复,查看更改以及解决冲突等操作.这里有Jonathan Snook的一篇叫做“Hosted Subversion”的文章,你可以阅读以获取更多的如何快速简便的去操作它的方法.

    10. 创建和管理样式表向导文档

    在某些情况下,样式表向导文件是开发人员对语法规则和书写标准所编写的指导性文档,它常用被用作设计,开发和内容的大纲来使用.编写样式向导文档是为清楚的表达排版,网格,颜色,图片尺寸等内容而创建的参考手册.

    创建样式表向导文档的时候,最好的办法是提供一个标记和CSS的参考性内容.这些参考可以被开发小组或者后期的开发人员当作手册来使用.另外,它还可以包含布局定义,在里面你可以列出所使用的不同布局以及相关的标记和样式.

    最后,你所需要做的是一些开发者保证质量的必要步骤,例如检测有效性和可用性以便保证生产出高质量的产品.
    展开全文
  • DreamWeaver下如何应用CSS样式

    千次阅读 2017-09-07 17:40:59
    首先介绍一下CSS样式的属性: CSS样式属性被分为八大类:类型,背景,区块,边框,列表,定位,扩展。 类型主要定义文本的字体,大小,颜色,行高和修饰等。如图所示: 方法一: 内联样式可以通过style...

    首先介绍一下CSS样式的属性:

    CSS样式属性被分为八大类:类型,背景,区块,边框,列表,定位,扩展。

    类型主要定义文本的字体,大小,颜色,行高和修饰等。如图所示:


    方法一:

    内联样式可以通过style属性直接套进定义对象的HTML标记中去,即style属性值就是内联样式,使用格式如下:

    <标记名 style="CSS样式属性名值对">

    例如<span style="font-size:24px;color : red;">这是内容</span>

    使用内联样式有如下的优缺点:

    缺点:

    1.内联样式会与需要展示的内容融合在一起,因此会使网页维护工作非常麻烦

    2.使用内联样式需要记忆大量的CSS样式属性名,因此,实际中很少使用内联样式

    3.CSS样式中的部分属性与HTML标记的属性不相同,例如表示文本大小的CSS样式属性名为font-size,而<font>标记中表示文本大小的属性名为size

    4.不如用内部样式方便

    优点:

    1.该用法可以用于几乎任何HTML标记


    方法二:

    采用内部样式:

    在DW的样式面板(按下shift+F11即可调出)单击加号,新建通用样式,如图:


    然后完成对样式的设置,就会在代码窗口中出现该样式的定义。

    如图:


    可以将样式名前的“·”修改为“#”,此时引用“#”样式则需要使用id属性而不是Class属性。

    效果图如下:



    方法三:

    采用外部样式:

    内部样式是指在页面文档头部建立的CSS样式,可供本页面中所有的HTML标记引用。如果要建立所有页面都能使用的样式,则需要建立外部样式。

    外部样式是一个以.CSS文件作为扩展名的文本文件,其中包含了许多个样式的定义,在DW中,使用菜单“文件”→“新建”→“常规”→“CSS样式表”,就进入了CSS样式文件的编辑窗口。如图所示:


    在上面的窗口里,有三个HTML标记,(body,td和th分别代表主题,表格的单元格和表格的行的样式,它们会自动应用于文档的主体、表格的单元格和表格的行,实质上是重新定义HTML标记的外观,注:默认情况下,新建HTMl文档时,页面主体部分输入的文本大小是16px、黑色)

    为了引用样式文件中的通用CSS样式,需要在页面的头部使用<Link>标记,格式如下:

    <link rel="stylesheet" href="扩展名为CSS的样式文件名“>

    rel=“stylesheet”表示引用文件和当前页面的关系,即引用文件修饰当前页面文件;href属性设置了引用的CSS样式文件。

    然后就可以对任意新建的文档采用此CSS样式了。效果图如下:





    展开全文
  • CSS样式

    千次阅读 2012-09-22 21:23:38
    CSS样式表 字体: CSS是CascadingStyle Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 引入外部样式表 title of article 而在xml中,...

    CSS样式表

    字体:

    CSS是CascadingStyle Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    引入外部样式表

    <head>
    <title>title of article</title>
    <link rel=stylesheet href="xxx.css" type="text/css">
    </head>
    而在xml中,需要这样连接

    <?xml-stylesheet type="text/css" href="xxx.css"?> 
    字体:
    font : font-style || font-variant || font-weight ||font-size || line-height || font-family

    font : caption || icon || menu || message-box ||small-caption || status-bar

    Font-style : Normal(正常) || italic(斜体) || oblique(倾斜的字体)对于没有斜体变量的特殊字体,将应用Oblique。两个差不多。

     p { font-style: normal; }
     p { font-style: italic; }
     p { font-style: oblique; }

    Font-variant : normal(正常字体) || small-caps(小型的大写字母字体)

    设置或检索对象中的文本是否为小型的大写字母。

    对象的脚本特性为fontVariant.

    Font-weight : normal || bold || bolder || lighter|| number

    Normal :(正常字体,相当于number为400,声明此值将取消之前任何设置)

    Bold : 粗体 相当于number为700 。也相当于b对象的作用

    Bolder :IE5+ 特粗体

    Lighter :IE5+ 细体

    Number :IE5+ 100 | 200 | 300 | 400 | 500 | 600 |700 | 800 | 900

    设置或检索对象中的文本字体的粗细。

    Font-size :absolute-size | relative-size | length

    Absolute-size:根据对象字体进行调节。

    Relative-size:相对父对象进行尺寸的调整。使用成比例的em单位计算。

    Length:百分数

     font-size:200%;  Absolute-size:相对于自身进行比例调整
     font-size:12px; 
     font-style:normal;

    Line-height: normal(默认行高) | length(百分比数字)

    检索和设置对象的行高。即字体最低端与字体内部顶端之间的距离。

    如果行内有多个对象,则应用最大行高。

    Font-family:name

    Font-family: cursive | fantasy | monospace | serif| sans-serif

    Name:字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格,则应使用括号起

    第二种声明方式所列出的字体序列名称。

    设置或检索用于对象中文本的字体名称序列,默认值由浏览器确定。

    Color:指定颜色。

     color:#345345;
     color:red;如果不小心写了两次color.会调用下面的color
     color:menu;很漂亮的似隐形的字体
     color:rgb(100,20,20);

    Text-decoration: none || underline || blink ||overline || line-through

    None:无装饰

    Underline:下划线

    Blink:闪烁

    Line-through:贯穿线

    Overline:上划线

    检索或设置对象中的文本的修饰。

    没有文本的对象次属性不起作用。

    Text-underline-position:below || above

    Below:在文本下面

    Above:在文本上面

    设置或检索text-decoration属性定义的下划线的位置。

     text-underline-position: below;
     text-decoration: underline;

    Text-shadow: color || length || length || opacity

    Color:设置颜色

    Length:有由浮点数字和单位标识符组成的长度值。可为负值。第一个length指定阴影的水平延伸距离。第二个length指定阴影的垂直延伸距离。

    Opacity:由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个length全部设定为0。

    设置或检索对象中文本的文字是否有阴影及模糊效果。

    Font-transform:none | capitalize | uppercase |lowercase

    None:无转换发生

    Capitalize:将每个单词的第一个字母转换成大写,其余无转换发生

    Uppercase:转换成大写

    Lowercase:转换成小写

    text-transform:uppercase;

    Letter-spacing:normal | length  字母之间的间隔

    Normal:默认间隔

    Length:由浮点和单位标识组成的长度值,可以为负值。

    letter-spacing:6px;

    Word-spacing:normal | length    每个词汇之间的间隔

    Normal:默认间距

    Length:由浮点和单位标识组成的长度值,可以为负值。

    CSS Length Units Reference长度单位

    Length Units
    长度单位

    CSS Version
    版本

    Compatibility
    兼容性

    Description
    简介

    相对长度单位 Relative Length Units

    em

    CSS1

    IE4+ , NS4+

    相对于当前对象内文本的字体尺寸

    ex

    CSS1

    IE4+ , NS4+

    相对于字符 “ x ” 的高度。通常为字体高度的一半

    px

    CSS1

    IE3+ , NS4+

    像素(Pixel)

    绝对长度单位 Absolute Length Units

    pt

    CSS1

    IE3+ , NS4+

    点(Point)

    pc

    CSS1

    IE3+ , NS4+

    派卡(Pica)。相当于我国新四号铅字的尺寸

    in

    CSS1

    IE3+ , NS4+

    英寸(Inch)

    cm

    CSS1

    IE3+ , NS4+

    厘米(Centimeter)

    mm

    CSS1

    IE3+ , NS4+

    毫米(Millimeter)

    单位换算:1in =2.54cm = 25.4 mm = 72pt = 6pc

    文本:

    Text-indent:length 段落的首行缩进。

    Length:百分比数字|由浮点数字和单位标识符组成的长度值。允许为负值。

    Text-overflow:clip| ellipsis

    Clip:不显示省略标记(...),而是简单的裁切。

    Ellipsis:当对象内文本溢出时显示省略标记(...)。

    设置或检索是否使用一个省略标记(...)标示对象文本的溢出。

     text-overflow:ellipsis;
     overflow:hidden;
     white-space:nowrap;
     width:200px;
     background:#ccc;
     配合使用,剪去还是加上省略标记

    Vertical-align: baseline | sub | super | top |text-top | middle | bottom | text-bottom | length  可以设置图片相对于文本的位置。

    Baseline:将支持valign特性的对象的内容与基线对齐

    Sub:垂直对齐文本的下标

    Super:垂直对其文本的上标

    Top:将支持valign特性的对象的内容与对象顶端对齐

    Text-top:将支持valign特性的对象的文本与对象顶端对齐。

    Middle:将支持valign特性的对象的内容与对象底端对齐

    Bottom:将支持valign特性的对象的文本与对象底端对齐

    Text-bottom:将支持valign特性的对象的文本与对象顶端对齐。

    td { vertical-align : center; }

    Layout-flow:horizontal | vertical-ideographicText-align:left | right | center | justify(两端对齐)

    Horizontal:对象中的内容自左边流入。下一行在前一行下面。适合拉丁语系

    Vertical-ideographic:对象中的内容自上而下流入,下一行在前一行左面。适合亚洲语系。

    layout-flow:vertical-ideographic;


    Lr|tb:左-右,上-下Writing-mode lr-tb | td-rl

    Td|rl:上-下,右-左

    writing-mode:tb-rl;

    Direction: ltr | rtl | inherit 用于设置文本流的方向

    Ltr:文本刘从左到右

    Rtl:文本刘从右到左

    Inherit:文本流的值不可继承

     direction:rtl;
    Unicode-bidi: normal | bidi-override | enbed

    Normal:对象不打开的嵌入层,对于内联要素,隐式重排序快对象边界进行工作。

    Enbed:对象打开附加的嵌入层,direction属性的值指定嵌入层,在对象内部进行隐式重排序

    Bidi-override:严格按照direction属性的值排序。忽略隐式双向运算规则

     direction:rtl;
     unicode-bidi:bidi-override;

    Word-break: normal | break-all | keep-all

    Normal:依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

    Break-all:该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合一些非亚洲文本的亚洲文本。

    Keep-all:与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

    设置或检索对象内文本的字内换行行为,尤其在出现多种语言时。

    div {word-break : break-all; }

    Line-break:normal | strict

    Normal:应用日本文本的默认换行规则

    Strict:强制日文文本换行规则的严谨性

    White-space:normal | pre | nowrap

    Normal:默认处理方式

    Pre:用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。

    Nowrap:强制强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。参阅td,div等对象的nowrap属性(特性)

    white-space:normal;

    Word-wrap:normal | break-word

    Normal:允许内容顶开指定的容器边界

    Break-word:内容将在边界内换行。如果需要,词内换行。

    设置或检索当当前行超过指定容器的边界时是否断开转行。

    word-wrap:word-break;

    Text-autospace: none | ideograph=alpha |ideograph-numeric | ideograph-parenthesis | ideograph-space

    None:无调整发生。

    Ideograph-alpha:表意字和非表意字(如Latin-based,Greek,Cyrillic,Arabic,Hedbrew等)之间创建额外空格。

    Ideograph-numeric:在表意字和数字之间创建额外空格。

    Ideograph-parenthesis:在常规(非宽度)插入语和非表意字之间创建额外空格

    Ideograph-space:当空格相邻表意字符时,扩展空格的宽度。

    设置或检索对象文本的自动空格和紧缩空格宽度调整的方式。

    Text-kashida-space:length

    Length:百分数。标示kashida膨胀与空格膨胀的比例。为100%,仅有kashida膨胀,为0%,尽有空格膨胀。缺省为0%;

    设置或检索如何拉伸字符来调节文本行排列。

    Text-justify:auto|inter-word|newspaper|distribute|distribute-all-lines|inter-ideograph
    auto : 允许浏览器用户代理确定使用的两端对齐法则
    inter-word : 通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效
    newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式
    distribute : 处理空格很像newspaper,适用于东亚文档。尤其是泰国
    distribute-all-lines : 两端对齐行的方式与distribute相同,也同样不包含两段对齐段落的最后一行。适用于表意字文档
    inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格

     

    背景:background

    Background:background-color | background-image |background-repeat

    Background-attachment | background-position

    该属性是复合属性。

    默认值:transparentnone repeat scroll 0% 0%;

     div { background: red no-repeat scroll 5% 60%; }
     body { background: url("images/aardvark.gif") repeat-y; }
     pre { background: url("images/aardvark.gif") top; }
     caption { background: fuchsia; }

    Background-attachment:scroll-fixed

    Scroll:背景图像是随对象内容滚动

    Fixed:背景图像固定

    设置背景图像是随对象内容滚动还是固定

    Background-color:transparent | color

    Transparent:透明色

    Color:指定颜色

     p { background-color: silver }
     div { background-color: rgb(223,71,177) }
     body { background-color: #98AB6F }
     pre { background-color: transparent; }

    Background-image:none | url(url)

    None:无背景图

    Url:使用相对或绝对路径指定图像

     code { background-image: url("comet.jpg"); }
     br { background-image: url(http://Fred.com/ImageFile/Q.gif); }
     body { background-image: none; }

    Background-position:length | length

    Background-position:position | position

    Length:百分数|由浮点数字和单位标识符组成的长度值

    Position:top | center | bottom | left | center |right

    设置或检索对象的背景图像的位置。必须先指定background-image属性

    如果只指定一个值,该值匹配横坐标。纵坐标默认为50%,第二个值用于纵坐标。

    Background-positionX:length | left | center | right

    Length:百分数|由浮点数字和单位标识符组成的长度值

    Left:居左

    Center:居中

    Right:居右

    设置或检索对象的背景图像横坐标位置。

    Background-positionY:同X.只是这个作用域纵坐标

    Background-repeat:repeat | no-repeat | repeat-x |repeat-y

    设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像。

    Layer-background-color:transparent | color

    Transparent:背景透明色

    Color:指定颜色

    设置或检索对象整个区域的背景颜色

    Layer-background-image:none | url(url)

    None:无背景图

    Url(url):指定背景图

     

    定位:positioning

    Position:static | absolute | fixed | relative

    Static:无特殊定位,对象遵循HTML定位规则

    Absolute:将对象从文档流中拖出,使用Left,right,top,bottom等属性进行绝对定位。而其层叠通过Z-index属性定义。此时对象不具有边距,但仍有补白和边框

    Relative:对象不可层叠,但将依据Left,right,top,bottom等属性在正常文档流中便宜位置。

    Fixed:IE5.5与NS6暂时不支持。

     div {position:absolute;bottom:1in;left:1in;right:1in;top:1in;
     div {position:relative;top:-3px;left:6px;}

    Z-index:auto | number

    Auto:遵从其父对象的定位。

    Number:无单位的整数值,可为负数。

    检索或设置对象的层叠顺序。

    Top:auto | length

    Right:auto | length

    Left:auto | length

    Bottom:auto | length

     

    尺寸:Dimensions:height| max-height | min-height | width | max-width | min-width

    其中height:auto| length  width: auto | length

    其他取值:none |length

     

    布局:layout:clear | float |clip | overflow | overflow-x | overflow-y

    Display | visibility

    Clear:none | left | right | both

    None:允许两边都可以有浮动对象

    Both:不允许有浮动对象

    Left:不允许左边有浮动对象

    Right:不允许右边有浮动对象

    该属性的值指出了不允许有浮动对象的边。

     div { clear : left }
     img { float: right }

    Float:none | left | right

    None:对象不浮动

    Left:对象浮在左边

    Right:对象浮在右边

    该属性指出了对象是否及如何浮动。

     div { clear : right }

    Clip:auto | rect(number number number number)

    Auto:对象无剪切

    Rect(number number number number):依据上右下左的顺序提供对象自对象左上角为(0,0)坐标计算的四个偏移数值,其中任意数值都可以用auto替换。即此边不剪切

    检索和设置对象的可是区域。区域外的部分是透明的。

     div{position:absolute;width:60px;height:60px;clip:rect(0 20 50 10);}
     div{position:absolute; width:60px; height:60px; clip:rect(1cm auto 50px 10cm); }

    Overflow:visible | auto | hidden | scroll

    Visible:不剪切内容也不添加内容。

    Auto:此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条。

    Hidden:不显示超过对象尺寸的内容

    Scroll:总是现实滚动条。

    检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

    设置textarea对象的hidden值将隐藏其滚动条。

    Overflow-x : visible | auto | hidden | scroll

    Overflow-y : visible | auto | hidden | scroll

    Display: block | none | inline | compact |inline-table | list-item | run-in | table | table-caption | table-cell |table-column |

    Table-column-group | table-footer-group |table-header-group | table-row | table-row-group

    block : CSS1 块对象的默认值。用该值为对象之后添加新行
    none : CSS1 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
    inline : CSS1 内联对象的默认值。用该值将从对象中删除行
    compact : CSS2 分配对象为块对象或基于内容之上的内联对象
    marker : CSS2 指定内容在容器对象之前或之后。要使用此参数,对象必须和:after:before伪元素一起使用
    inline-table : CSS2 将表格显示为无前后换行的内联对象或内联容器
    list-item : CSS1 将块对象指定为列表项目。并可以添加可选项目标志
    run-in : CSS2 分配对象为块对象或基于内容之上的内联对象
    table : CSS2 将对象作为块元素级的表格显示
    table-caption : CSS2 将对象作为表格标题显示
    table-cell : CSS2 将对象作为表格单元格显示
    table-column : CSS2 将对象作为表格列显示
    table-column-group : CSS2 将对象作为表格列组显示
    table-header-group : CSS2 将对象作为表格标题组显示
    table-footer-group : CSS2 将对象作为表格脚注组显示
    table-row : CSS2 将对象作为表格行显示
    table-row-group : CSS2 将对象作为表格行组显示

    Visibility: inherit | visible | collapse | hidden

    Inherit:继承上一个父对象的可见性

    Visible:对象可视

    Hidden:对象隐藏

    Collapse:主要用来隐藏表格的行或列

    设置或检索对象是否可见。与display属性不同,此对象隐藏的对象保留其占有的空间

     

    外补丁:Margins

    Margin:auto | length

    Auto:设置为相对边的值。

    Length:由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。对于内联对象来说,左右外延边距可以是负数值。

    设置或检索对象四边的外延边距

    提供四个参数值:按上右下左作用于四边。

    如果只提供一个,表示全部四边

    如果提供两个,第一个用于上-下,第二个用于左-右

    如果提供三个,一个用于上,第二个用于左-右,第三个下

     body { margin: 36pt 24pt 36pt; }
     body { margin: 11.5%; }
     body { margin: 10% 10% 10% 10%; }

    Margin-top:auto | length 设置顶边的外延距

    Margin-right:

    Margin-bottom:

    Margin-left:

     

    轮廓:outlines

    Outline:outline-color || outline-style ||outline-width

    该属性是符合属性:

     img { outline: red }
     p { outline: double 5px }
     button { outline: #E9E9E9 double thin }

    Outline-color:color | invert(使用背景色的反色)

    Outline-style:none|dotted|dashed|solid|double|groove|ridge|inset|outset

    none : 无边框。与任何指定的outline-width值无关
    dotted : 点线边框
    dashed : 虚线边框
    solid : 实线边框
    double : 双线边框。两条单线与其间隔的和等于指定的oueline-width
    groove : 根据outline-color的值画3D凹槽
    ridge : 根据outline-color的值画菱形边框
    inset : 根据outline-color的值画3D凹边
    outset : 根据outline-color的值画3D凸边

     

    Outline-width:medium| thin| thick| length

    medium : 默认宽度
    thin : 小于默认宽度
    thick : 大于默认宽度
    length : 由浮点数字和单位标识符组成的长度值。不可为负值。请参阅长度单位

    Border边框:border-width ||border-style || border-color

    该值是个复合属性。

    Border-color:color

    如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。
    如果只提供一个,将用于全部的四条边。
    如果提供两个,第一个用于上-下,第二个用于左-右。
    如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。

    Border-style:none| hidden| dotted| dashed| solid|double| groove| ridge| inset| outset

    none : 无边框。与任何指定的border-width值无关
    hidden : 隐藏边框。IE不支持
    dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
    dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
    solid : 实线边框
    double : 双线边框。两条单线与其间隔的和等于指定的border-width
    groove : 根据border-color的值画3D凹槽
    ridge : 根据border-color的值画菱形边框
    inset : 根据border-color的值画3D凹边
    outset : 根据border-color的值画3D凸边

     

    如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。
    如果只提供一个,将用于全部的四条边。
    如果提供两个,第一个用于上-下,第二个用于左-右。
    如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
    要使用该属性,必须先设定对象的heightwidth属性,或者设定position属性为absolute。

    Border-width:medium | thin | thick | length

    Medium:默认宽度

    Thin:小于默认宽度

    Thick:大于默认宽度

    Length:由浮点数字和单位标识符组成的长度值。不可为负值

    如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。
    如果只提供一个,将用于全部的四条边。
    如果提供两个,第一个用于上-下,第二个用于左-右。
    如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
    要使用该属性,必须先设定对象的heightwidth属性,或者设定position属性为absolute。

     

    Border-top: border-color || border-style ||border-color

    Border-right: border-color || border-style ||border-color

    Border-bottom: border-color || border-style ||border-color

    Border-left: border-color || border-style ||border-color

     

    内容:GeneratedContent

    Include-source:url(url)

    url : 使用绝对或相对地址指定插入文档。假如该文档不存在,当前对象的内容将被显示

    这个属性插入另一个文档到当前文档,取代当前对象的内容。插入文档的样式属性从当前对象继承。
    Quotes:none: | string

    None:content的open-source和close-quote值将不会任何嵌套标记

    String:用引号括起来的嵌套标记定义

    设置或检索对象内使用的嵌套标记。

    content : attr(alt)| counter(name)| counter(name,list-style-type)| counters(name, string)| counters(name, string,list-style-type)| no-close-quote| no-open-quote| close-quote| open-quote|string| url (url)

    attr(alt) : 使用alt特性的文字
    counter(name) : 使用已命名的计数器
    counter(name, list-style-type) : 使用已命名的计数器并遵从指定的list-style-type属性
    counters(name, string) : 使用所有已命名的计数器
    counters(name, string, list-style-type) : 使用所有已命名的计数器并遵从指定的list-style-type属性
    no-close-quote : 并不插入quotes属性的后标记。但增加其嵌套级别
    no-open-quote : 并不插入quotes属性的前标记。但减少其嵌套级别
    close-quote : 插入quotes属性的后标记
    open-quote : 插入quotes属性的前标记
    string : 使用用引号括起的字符串
    url : 使用指定的绝对或相对地址

     

    counter-increment :none| identifier number

    none : 阻止计数器增加
    identifier number : identifier定义一个将被增加selector,id,或者class。number定义增加的数值。可以为负值。默认值是1

     

    Counter-reset :none| identifier number
    none : 阻止计数器复位
    identifier number : 指定一个或多个复位的计数器

    内补丁padding

    Padding:length

    检索或设置对象四边的补丁边距。
    如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
    如果只提供一个,将用于全部的四条边。
    如果提供两个,第一个用于上-下,第二个用于左-右。
    如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
    内联对象要使用该属性,必须先设定对象的heightwidth属性,或者设定position属性为absolute。
    不允许负值。

    Padding-top:length

    Padding-bottom:length

    Padding-right:length

    Padding-left:length

     

    列表:list-style: list-style-image| list-style-position | list-style-

    Type

    该属性是复合属性。设置列表项目相关内容。

    List-style-image:none | url(url)

    设置或检索作为对象的列表项标记的图像。

    List-style-position:outside | inside

    Outside:列表项目标记放置在文本以外,且环绕文本不根据标记对齐

    inside :列表项目标记放置在文本以内,且环绕文本根据标记对齐

    设置或检索作为对象的列表项标记如何根据文本排列。
    List-style-type:disc| circle| square| decimal| lower-roman| upper-

    roman| lower-alpha| upper-alpha| none| armenian|cjk-ideographic| georgian| lower-greek| hebrew| hiragana| hiragana-iroha|katakana| katakana-iroha| lower-latin| upper-latin

    disc : CSS1 实心圆
    circle : CSS1 空心圆
    square : CSS1 实心方块
    decimal : CSS1 阿拉伯数字
    lower-roman : CSS1 小写罗马数字
    upper-roman : CSS1 大写罗马数字
    lower-alpha : CSS1 小写英文字母
    upper-alpha : CSS1 大写英文字母
    none : CSS1 不使用项目符号
    armenian : CSS2 传统的亚美尼亚数字
    cjk-ideographic : CSS2 浅白的表意数字
    georgian : CSS2 传统的乔治数字
    lower-greek : CSS2 基本的希腊小写字母
    hebrew : CSS2 传统的希伯莱数字
    hiragana : CSS2 日文平假名字符
    hiragana-iroha : CSS2 日文平假名序号
    katakana : CSS2 日文片假名字符
    katakana-iroha : CSS2 日文片假名序号
    lower-latin : CSS2 小写拉丁字母
    upper-latin : CSS2 大写拉丁字母

     

    Marker-offset:auto|length

    Auto:浏览器自动设置间距

    Length:由浮点数字和单位标识符组成的长度值。可为负值

     

    表格:table

    Border-collapse:separate(边框独立) | collapse

    Rtl:相邻边被合并

    设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。

     

    Border-spacing:length || length

    length由浮点数字和单位标识符组成的长度值。不可为负值

    设置或检索当表格边框独立(例如当border-collapse属性等于separate时),行和单元格的边框在横向和纵向上的间距。

    Caption-side:bottom | left | right | top

    设置或检索表格的caption对象是在表格的那一边。它是和caption对象一起使用的属性。

     table caption { caption-side: top; width: auto; text-align: left; }

     Empty-cells:hide | show

    设置或检索当表格的单元格无内容时,是否显示该单元格的边框。

    Table-layout:auto | fixed

    auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
    fixed : 固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关

     

    滚动条:Scrollbar

    scrollbar-3d-light-color :color
    设置或检索滚动条亮边框颜色。
    scrollbar-highlight-color :color
    设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色。
    scrollbar-face-color :color

    设置或检索滚动条3D表面(ThreedFace)的颜色。
    scrollbar-arrow-color :color

    设置或检索滚动条方向箭头的颜色。当滚动条出现但不可用时,此属性失效。
    scrollbar-shadow-color :color

    设置或检索滚动条3D界面的暗边(ThreedShadow)颜色。

    scrollbar-dark-shadow-color :color

    设置或检索滚动条暗边框(ThreedDarkShadow)颜色。
    scrollbar-base-color :color

    设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。

     

    打印:printing

    Page:auto | pagetype

    Auto:参照当前的默认页面

    Pagetype:指定@page规则的页面页面类型

    检索或指定显示对象容器时使用的页面类型(pagetype)。

    page-break-after :auto| always| avoid| left| right|null
    auto : 假如需要在对象之后插入页分割符
    always : 始终在对象之后插入页分割符
    avoid : 避免在对象后面插入页分割符
    left : 在对象后面插入页分割符直到它到达一个空白的左页边
    right : 在对象后面插入页分割符直到它到达一个空白的右页边
    null : 空值。IE5用来取消页分割符设置

    检索或设置对象后出现的页分割符。

     

    page-break-before :auto| always| avoid| left|right| null

    auto : 假如需要在对象之前插入页分割符
    always : 始终在对象之前插入页分割符
    avoid : 避免在对象前面插入页分割符
    left : 在对象前面插入页分割符直到它到达一个空白的左页边
    right : 在对象前面插入页分割符直到它到达一个空白的右页边
    null : 空值。IE5用来取消页分割符设置
    检索或设置对象前出现的页分割符。

     

    page-break-inside :auto| avoid

    auto : 假如需要在对象容器中插入页分割符
    avoid : 使当前对象容器中禁止插入页分割符
    检索或设置对象容器中出现的页分割符。

    marks :none| crop|| cross

    none : 无页标记出现
    crop : 在页面将会被裁切处指定切割标记
    cross : 指定交叉线标记用来供页面对齐

    印刷业的印刷文档通常在页面内容区域外带有一些标记,用来校正和调整所有的页面。此属性用来设置或检索什么样的标志是应该在页容器外边被给予。

     

    orphans :number

    设置或检索对象内容内一定要留在一页范围底端以内的行的最少数量。

     

    size :auto| portrait| landscape| length

    auto : 指定为适应目标纸张尺寸和方向的relative页面容器
    portrait : 指定为适应目标纸张尺寸和方向的relative页面容器,不理会目标页的当前缺省的内容方向,使用文档流从左到右短距离跨越,向下长距离跨越的典型范例(纵向方式)
    landscape : 指定为适应目标纸张尺寸和方向的relative页面容器,不理会目标页的当前缺省的内容方向,使用横向方式
    length : 由浮点数字和单位标识符组成的长度值。

    检索或指定页面规格的调整。它把页面容器归类为absolute和relative两种。absolute页面有固定的尺寸。relative页面容器将会调整适应目标纸张的尺寸。

    widows :number

    number : 无单位整数。不可为负值
    检索或指定一定要留在页面顶部的行数。

     

    鼠标:

    cursor :auto| crosshair| default| hand| move| help|wait| text| w-resize|s-resize| n-resize|e-resize| ne-resize|sw-resize|se-resize| nw-resize|pointer| url (url)

     p { cursor: text; }
     a { cursor: pointer; }
     body { cursor: url("mycursor.gif"), url("images/cursors/footcursor.jpg"), default; }

     zoom :normal| number

    normal : 使用对象的实际尺寸
    number : 百分数|无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值

    设置或检索对象的缩放比例。

    伪类:Pseud0-Classes

    :link设置a未被访问前的样式。

    :hover设置对象在器鼠标悬停时样式

    :active对象被用户激活。

    :visited设置a对象在其链接地址已被访问过时的

    :focus设置对象在成为输入焦点

    :first-letter设置对象内的第一个字符的样式

    :first-line设置第一行

    :first-child第一个子对象

    :first设置容器第一页使用的样式表

    :left设置页面容器位于装订线左边的所有页面

    :right设置页面容器位于装订线右边的所有页面

    :lang设置对象使用特殊语言的内容

     

    伪对象:Pseudo-Elements

    :before用来和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。

    :after用来和content属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。

     

    规则:At-Rules

    @import url(url) sMedia;

    使用绝对或相对地址指定导入的外部样式表文件。

    sMedia:指定设备类型。

    指定导入的外部样式表及目标设备类型。

     

    该规则必须在样式表头部最先声明。并且其后的分号是必需的,如果省略了此分号,外部样式表将无法正确导入,并会生成错误信息。
    用此规则导入的样式表,其owningElement特性是一个link对象或style对象。请参阅我的其他著作。
    导入的外部样式表中的定义将被文当中的同名定义覆盖。

     @import url("foo.css") screen, print;
     @import "print.css"
     

    Media Type
    设备类型

    CSS Version
    版本

    Compatibility
    兼容性

    Description
    简介

    all

    CSS2

    IE4+

    用于所有设备类型

    aural

    CSS2

    NONE

    用于语音和音乐合成器

    braille

    CSS2

    NONE

    用于触觉反馈设备

    embossed

    CSS2

    NONE

    用于凸点字符(盲文)印刷设备

    handheld

    CSS2

    NONE

    用于小型或手提设备

    print

    CSS2

    IE4+

    用于打印机

    projection

    CSS2

    NONE

    用于投影图像,如幻灯片

    screen

    CSS2

    IE4+

    用于计算机显示器

    tty

    CSS2

    NONE

    用于使用固定间距字符格的设备。如电传打字机和终端

    tv

    CSS2

    NONE

    用于电视类设备

     

    CSS Angle Units Reference 角度单位

    Angle Units
    角度单位

    CSS Version
    版本

    Compatibility
    兼容性

    Description
    简介

    deg

    CSS2

    NONE

    度。一个圆圈的360等分之一

    grad

    CSS2

    NONE

    梯度。一个直角的100等分之一。一个圆圈相当于400grad

    rad

    CSS2

    NONE

    弧度。把一个圆圈分成2*PI单位

     

     


    展开全文
  • HTML中CSS样式的优先级

    万次阅读 2018-04-24 12:53:10
      css样式的优先级基于它的继承性。在此篇没有提及标签选择器和通配符选择器,但它们的优先级很低,仅高于body!   并且所介绍的都是单个选择器的优先级,因为组合型的选择器就是单个选择器优先级的累加。 css...

      css样式的优先级基于它的继承性。在此篇没有提及标签选择器和通配符选择器,但它们的优先级很低,仅高于body!

      并且所介绍的都是单个选择器的优先级,因为组合型的选择器就是单个选择器优先级的累加。

    css样式的优先级在本篇中按从低到高的顺序排列,就是目录的顺序


    CSS中body的样式

    我们知道每一个 HTML 页面都有一个 body 元素。

    想要证明body元素的存在,将其 background-color 设置为红色。

    把以下代码添加到我们的style标签中:

    body {
      background-color: red;
    }
    

    即使在网页中除style外并没有任何标签,仍然变成了红色,现在我们已经证明,每个HTML页面都有一个body元素,并且它的body元素同样能够应用样式。

    记住,你可以像任何其他HTML元素一样对你的body元素应用样式,并且所有其他元素都将继承你的body元素的样式。

    body样式的覆盖(class会覆盖body中的样式)

    body作为一个顶级父类,一般情况任意的样式都将覆盖它

    创建一个h1标签

    在body的样式表中加入一个 color:green, 此时h1中的文本变成了绿色

    有时你的 HTML 元素会得到多个相互冲突的样式。

    例如,你的 h1 元素不能同时为绿色和粉色。

    给你的h1添加一个class,pink-text

    在style中加入,并设置颜色为粉色

    你会发现,h1的颜色变为了粉色

    使用class 会覆盖 body 元素的 CSS,这点可以理解为继承中的重写

    多个class处理样式覆盖

    创建一个名为 blue-text 的 CSS class,其颜色设置为蓝色,确保它在 pink-text class 声明之下。

    除了 pink-text class 之外,你还可以将 blue-text class 应用到你的 h1 元素,让我们看看哪一个会被应用。

    如下例子所示,通过用空格分隔多个 class 属性,可让 HTML 元素应用多个 class 属性:

    class="class1 class2"
    

    注意:在 HTML元素中列出这些 class 的顺序并不重要。但是,< style\> 部分中的 class 声明的顺序是重要的,第二个声明将始终优先于第一个声明。因为优先级相同时,则采用就近原则,选择最后出现的样式, .blue-text 是第二个声明,它会覆盖 .pink-text 的属性。


    通过ID的样式属性覆盖class类的声明

    我们刚刚证明了,浏览器是从上到下读取CSS。这意味着,如果发生冲突,浏览器将使用最后的任何CSS声明。

    我们还有其他覆盖 CSS 的方法。你还记得 id 属性吗?

    我们来覆盖你的 pink-text 和 blue-text class,并使你的 h1 元素变成橙色,给 h1元素一个id,然后对该id进行样式化。

    给你的 h1 元素添加名为 orange-text 的 id 属性。记住,id 样式如下所示:

    在你的 h1 元素中保留 blue-text 和 pink-text class。

    为你的 style 元素中的 orange-text id 创建一个 CSS 声明。如下例子所示:

    #brown-text {    
      color: brown;    
    }
    

    注意:你是否将这个css声明在pink-text class之上或之下无关紧要,因为id属性始终是具有更高的优先级。

    通过内联样式覆盖class类的声明

    我们已经证明了,id 声明都会覆盖 class 声明,不管它在你的 style 元素 CSS 的哪个位置进行声明。

    内联样式可以覆盖其他CSS。

    使用 in-line style(内联样式)来尝试使我们的 h1 元素变为白色。就是标签内的style属性,
    内联样式如下所示:

    <h1 style="color: white;">
    

    在你的 h1 元素上保留 blue-text 和 pink-text class。

    通过使用Important覆盖所有其他样式

    我们刚证明了内联样式将覆盖style 中定义的所有 CSS声明。
    可是,有最后一个终极方法来覆盖CSS。但在我们这样做之前,让我们来谈谈你为什么要覆盖CSS。

    在许多情况下,将使用CSS库。这些可能会意外覆盖自己的CSS。所以当你绝对需要确定一个元素具有特定的CSS时,可以使用 !important。

    让我们回到之前的 pink-text class 声明。请记住,我们的 pink-text class 被后续的 class 声明、id 声明和内联样式覆盖了。

    我们来给 pink-text 元素的 color 声明加上关键字 !important,以使 100% 确保你的 h1 元素是粉色的。

    举例如下:

    color: pink !important;
    
    • 颜色除了使用单词还可以用 hex code(‘#000000’这样的形式),是16进制符号,(提到16进制,我们会发现刚好是作为rgb值的范围(0-255),每两个字符对应rgb中的一个值)
    • 或者rgb()函数,rgba()函数
      rgb指红绿蓝,范围在0到255
      a是透明度,范围在0到1
    展开全文
  • CSS样式选择器

    千次阅读 2018-12-01 11:38:08
    例:创建一个div,直接在标签里写它的样式 &amp;amp;lt;div style=&amp;quot;width: 200px;height: 200px;background-color: red&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt; ...
  • css样式的覆盖

    千次阅读 2019-08-08 17:39:54
    有时你的html元素会得到多个相互冲突的样式,例如当你创建了一个body元素的background-color css属性为红色,然后再创建一个.text-color{color:black;}设置p元素class为text-color;运行后p元素内容将会是很黑色,...
  • Flex使用CSS样式

    千次阅读 2011-12-27 16:46:17
    使用标签在MXML文件中创建本地的样式定义。这个标签包含了符合CSS2.0语法的样式表定义。 这些定义会应用到当前文档以及当前文档的子文档。 .solidBorder{//类选择样式 border-style:solid; } ...
  • CSS样式表的使用

    万次阅读 2018-07-21 13:26:50
    为了弄清楚CSS样式表的使用,特地看书系统学习,现总结如下: CSS是通过选择器对不同的HTML标签进行控制,从而实现各种效果。常用的CSS选择器有标签选择器、类别选择器、id选择器。 标签选择器的使用 HTML网页是...
  • CSS选择器及CSS样式

    热门讨论 2016-06-08 10:44:24
     牛腩新闻发布系统中记忆最深的就是各种CSS选择器各种CSS样式,这些选择器之间肯定有它的优先级,包括CSS样式也一样,也是有它的优先级,本文介绍一些各种CSS选择器各种CSS样式以及它们的优先级。 内容 CSS语法  ...
  • 首选,回顾一下CSS定义样式的三种方式:链接外部样式、嵌入样式(放在head元素中)和内联样式(行内样式)。想要让样式生效,有如下方式: 通过CSS选择器来进行大规模选取,但通常会用到ID...但CSS样式是静态的,要让C
  • 使用JavaScript动态添加CSS样式规则

    万次阅读 2014-09-05 21:20:23
    动态添加规则到样式表是高效的手段,可能比你想象的还要简单。请记住这种方案,可能在你的下一个大应用中需要使用,因为它能在代码和元素处理这两方面避免你掉进坑里。
  • 设置好CSS样式先,然后动态生成元素,元素可以按照CSS样式显示,只要对应到相应的规则即可。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Grid Layout Test&...
  • React Native CSS样式传递

    千次阅读 2016-11-02 16:33:50
    React Native如何定义css 样式 React Native 不实现 CSS,而是依赖于 JavaScript 来为你的应用程序设置样式。这是一个有争议的决定,你可以阅读那些幻灯片,了解背后的基本原理。 声明样式 在 ...
  • asda /*样式*/ #div{ display: block; //css的一种属性 } 内容 链接 var div1 = document.getElementById("div"); //d
  • 修改 iframe 中的 CSS 样式

    万次阅读 2018-07-05 16:27:22
    工作中总能遇到 引用别人的页面,就会带来很多问题,比如iframe中的样式不满足我们的需求,这就需要修改iframe中的样式, ...document.getElementById('引用的iframeId').contentWindow.document.getElementById('修改样...
  • WEB入门三 CSS样式表基础

    千次阅读 2017-02-14 14:02:38
    学习内容Ø CSS的基本语法Ø CSS选择器Ø 常见的CSS样式Ø 网页中3种使用CSS的方式能力目标Ø 理解CSS的作用Ø 掌握CSS基本语法Ø 熟练掌握CSS选择器的定义和使用会使用CSS设置文字样式本章简介对于网页设计...
  • 如何在HTML页面中包含CSS样式

    千次阅读 2018-10-20 17:18:58
    介绍三种在页面中包含CSS样式的方法,分别是:行内样式,内嵌式和连接式。 1)行内式 行内式非常简短易用。通过HTML标记的style属性即可实现。但是这种方式的缺点是灵活性不强。 &lt;!--演示行内样式--&...
  • CSS样式覆盖优先级小结

    千次阅读 2019-02-17 23:32:10
    通过将其 background-color 设置为黑色,我们可以证明 body 元素的存在。 &lt;style&gt; ... background-color:... 可以像对其他 HTML 元素一样对你的 body元素应用样式,并且所有其他元素将继承你的 bo...
  • css样式表的使用方法

    千次阅读 2013-03-22 12:36:19
    第3章 CSS样式表的使用方法 一、教学目标 1.理解什么是CSS样式表,及CSS样式表在网页制作中的重要作用 2.掌握CSS样式表的基本结构; 3.掌握常见的三种(标签名、类、ID)选择器 4.理解在 HTML 中引用CSS样式表...
  • CSS样式学习笔记

    千次阅读 2011-07-23 01:03:52
    1.当同一个html元素被不同的样式定义时,所有的样式会根据以下的规则层叠于一个虚拟样式表中,其中数字越大拥有越高的优先权: (1)浏览器缺省设置; (2)外部样式表; (3)内部样式表(位于head标签内); ...
  • 关于CSS样式表,看这篇就够了!

    万次阅读 2020-02-02 16:22:27
    文章目录1 CSS 样式表1.1 CSS 规则1.2 CSS 选择器1.2.1 标记选择器1.2.2 类别选择器1.2.3 id 选择器1.3 在页面中包含 CSS1.3.1 行内样式1.3.2 内嵌式1.3.3 链接式2 CSS3 的新特性2.1 模块与模块化结构2.2 一个简单的...
  • WEB前端--CSS样式优先级

    千次阅读 2017-02-06 11:55:40
    多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。 一般情况下,优先级如下: (外部样式)External style sheet   有个例外的情况,就是如果外部...
  • Vue css样式穿透和权重

    千次阅读 2019-09-29 17:53:51
    Vue中自己编写的样式分两种:全局和私有 全局:顾名思义即影响所有页面、组件的样式 私有:仅作用于当前文件dom元素的样式 文件权重排序:(重—>轻) 子组件—>父组件—>App.vue 子组件的样式最高级,App....
  • Css样式表 (常用基础)

    千次阅读 2015-08-01 00:09:47
    通过使用CSS样式设置页面的格式,可以把页面的内容与表现形式分离开。  特点:利用它不仅可以减少网页的格式代码,而且可以快速的更新网站的风格。 2、CSS样式表的格式 一般来说,样式表的声明分为选择符...
  • DOM系列:动态添加CSS样式规则

    千次阅读 2018-06-26 22:14:34
    在上一节中学习了如何通过JavaScript来修改CSS样式。简单地说:查询CSS样式(即计算样式),设置单个样式(设置的是行内样式),设置多个样式(通过类来设置样式)。...
  • JS设置CSS样式的几种方式

    千次阅读 2017-01-21 02:57:49
    JS设置CSS样式的几种方式 用JS来动态设置CSS样式,常见的有以下几种   1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有’-‘号,就写成驼峰的形式(如textAlign) 如果想保留 - 号...
  • //设置列表样式 list-style-type: none; //清楚样式 属性有很多可以自己去试:circle,disc,decimal。。。。     二、设置列表图片符号 为ul,ol设置图片符号 ul,ol{  list-style-image: url("li....
  • 关于.acss文件 在视频中已经说过了,小程序...我们知道在web开发中样式是在css文件中规定的,叫做层叠样式表 (Cascading Style Sheets)。其实在APP中样式的约束也是使用css,在支付宝小程序中也是使用css不过文件
  • CSS样式的基础学习

    千次阅读 2013-09-30 19:51:57
    级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 112,299
精华内容 44,919
关键字:

创建idcss样式