CSS入门到精通

Examples

CSS 列表

CSS 列表 CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML中,有两种类型的列表: 无序列表 – 列表项标记用特殊图形(如小黑点、小方框等) 有序列表 – 列表项的标记有数字或字母 使用CSS,可以列出进一步的样式,并可用图像作列表项标记。 不同的列表项标记 list-style-type属性... »

CSS 伪元素

CSS 伪元素 CSS伪元素是用来添加一些选择器的特殊效果。 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.class:pseudo-element {property:value;} :first-line 伪元素 “first-line” 伪元素用于向文本的首行设置... »

Examples

CSS 表格

CSS 表格   使用 CSS 可以使 HTML 表格更美观。 Company Contact Country Alfreds Futterkiste Maria Anders Germany Berglunds snabbköp Christina Berglund Sweden Centro comercial Moctezuma Francisco Chang Mexico Ern... »

CSS 导航栏

CSS 导航栏 ul.horizontal { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.horizontal li { float: left; padding: 0; margin: 0; background-image:none; } ul.hor... »

CSS box-model

CSS 盒子模型

CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model): 不同部分的说明:... »

CSS 提示工具(Tooltip)

CSS 提示工具(Tooltip) 本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具。 提示工具在鼠标移动到指定元素后触发,先看以下四个实例: .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted #ccc; zcursor: help; color: #006080; } .... »

Examples

CSS 边框

CSS 边框 CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色。 在四边都有边框   红色底部边框   圆角边框   左侧边框带宽度,颜色为蓝色 边框样式 边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的样式 border-style 值: none: 默认无边框   dotted: 定义一个点线边框 &nb... »

CSS 图片廊

CSS 图片廊 .responsive .img { border: 1px solid #ccc; } .responsive .img:hover { border: 1px solid #777; } .responsive .img img { width: 100%; height: auto; } .responsive .desc { padding: 15px; text-alig... »

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 选择器以 “#” 来定义。 以... »

Page 1 of 212