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

CSS 语法

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

CSS 教程

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

CSS 简介

CSS Id 和 Class   id 和 class 选择器 如果你要在HTML元素中设置CSS样式，你需要在元素中设置'id' 和 'class'选择器。  id 选择器  id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 '#' 来定义。  以下的样式规则应用于元素属性

CSS Id 和 Class选择器

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

CSS 创建

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

CSS Backgrounds(背景)

CSS 文本格式  文本格式 This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters ..

CSS Text(文本)

CSS 字体   CSS字体属性定义字体，加粗，大小，文字样式。  serif和sans-serif字体之间的区别  在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读  CSS字型 在CSS中，有两种类型的字体系列名称：   通用字体系列 - 拥有相似外观的字体系统组合（如 'Serif' 或 'Monospace'） 	 特定字体系列 - 一个特定的字体系列

CSS Fonts(字体)

CSS 链接   不同的链接可以有不同的样式。   链接样式 链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。 特别的链接，可以有不同的样式，这取决于他们是什么状态。 这四个链接状态是：   a：link - 正常，未访问过的链接 	a：visited - 用户已访问过的链接 	a：hover - 当用户鼠标放在链接上时 	a：active - 链接被点击的那一刻     实例  [mycode3 type='css..

CSS 链接(link)

CSS 列表   CSS 列表属性作用如下：  设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像   列表 在 HTML中，有两种类型的列表：  无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等） 有序列表 ol - 列表项的标记有数字或字母  使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。  无序列表如下所示：        Coffee     Tea     Coca ..

CSS 列表

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

CSS Table(表格)

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

CSS 盒子模型

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

CSS Border(边框)

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

CSS 轮廓（outline）属性

CSS margin(外边距)   CSS margin(外边距)属性定义元素周围的空间。  margin  margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。   margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。  可能的值  	 		值 		说明 	 	 		auto 		设置浏览器边距。这样做的结果会依赖于浏览器 	 	 		length 		定义一个固定的marg..

CSS margin(外边距)

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

CSS padding（填充）

CSS 分组 和 嵌套 选择器  分组选择器 在样式表中有很多具有相同样式的元素。  [mycode3 type='css'] h1 { 	color：green; } h2 { 	color：green; } p { 	color：green; } [/mycode3] 为了尽量减少代码，你可以使用分组选择器。 每个选择器用逗号分隔。 在下面的例子中，我们对以上代码使用分组选择器：  实例  [mycode3 ty..

CSS 分组和嵌套

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

CSS 尺寸 (Dimension)

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

CSS Position(定位)    position 属性指定了元素的定位类型。 position 属性的五个值：  static relative fixed absolute sticky   元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。   static 定位 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 静态定..

CSS Position(定位)

CSS 布局 - Overflow  CSS overflow  属性用于控制内容溢出元素框时显示的方式。

CSS 布局 Overflow

CSS Float（浮动）

CSS 布局 - 水平 & 垂直对齐     水平 & 垂直居中对齐    元素居中对齐 要水平居中对齐一个元素(如 &lt;div&gt;), 可以使用 margin： auto;。  设置到元素的宽度将防止它溢出到容器的边缘。 元素通过指定宽度，并将两边的空外边距平均分配：     div 元素是居中的    实例  [mycode3 type='css'] .center {  ..

CSS 布局 – 水平 &amp; 垂直对齐

CSS 组合选择符   CSS 组合选择符   组合选择符说明了两个选择器之间的关系。  CSS组合选择符包括各种简单选择符的组合方式。  在 CSS3 中包含了四种组合方式：  后代选择器(以空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分隔) 	子元素选择器(以大于 &gt; 号分隔） 	相邻兄弟选择器（以加号 + 分隔） 	普通兄弟选择器（以波浪号 ～ 分隔）   ..

CSS 组合选择符

CSS 伪类(Pseudo-classes)   CSS伪类是用来添加一些选择器的特殊效果。   语法 伪类的语法：   selector：pseudo-class {property：value;}  CSS类也可以使用伪类：   selector.class：pseudo-class {property：value;}  anchor伪类 在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示   实例  [mycode3..

CSS 伪类

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

CSS 伪元素

CSS 导航栏  ul.horizontal {     list-style-type： none;     margin： 0;     padding： 0;     overflow： hidden;     background-color：

CSS 导航栏

CSS 下拉菜单

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

CSS 提示工具(Tooltip)

CSS 图片廊    .responsive .img {     border： 1px solid

CSS 图片廊

CSS 图像透明/不透明

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

CSS 图像拼合技术

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

CSS 媒体类型

CSS 属性 选择器  具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id。 注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。   属性选择器  下面的例子是把包含标题（title）的所有元素变为蓝色：   实例  [mycode3 type='css'] [title] { 	color：blue; } [/mycode3]  尝试..

CSS 属性选择器

CSS 表单  一个表单案例，我们使用 CSS 来渲染 HTML 的表单元素：   CSS 实例  [mycode3 type='css'] input[type=text], select {   width： 100%;   padding： 12px 20px;   margin： 8px 0;   display： inline-block;   border： 1px solid

CSS 表单

CSS 计数器  CSS 计数器通过一个变量来设置，根据规则递增变量。     使用计数器自动编号  CSS 计数器根据规则来递增变量。 CSS 计数器使用到以下几个属性：    counter-reset - 创建或者重置计数器 counter-increment - 递增变量 content - 插入生成的内容 counter() 或 counters() 函数 - 将计数器的值添加到元素    要使用 CSS 计数器，得先用 co..

CSS 计数器

CSS 网页布局  网页布局  网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。    头部区域  头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：   CSS3 实例  [mycode3 type='css'] .header {   background-color：

CSS 网页布局

CSS !important 规则 什么是 !important CSS 中的 !important 规则用于增加样式的权重。  !important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。  实例 [mycode3 type='css']

CSS !important 规则

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

CSS 总结

CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片（这个图片不会随页面的其余部分滚动） 声明背景属性 高级的背景例子 背景属性的解释 CSS文本 设置不同元素的文本颜色 文本对齐 移除链接下划线 装饰文字 控制文本中的字母 缩进文本 指定了字符之间的空间 指定了行与行之间的空间 设置元素的文本方向 增加单词之间..

CSS 实例

响应式 Web 设计 - Viewport   什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做“视区”。 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。   设置 Viewport一..

响应式 Web 设计 – Viewport

响应式 Web 设计 - 网格视图   什么是网格视图? 很多网页都是基于网格设计的，这说明网页是按列来布局的。  使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。   响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。  响应式网格视图  创建响应式网格视图接下来我们来创建一个响应式网格视图。 首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box..

响应式 Web 设计 – 网格视图

响应式 Web 设计 - 媒体查询   媒体(media)查询在 CSS3 上有介绍：CSS3 @media 查询。 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。   实例 如果浏览器窗口小于 500px, 背景将变为浅蓝色：  	@media only screen and (max-width： 500px) {&nbsp;&nbsp;&nbsp; body { 	&nbsp;&..

响应式 Web 设计 – 媒体查询

响应式 Web 设计 - 图片 [mystyle] .bg1 {     width： 100%;     height：400px;     background-image：url('/wp-content/uploads/2015/06/img_flowers.jpg');         background-repeat：no-repeat;     background-size：contain;    ..

响应式 Web 设计 – 图片

响应式 Web 设计 - 视频(Video)  使用 width 属性 如果 width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例：  实例  	video { &nbsp;&nbsp;&nbsp; width： 100%;&nbsp;&nbsp;&nbsp; height： auto; } 	尝试一下 »   注意在以上实例中，视频播放器根据屏幕大小自动调整比例，且可以..

响应式 Web 设计 – 视频(Video)

响应式 Web 设计 - 框架 本章节为大家介绍响应式 Web 设计框架 Bootstrap。 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。  实例  	&lt;!DOCTYPE html&gt;&lt;html lang='en'&gt;&l..

小白菜鸟教程 - 一个网络小白的小白菜鸟教程

share.png

CSS 语法

CSS 语法

CSS 语法

实例

CSS 实例

CSS 实例

实例

CSS 注释

实例