CSS初级教程 边框

边框可以应用到在主体元素body中的绝大部分HTML元素中。
创建一个包围着元素的边框,你所需要的是边框样式border-style。它们的值可以是 solid、dotted、dashed、double、groove、ridge、 inset和outset。(你有必要每个值都试一试,看看效果如何译者注)
边框宽度border-width为边框设置宽度,通常用像素来表示。当然,还可以单独设置四个方向的边框属性,它们是border-top-width、border-right-width、 border-bottom-width和border-left-width。
最后,边框颜色border-color设置颜色。
为下面的CSS文档添加如下代码:

 代码如下 复制代码
h2 { 
border-style: dashed; 
border-width: 3px; 
border-left-width: 10px; 
border-right-width: 10px; 
border-color: red; 

这将会使所有的HTML二级标题(h2)产生红色的破折号(dashed)边框,上下各3像素宽,左右则各10像素宽(取代了3像素宽的全局设置)。
关于盒模型

时间: 2024-11-05 12:25:37

CSS初级教程 边框的相关文章

七 CSS初级教程总结:属性结合起来使用

css|教程 如果你学完HTML初级教程即可学习CSS初级教程,使用CSS处理HTML样式. 下面的代码覆盖了初级教程的所有方面,保存下面的CSS文件并且在浏览器里观看连接的HTML,你可以明白各个CSS属性的用法.最好的学习方法就是理解作用在HTML上的CSS文件,改变CSS HTML会发生什么变化. body {font-family: arial, helvetica, sans-serif;font-size: 80%;color: black;background-color: #ff

Dreamweaver MX 2004 CSS使用教程之边框属性

css|dreamweaver|教程 本站原创内容,转载请注明出处网页教学网. 六.定义 CSS 样式边框属性 使用"CSS 样式定义"对话框的"边框"类别可以定义元素周围的边框的设置(如宽度.颜色和样式). 设置边框样式:在"CSS 样式定义"对话框中,选择"边框"(如下图),然后设置所需的样式属性. 请注意:下列任意属性如果您认为不重要可以保留为空. 样式:设置边框的样式外观.样式的显示方式取决于浏览器.DW MX 200

CSS初级教程 选择符 属性和值

HTML有标签(tag),CSS就有选择符(selector).选择符就是赋予内部或者外部样式表的名字.在 CSS初级指南中,我们致力于HTML选择符,即是HTML的标签,用来改变一个指定标签的样式.每个选择符都有属性(properties)在大括号{}中,里面包括诸如color.font-weighth或者 background-color形式的字样.值(value)在半角英文引号:后面,用半角英文分号;隔离. body { font-size: 0.8em; color: navy; } 如

CSS初级教程-CSS结合JS的运用

利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用.首先,要搞清楚事件和动作的概念.在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互.例如,当用户单击一个按钮或者在某段文字上移动鼠标时,就触发了一个单击事件或鼠标移动事件,通过对这些事件的响应,可以完成特定的功能(例如,单击按钮弹出对话框,鼠标移动到文本上后文本变色等). 下面介绍几种常见的事件: onClick:鼠标单击事件.(是指鼠标按下,然后松开时

CSS初级教程 边界和补白

边界margin和补白padding(依据国内出版社的翻译惯例,margin被翻译成边界,padding被翻译成补白,译者依照习惯翻译.但译者认为,margin翻译成外边距,padding翻译成内边距更为直白和形象.你可以依据自己的习惯来适应这两种不同的译法.译者注)是隔开元素最常用的两个属性.边界是元素外边的距离,而补白则是元素内部的距离. 为h2改进代码如下:  代码如下 复制代码 h2 {  font-size: 1.5em;  background-color: #ccc;  margi

Dreamweaver MX 2004 CSS使用教程

css|dreamweaver|教程 1.Dreamweaver MX 2004 CSS使用教程之滤镜介绍2 [2005-03-06]     2.Dreamweaver MX 2004 CSS使用教程之CSS滤镜介绍 [2005-03-06]     3.Dreamweaver MX 2004 CSS使用教程之CSS扩展属性 [2005-03-06]     4.Dreamweaver MX 2004 CSS使用教程之CSS定位属性 [2005-03-06]     5.Dreamweaver

CSS中级教程 class和id选择符

在CSS初级教程中我们仅仅考虑了HTML选择符──以HTML标签形式出现. 你当然可以用类选择符class和标识选择符id来定义自己的选择符. 这样做的好处是,依赖于class或者id,你可以不同地表现相同的HTML元素. 在CSS中,类选择符在一个半角英文句点(.)之前,而id则在半角英文井号(#)之前. 看起来像这样:  代码如下 复制代码 #top {  background-color: #ccc;  padding: 1em  }  .intro {  color: red;  fon

web标准建站:CSS入门教程

css|web|web标准|教程|入门教程 原创教程,转载请注明出处:网页教学网 CSS是"Cascading Style Sheets"的简称,中文翻译为"串接样式表",也有人翻译 为"样式表".CSS用以作为网页的排版和风格设计,在web标准建站中,对CSS的熟悉和使用 是相当重要的一个内容.CSS的作用是弥补HTML的不足,让网页的设计更为灵活. 这个文章只是为您介绍CSS的基础应用,指引您的一个入门的基础教程,主要目的是为 推进web标准

CSS入门教程

css|教程|入门教程 CSS是"Cascading Style Sheets"的简称,中文翻译为"串接样式表",也有人翻译为"样式表".CSS用以作为网页的排版和风格设计,在web标准建站中,对CSS的熟悉和使用是相当重要的一个内容.CSS的作用是弥补HTML的不足,让网页的设计更为灵活. 这个文章只是为您介绍CSS的基础应用,指引您的一个入门的基础教程,主要目的是为推进web标准贡献自己的微薄之力. 说点我自己的体会,现在有好多人都在推广WE