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站点升级带来方便,尤其当需要在由不同开发人员在不同时间所开发站点中换来换去工作的时候。
分享到:
相关推荐
### DIV+CSS 实现虚线边框的详细解析 在网页设计中,边框样式是增强页面视觉效果的重要手段之一。其中,虚线边框因其轻盈而不失风格的特点,被广泛应用于各种网页布局和元素装饰中。本文将详细介绍如何使用CSS中的`...
CSS 边框(Border)样式是 HTML 中 DIV 元素的常用样式之一,本文将详细介绍如何给 DIV 加一个边框 Border 样式,包括虚线与实线边框、上边框、下边框、左边框、右边框、上下边框、左右边框和四边框等多种边框样式,...
### 如何使用CSS(14)-边框属性 在网页设计与开发中,CSS(层叠样式表)是实现页面布局、美化外观的关键技术之一。其中,“边框”作为元素视觉呈现的重要组成部分,在构建美观且功能性的用户界面时不可或缺。本篇...
- `border-width`、`border-style`和`border-color`分别用于设置边框的宽度、样式(如实线、虚线等)和颜色。 3. **响应式设计** - 使用媒体查询(`@media`)实现响应式布局,根据设备屏幕尺寸改变CSS规则。例如...
- **边框风格**:`border-style`属性定义边框样式,如`solid`为实线,`dashed`为虚线等。 - **鼠标形状**:通过`cursor`属性设置鼠标形状,如`pointer`为小手形状,`help`为帮助图标。 - **列表属性**:`list-...
3. **边框(border)**:边框包围着内容和填充,可以设置边框的宽度、样式(如实线、虚线等)和颜色。在现实生活中,边框就像盒子的材质和厚度。 4. **边界(margin)**:边界是盒子与其他元素之间的空间,用于控制元素...
这种方法使用了CSS的渐变背景来模拟虚线,`background-size`属性控制了虚线的宽度和间距,`linear-gradient`则定义了虚线的颜色和位置。 总的来说,HTML和CSS提供了丰富的工具来定制分割线和虚线样式。无论是使用`...
在CSS(层叠样式表)中,边框样式可以通过`border-style`属性来设置,其中包括了虚线(`dashed`)和实线(`solid`)。默认情况下,边框是实线,但通过调整样式,我们可以将边框设置为虚线,或者在特定事件(如点击、...
在网页设计与开发中,CSS(层叠样式表)和DIV元素是构建布局的基础。"CSS+DIV-盒子模型示例.zip"中的内容显然是为了帮助理解CSS中的盒子模型及其应用。盒子模型是CSS布局的核心概念,它将每个HTML元素视为一个具有...
CSS的`border`属性用于设置元素的边框,包括边框宽度(`border-width`)、边框样式(`border-style`,如实线`solid`、虚线`dashed`)和边框颜色(`border-color`)。例如: ```css border: 1px solid #000; ``` 这个...
本篇将深入探讨`div+css`布局的核心知识点,包括颜色管理、盒模型尺寸、边框设置、背景样式、字体控制、列表格式化、图片处理以及CSS的一些高级技巧等。 #### 一、文档类型声明DOCTYPE 文档类型声明(DOCTYPE)是...
在CSS(层叠样式表)中,文本填充、边框和位置属性是构建网页布局和设计的重要组成部分。本文主要探讨CSS中的填充(padding)、边框(border)以及位置相关属性,帮助你理解如何精确控制元素的内外间距和边框样式。 ...
5. 图像边框:`border`属性可以为图像添加边框,包括宽度、样式(如实线、虚线等)和颜色。`border-radius`可以创建圆角图像,甚至实现圆形图片。 6. 图像阴影:`box-shadow`和`text-shadow`属性分别用于元素和文本...
以上列举了在`div_css`制作中常用的CSS属性,掌握这些属性可以帮助开发者更好地控制网页布局、美化界面以及提高用户体验。通过不断的实践和学习,你会逐渐熟悉这些属性,并能够在实际项目中灵活运用。
- - `dashed`:虚线边框(在某些平台上的IE可能显示为实线)。 - - `solid`:实线边框。 - - `double`:双线边框,两条单线的总和等于指定的`border-width`。 - - `groove`、`ridge`、`inset`和`outset`:根据`...
### CSS属性表与用法详解 #### 一、概述 CSS(Cascading Style Sheets),即层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。它能够实现网页的表现与内容分离,增强页面的灵活性和可维护性。本文档将...
此外,`border-radius`属性也可以与虚线边框结合使用,创建带有圆角的虚线框,这样可以增加元素的视觉柔和度。例如: ```css div { border-style: dashed; border-width: 2px; border-color: blue; border-...
标题中的“CSS边框线solid”指的是CSS中的边框样式属性,特别是实线类型的边框。描述虽然为空,但从标签和内容来看,我们主要讨论的是如何使用CSS来添加和定制边框,特别是关于边框的宽度、类型和颜色。 在CSS中,`...
` 边框样式,有多种选择如solid(实线)、dotted(点线)、dashed(虚线)、double(双线)等。 - `border:1px solid #000000;` 边框的综合缩写,顺序为:宽度 样式 颜色。 - 可以分别设置四个方向的边框,如`...
综上所述,《W3cSchool_DIV+CSS2_参考手册》提供了丰富的CSS属性介绍,涵盖了背景、边框和文本等多个方面,对于前端开发者理解和运用CSS有着重要的指导意义。通过学习这些属性及其用法,开发者能够更好地控制网页...