首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

关于CSS(DIV属性,背景,联接,边框,虚线,实线,布局与命名)

2012-10-17 
关于CSS(DIV属性,背景,连接,边框,虚线,实线,布局与命名)div属性  div属性  color : #999999 文字颜色  fon

关于CSS(DIV属性,背景,连接,边框,虚线,实线,布局与命名)
div属性

  div属性

  color : #999999 文字颜色

  font-family : 宋体 文字字型

  font-size : 10pt 文字大小

  font-style:itelic 文字斜体育

  font-variant:small-caps 小字体

  letter-spacing : 1pt 文字间距

  line-height : 200% 设定行高

  font-weight:bold 文字粗体

  vertical-align:sub 下标字

  vertical-align:super 上标字

  text-decoration:line-through 加?h除线

  text-decoration:overline 加顶线

  text-decoration:underline 加底线

  text-decoration:none ?h除连接底线

  text-transform : capitalize 首字大写

  text-transform : uppercase 英文大写

  text-transform : lowercase 英文写

  text-align:right 文字*右对齐

  text-align:left 文字*左对齐

  text-align:center 文字置中对齐

  这些是一些简单的文字效果,可以应用到css的页面中。 

  背景

  background-color:black 背景颜色

  background-image : url(image/bg.gif) 背景图片

  background-attachment : fixed 固定背景

  background-repeat : repeat 重复排列-网页预设

  background-repeat : no-repeat 不重复排列

  background-repeat : repeat-x 在x轴重复排列

  background-repeat : repeat-y 在y轴重复排列

  background-position : 90% 90% 背景图片x与y轴的位置

  链接

  A 所有超连接

  A:link 超连接文字格式

  A:visited 浏览过的连接文字格式

  A:active 按下连接的格式

  A:hover 鼠标移至连接

  边框

  border-top : 1px solid black 上框

  border-bottom : 1px solid #6699cc 下框

  border-left : 1px solid #6699cc 左框

  border-right : 1px solid #6699cc 右框

  border: 1px solid #6699cc 四边框

  虚线

  <textarea style="border:1px dashed pink">

  实线

  <textarea style="border:1px solid pink">

  ===========================================================================

  DIV 网页布局规范的对CSS的类及id命名

  Web开发者(也就是您)可以通过创建CSS类及id名称并使用这些名称来对div以及其他的页面元素、标签进行标识。对开发人员来说,在命名重新定义XHTML标记(tags)的CSS selectors时,必须保证其与预定义的标记准确匹配,但就类以及id选择器名称而言,则仁者见仁,智者见智。然而随心所欲的为这些类以及id命名则并不是个好的习惯。

  在阅读了由Andy Clarke(of Stuff and Nonsense and All That Malarkey)以及Eric Meyer所撰写的关于CSS类以及id命名规范的系列文章之后,我开始思考在自己的Web站点设计过程中对类以及ids的命名方式。

  直观命名

  当在设计Web页面以及需要对一个div进行标识的时候,最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示:

  top-panel

  horizontal-nav

  left-side

  center-column

  right-col

  这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且能够使人顾名思义,因此满足了标识页面元素以及相应的CSS样式的需要。

  但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置,因此在这样的布局之外使用就会显得不合适甚至造成理解混乱。同时,这些命名没有涉及文档内容的结构。因此,下面给出了对CSS类以及ID命名更好的方法。

  结构化命名

  结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记(markup)中的类和id名称。

  有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容(content)以及标记(markup)进行重用。当你理解这种方式时,很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频(audio)等外观格式上显得非常不合适。因此,应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。

  可以按照如下所示的结构化方式来对类以及id名称命名:

  branding

  main-nav

  subnav

  main-content

  sidebar

  这些名字同直观命名方式一样非常易懂,但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记(structural markup)的初衷,即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。

  即使你不打算在其他的媒体上对Web页面进行格式修改,使用结构化命名方式还可以帮助你在日后的站点升级或重新设计中更为轻松。例如,结构化命名避免了当一个div同id right-column移动到页面左边后所带来的混乱。对div sidebar的采用这样的命名方式就显得更加适当,因为无论它出现在页面的哪一边,这个名字仍然对开发人员来说直观易懂。

  一些命名惯例

  Andy Clarke分析了40份由推崇标准化Web设计理念的开发人员所设计的Web站点的源代码。尽管类以及id名称很不统一,但是还是发现了一些频繁出现的常用名称。这里给出了最常用类/id名称的示例列表:

  header

  content

  nav

  sidebar

  footer

  这些常见的类以及id名称是否标志着一种标准的诞生或是普遍接受惯例的形成呢?尽管这是我所希望的,但我并不这么认为。我的确希望能够看见一整套对于我们每天都可以看到的常用页面元素的命名标准。同时,使用标准化的命名方式可以使得寻找页面元素以及对Web站点升级带来方便,尤其当需要在由不同开发人员在不同时间所开发站点中换来换去工作的时候。

热点排行