Learning Path
浏览 CSS 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
54
CSS 教程 CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。 通过使用 CSS 我们可以大大提升网页开发的工作效率！ 在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。 CSS3 现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发..
CSS 布局 - 水平 & 垂直对齐 水平 & 垂直居中对齐 元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。 设置到元素的宽度将防止它溢出到容器的边缘。 元素通过指定宽度，并将两边的空外边距平均分配： div 元素是居中的 实例 [mycode3 type='css'] .center { ..
CSS 属性 选择器 CSS 属性选择器用于根据元素的属性或属性值来选择 HTML 元素。属性选择器可以帮助你在不需要为元素添加类或 ID 的情况下对其进行样式化。 注意：IE7 和 IE8 需声明 !DOCTYPE 才支持属性选择器！IE6 和更低的版本不支持属性选择器。 以下是常见的 CSS 属性选择器： 1、[attribute] 选择带有指定属性的所有元素（无论属性值是什么）。 /* 选择所有具有 `type` 属性..
CSS 背景 CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果: background-color background-image background-repeat background-attachment background-position 背景颜色 background-color 属性定义了元素的背景颜色. 页面的背景颜色使用在body的选择器中: 实例 body {bac..
CSS 边框 CSS 边框（Border）是用于定义元素边框样式的属性。边框可以应用于任何 HTML 元素，用于增强视觉效果、分隔内容或突出显示元素。CSS 边框属性主要包括边框宽度、边框样式、边框颜色以及简写属性。 CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色。 在四边都有边框 红色底部边框 圆角边框 左侧边框带宽度，颜色为蓝色 边框样式 边框样式属性指定要显示什么样的边界。..
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距) - 清除边框外的区域，外边距是透..
CSS 组合选择符 CSS 组合选择符 组合选择符说明了两个选择器之间的关系。 CSS组合选择符包括各种简单选择符的组合方式。 在 CSS3 中包含了四种组合方式: 后代选择器(以空格 分隔) 子元素选择器(以大于 > 号分隔） 相邻兄弟选择器（以加号 + 分隔） 普通兄弟选择器（以波浪号 ～ 分隔） ..
CSS 计数器 CSS 计数器通过一个变量来设置，根据规则递增变量。 使用计数器自动编号 CSS 计数器根据规则来递增变量。 CSS 计数器使用到以下几个属性： counter-reset - 创建或者重置计数器 counter-increment - 递增变量 content - 插入生成的内容 counter() 或 counters() 函数 - 将计数器的值添加到元素 要使用 CSS 计数器，得先用 co..
CSS 尺寸 (Dimension) CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。 更多实例 设置元素的高度 这个例子演示了如何设置不同元素的高度。 使用百分比设置图像的高度 这个例子演示了如何使用百分比值设置元素的高度。 使用像素值来设置元素的宽度 本例演示如何使用像素值来设置元素的宽度。 设置元素的最大高度 此示例演示如何设置元素的最大高度。 使用百分比来设置元素的最大宽..
[mystyle] .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:0px; } [/m..
[mystyle] .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .d..
CSS 编辑器 可以使用专业的 CSS 编辑器来编辑 CSS，为大家推荐几款常用的编辑器： .tool-item{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; b..
CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片（这个图片不会随页面的其余部分滚动） 声明背景属性 高级的背景例子 背景属性的解释 CSS文本 设置不同元素的文本颜色 文本对齐 移除链接下划线 装饰文字 控制文本中的字母 缩进文本 指定了字符之间的空间 指定了行与行之间的空间 设置元素的文本方向 增加单词之间..
[myjavascript] function removeElement(numId) { document.getElementById(numId).style.display='none'; } [/myjavascript] [mystyle] .imgbox { float:left; text-align:center; width:120px; height:120px; border:1px so..
CSS 字体 CSS字体属性定义字体，加粗，大小，文字样式。 serif和sans-serif字体之间的区别 在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读 CSS字型 在CSS中，有两种类型的字体系列名称： 通用字体系列 - 拥有相似外观的字体系统组合（如 'Serif' 或 'Monospace'） 特定字体系列 - 一个特定的字体系列（如 ..
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 #ccc; borde..
CSS 分组 和 嵌套 选择器 分组选择器 在样式表中有很多具有相同样式的元素。 [mycode3 type='css'] h1 { color:green; } h2 { color:green; } p { color:green; } [/mycode3] 为了尽量减少代码，你可以使用分组选择器。 每个选择器用逗号分隔。 在下面的例子中，我们对以上代码使用分组选择器： 实例 [mycode3 ty..
CSS 创建 当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。 如何插入样式表 插入样式表的方法有三种: 外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style) 外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 &a..
CSS id 和 class id 和 class 选择器 如果你要在HTML元素中设置CSS样式，你需要在元素中设置'id' 和 'class'选择器。 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 '#' 来定义。 以下的样式规则应用于元素属性 id=..
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; ..
CSS 图像拼合技术 图像拼合 图像拼合就是单个图像的集合。 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。 使用图像拼合会降低服务器的请求数量，并节省带宽。 图像拼合 - 简单实例 与其使用三个独立的图像，不如我们使用这种单个图像（'img_navsprites.gif'）： 有了CSS，我们可以只显示我们需要的图像的一部分。 在下面的例子CSS指定显示 'img_navspri..
[mystyle] #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 { width: 500..
CSS !important 规则 什么是 !important CSS 中的 !important 规则用于增加样式的权重。 !important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。 实例 [mycode3 type='css'] #myid { background-color: blue; } .myclass { backg..
CSS 简介 你需要具备的知识 在继续学习之前，你需要对下面的知识有基本的了解： HTML / XHTML 如果你希望首先学习这些项目，请在 首页 访问相关教程。 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存..