Learning Path
浏览 CSS 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
54
CSS 链接 不同的链接可以有不同的样式。 链接样式 链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。 特别的链接，可以有不同的样式，这取决于他们是什么状态。 这四个链接状态是： a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 实例 [mycode3 type='css..
CSS 列表 CSS 列表属性作用如下： 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在 HTML中，有两种类型的列表： 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等） 有序列表 ol - 列表项的标记有数字或字母 使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。 无序列表如下所示: Coffee Tea Coca ..
CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间。 margin margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。 margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。 可能的值 值 说明 auto 设置浏览器边距。这样做的结果会依赖于浏览器 length 定义一个固定的marg..
CSS 媒体类型 媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。 媒体类型 一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如， font-size 属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans-serif 字体比较适合在屏幕上阅读，而 ..
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-imag..
CSS 轮廓（outline） 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。 轮廓（outline）实例 在元素周围画线 本例演示使用outline属性在元素周围画一条线。 设置轮廓的样式 本例演示如何设置轮廓的样式。 设置轮廓的颜色 本例演示如何设置轮廓的颜色。 设置轮廓的宽度 本例演示如何设置轮廓的宽度。 ..
CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式。 #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 80%; height: 100px; overflow: scroll; border: 1px solid #ccc; } ..
CSS padding（填充） CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。 padding（填充） 当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。 单独使用 padding 属性可以改变上下左右的填充。 可能的值 值 说明 length 定义一个固定的填充(像素, pt, em,等) ..
CSS position: absolute 属性值 CSS position 属性 position: absolute 是 CSS 定位属性中最强大的值之一。绝对定位使元素脱离正常文档流，不再占据空间，然后相对于其最近的可定位祖先元素进行精确定位。 这是制作弹出框、下拉菜单、悬浮卡片等 UI 组件的核心技术。 单词释义：absolute 来自拉丁语 absolutus，意为'绝对的、无条件的'，表示位置完全独..
CSS position: fixed 属性值 CSS position 属性 position: fixed 是 CSS 定位属性中用于固定定位的值。使用固定定位的元素会脱离文档流，相对于浏览器视口（viewport）进行定位，不会随页面滚动而移动。 这是实现固定导航栏、返回顶部按钮、侧边栏广告等功能的核心技术。 单词释义：fixed 来自拉丁语 fixare，意为'固定、安装'，表示元素位置一旦确定就不再改变..
CSS position: relative 属性值 CSS position 属性 position: relative 是 CSS 定位属性中非常实用的一个值。相对定位允许元素相对于其在正常文档流中的原始位置进行偏移，同时保留其在文档流中的空间。 这意味着元素移动后，原来占据的位置仍然被保留，不会影响周围元素的布局。 单词释义：relative 来自拉丁语 relativus，意为'相对的、相关的'，表示位置..
CSS position: static 属性值 CSS position 属性 position: static 是 CSS 定位属性的默认值。当一个元素的 position 值设为 static 时，该元素会按照文档的正常布局流进行排列，不受 top、right、bottom、left 和 z-index 等定位属性的影响。 换句话说，static 就是不做任何特殊定位，元素该在哪就在哪。 单词释义：static 来自拉丁语 s..
CSS position: sticky 属性值 CSS position 属性 position: sticky 是 CSS 定位属性中相对较新的值。粘性定位是相对定位和固定定位的混合体：元素在跨越指定的阈值之前表现得像相对定位，之后表现得像固定定位。 这是实现'吸顶导航'、'表格标题固定'等效果的现代解决方案。 单词释义：sticky 意为'粘性的'，表示元素会..
CSS Position(定位) position 属性用于指定元素的定位方式。 常见的五种取值如下： 值 说明 锚点 static 默认值，元素按照正常文档流排列，不受 top/right/bottom/left 影响 查看示例 relative 相对自身原始位..
CSS 伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果。 语法 伪类的语法： selector:pseudo-class {property:value;} CSS类也可以使用伪类： selector.class:pseudo-class {property:value;} anchor伪类 在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示 实例 [mycode3..
CSS 伪元素 CSS 伪元素是一种特殊的选择器，它可以在不改变 HTML 结构的情况下对页面元素的特定部分进行样式设置。 CSS 伪元素是用来添加一些选择器的特殊效果。常用的 CSS 伪元素有 ::before、::after、::first-line、::first-letter 等。 语法 伪元素的语法： selector::pseudo-element { property: value; } CSS 类也可以使..
响应式 Web 设计 - 框架 本章节为大家介绍响应式 Web 设计框架 Bootstrap。 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 实例 <!DOCTYPE html><html lang='en'>&l..
响应式 Web 设计 - 网格视图 什么是网格视图? 很多网页都是基于网格设计的，这说明网页是按列来布局的。 使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。 响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。 响应式网格视图 创建响应式网格视图接下来我们来创建一个响应式网格视图。 首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box..
响应式 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 设计? 响应式 Web 设计让你的网页能在所有设备上有好显示。 响应式 Web 设计只使用 HTML 和 CSS。 响应式 Web 设计不是一个程序或 Javascript 脚本。 响应式 Web 设计是一种能够适应不同设备和屏幕尺寸的网站设计方法，它可以提供一致的用户体验，并确保网站内容在任何设备上都能够完整显示和易于使用。 设计最好的用户体验 响应式 Web 设计是一种用..
响应式 Web 设计 - 媒体查询 媒体(media)查询在 CSS3 上有介绍：CSS3 @media 查询。 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 实例 如果浏览器窗口小于 500px, 背景将变为浅蓝色： @media only screen and (max-width: 500px) { body { &..
响应式 Web 设计 - 视频(Video) 使用 width 属性 如果 width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例： 实例 video { width: 100%; height: auto; } 尝试一下 » 注意在以上实例中，视频播放器根据屏幕大小自动调整比例，且可以..
响应式 Web 设计 - Viewport 什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做“视区”。 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。 设置 Viewport一..
你已经学习了CSS,下一步学习什么呢? CSS 总结 本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。 你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。 同时，你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接。 如果需要更多关于 CSS 的信息，请参阅我们的 CSS 实例、 CSS 参..