CSS入门教程

CSS入门教程:计算CSS盒模型宽和高

 出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;} 如上一段的代码,很多时候我们会把它所占的位置计算成width:120px,height:120px,因为在正常的理解下,paddi... »

CSS入门教程:网页首字下沉

CSS入门教程:网页首字下沉:first-letter版本:CSS2 兼容性:IE5.5 语法:Selector : first-letter 说明:设置对象内的第一个字符的样式。内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。在此伪对象中配合使用 font-siz... »

Outline

CSS 轮廓(outline)

CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。 轮廓(outline)实例 本例演示使用outline属性在元素周围画一条线。 本例演示如何设置轮廓的样式。 本例演示如何设置轮廓的颜色。 本例演示如何设置轮廓的宽度。 CSS 轮廓(outline) 轮廓(outl... »

klematis

CSS 图像透明/不透明

#klem1,#klem2 { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } #klem1:hover,#klem2:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ } div.background { widt... »

Examples

CSS margin(外边距)

CSS margin(外边距)CSS margin(外边距)属性定义元素周围的空间。margin 没有背景颜色,是完全透明的。margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。Margin - 单边外边距属性在CSS中,它可以指定不同的侧面不同的边距:实例margin-top:100px;margin-bottom:100px;margin-right:50px;mar... »

navigation images

CSS 图像拼合技术

CSS 图像拼合技术 图像拼合 图像拼合就是单个图像的集合。 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。 使用图像拼合会降低服务器的请求数量,并节省带宽。 图像拼合 – 简单实例 与其使用三个独立的图像,不如我们使用这种单个图像(”img_navsprites.gif”): 有了CSS,我们可以只显示我们需要的图像的一部分。 在下面的例子C... »

HTTP 状态消息

HTTP 状态消息   当浏览器从 web 服务器请求服务时,可能会发生错误。 以下列举了有可能会返回的一系列 HTTP 状态消息:   1xx: 信息 消息: 描述: 100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求。 101 Switching Protocols 服务器转换协议:服务器将遵从客户的请求转换到另外... »

Examples

CSS padding(填充)

CSS padding(填充)CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。padding(填充)当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。单独使用 padding 属性可以改变上下左右的填充。 »

CSS 媒体类型

CSS 媒体类型 媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。 媒体类型 一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如, font-size 属性可用于屏幕和印刷媒体,但有不同的值。屏幕和纸上的文件不同,通常需要一个更大的字体,sans-serif ... »

CSS 教程

CSS 教程 通过使用 CSS 我们可以大大提升网页开发的工作效率! 在我们的 CSS 教程中,您会学到如何使用 CSS 同时控制多重网页的样式和布局。 各章节实例 本 CSS 教程包含了数百个CSS在线实例 通过本站的在线编辑器,你可以在线编辑CSS,并且可以在线查看修改后的效果。 CSS 实例 body { background-color:#d0e4fe; } h1 { color:oran... »

CSS 分组 和 嵌套 选择器

CSS 分组 和 嵌套 选择器分组选择器在样式表中有很多具有相同样式的元素。每个选择器用逗号分隔。在下面的例子中,我们对以上代码使用分组选择器:实例h1,h2,p嵌套选择器它可能适用于选择器内部的选择器的样式。.marked p: 为所有 元素内的 p 元素指定一个样式。 »

CSS 属性 选择器

CSS 属性 选择器 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id。 注意:IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器。 属性选择器 下面的例子是把包含标题(title)的所有元素变为蓝色: 实例 [title] { color:blue; }   属性和值选择器 下面的实例改变了标题title=&#... »

CSS 简介

CSS 简介 你需要具备的知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML / XHTML 如果你希望首先学习这些项目,请在 首页 访问相关教程。 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提... »

Examples

CSS 尺寸 (Dimension)

CSS 尺寸 (Dimension) CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。   更多实例 这个例子演示了如何设置不同元素的高度。 这个例子演示了如何使用百分比值设置元素的高度。 本例演示如何使用像素值来设置元素的宽度。 此示例演示如何设置元素的最大高度。 本例演示如何使用百分比值来设置元素的最大宽度。 此示例演示如何设置元素的最... »

CSS 表单

CSS 表单 一个表单案例,我们使用 CSS 来渲染 HTML 的表单元素: CSS 实例 input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: ... »

CSS 语法

CSS 语法

CSS 语法 实例 查看 查看 CSS 实例 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。 CSS 实例 CSS声明总是以分号(;)结束,声明总以大括号({})括起来: p {c... »

Examples

CSS Display(显示) 与 Visibility(可见性)

.imgbox { float:left; text-align:center; width:120px; height:135px; border:1px solid gray; margin:4px; padding:0px; } .thumbnail { width:110px; height:90px; margin:3px; } .box { width:110px; padding:0... »

CSS 计数器

CSS 计数器 CSS 计数器通过一个变量来设置,根据规则递增变量。 使用计数器自动编号 CSS 计数器根据规则来递增变量。 CSS 计数器使用到以下几个属性: counter-reset – 创建或者重置计数器 counter-increment – 递增变量 content – 插入生成的内容 counter() 或 counters() 函数 –... »

CSS Id 和 Class

CSS Id 和 Class id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置”id” 和 “class”选择器。 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。 以... »

Examples

CSS Position(定位)

CSS Position(定位) position 属性指定了元素的定位类型。 position 属性的五个值: fixed 定位 元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动: 实例 p.pos_fixed { position:fixed; top:30px; right:5px; }   注意: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCT... »

CSS 网页布局

CSS 网页布局

CSS 网页布局 网页布局 网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。 头部区域 头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的 logo: CSS3 实例 .header { background-color: #F1F1F1; text-align: center; padding: 20px; } 菜单导航区域 菜单导航条包含了一些... »

CSS 创建

CSS 创建 当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。 如何插入样式表 插入样式表的方法有三种: 外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style) 外部样式表 当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外... »

CSS 布局 – Overflow

CSS 布局 – Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式。 #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 80%; height: 100px; overflow: scroll; border: 1px solid #ccc; } div.v... »

你已经学习了CSS,下一步学习什么呢?

你已经学习了CSS,下一步学习什么呢? CSS 总结 本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。 你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框,并定义元素的填充和边距。 同时,你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后,以及向某些选择器添加特殊的效果,比如链接。 如果需要更多关于 CSS 的信息,请参阅我们的... »

Examples

CSS 背景

CSS 背景 CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果: background-color background-image background-repeat background-attachment background-position 背景颜色 background-color 属性定义了元素的背景颜色. 页面的背景颜色使用在body的选择器中: 实例 bo... »

Page 1 of 212