CSS Page 分页

通过使用 CSS 来创建分页。如果网站有很多个页面,就需要使用分页来为每个页面做导航。使用 HTML 和 CSS 来创建分页。如果点击当前页,可以使用 .active 来设置当前页样式,鼠标悬停可以使用 hover 选择器来修改样式。使用 border-radius 属性为选中的页码来添加圆角样式。通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果。可以使用 border 属性来添加带边框分页。可以使用 margin 属性来为每个页码直接添加空格。

CSS Column 多列

CSS3 可以将文本内容设计成像报纸一样的多列布局。column-count 属性指定了需要分割的列数。column-width 属性指定了列的宽度。column-gap 属性指定了列与列间的间隙。column-rule 属性指定了列与列间的边框样式。column-rule 属性是 column-rule- 所有属性的简写。column-span 属性指定元素要跨越多少列。

CSS Counter 计数器

CSS 计数器通过一个变量来设置,根据规则递增变量。counter() 或 counters() 函数 - 将计数器的值添加到元素。要使用 CSS 计数器,得先用 counter-reset 创建或重置一个或多个计数器。counter-reset 属性通常是和 counter-increment 属性,content 属性一起使用。counter-increment 属性递增一个或多个计数器值。counter-increment 属性通常用于 counter-reset 属性和 content 属性。

CSS Tooltip 提示工具

使用 HTML 与 CSS 来创建提示工具,提示工具在鼠标移动到指定元素后触发。提示框在鼠标移动到指定元素上显示。可以用 CSS 伪元素 after 及 content 属性为提示工具创建一个小箭头标志,箭头是由边框组成的,但组合起来后提示工具像个语音信息框。

CSS Dropdown 下拉菜单

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。当鼠标移动到指定元素上时,会出现下拉菜单。创建下拉菜单,并允许用户选取列表中的某一项。如果想设置右浮动的下拉菜单内容方向是从右到左,而不是从左到右,可以添加代码 right 0;。

CSS Navigation 导航栏

熟练使用导航栏,对于任何网站都非常重要。使用 CSS 可以转换成好看的导航栏而不是枯燥的 HTML 菜单。作为标准的 HTML 基础一个导航栏是必须的。导航条基本上是一个链接列表,所以使用 ul 和 li 元素非常有意义。

CSS Button 按钮

使用 CSS 来制作按钮。可以使用 background-color 属性来设置按钮颜色。可以使用 background-color 属性来设置按钮颜色。可以使用 font-size 属性来设置按钮大小。可以使用 border-radius 属性来设置圆角按钮。可以使用 hover 选择器来修改鼠标悬停在按钮上的样式。可以使用 transition-duration 属性来设置 "hover" 效果的速度。可以使用 box-shadow 属性来为按钮添加阴影。可以使用 opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果)。可以添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片。

CSS Form 表单

使用 CSS 来渲染 HTML 的表单元素。使用 width 属性来设置输入框的宽度。使用 padding 属性可以在输入框中添加内边距。使用 border 属性可以修改 input 边框的大小或颜色,使用 border-radius 属性可以给 input 添加圆角。如果只想添加底部边框可以使用 border-bottom 属性。可以使用 background-color 属性来设置输入框的背景颜色,color 属性用于修改文本颜色。默认情况下,一些浏览器在输入框获取焦点时(点击输入框)会有一个蓝色轮廓。可以设置 input 样式为 outline none 来忽略该效果。使用 focus 选择器可以设置输入框在获取焦点时的样式。

CSS List 列表

CSS 列表属性作用如下,设置不同的列表项标记为有序列表。设置不同的列表项标记为无序列表。设置列表项标记为图像。list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。list-style-image 将图像设置为列表项标志。list-style-position 设置列表中列表项标志的位置。list-style-type 设置列表项标志的类型。

CSS Table 表格

使用 CSS 可以使 HTML 表格更美观。border 简写属性。用于把所有用于表格的属性设置于一个声明中。border-width 指定表格边框的宽度。border-style 指定表格边框的样式。border-color 指定表格边框的颜色。

CSS Image 图像

使用 CSS 很容易创建透明的图像。CSS Opacity 属性是 W3C 的 CSS3 建议的一部分。图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量,并节省带宽。

CSS Link 链接

不同的链接可以有不同的样式。链接的样式,可以用任何 CSS 属性(如颜色,字体,背景等)。特别的链接,可以有不同的样式,这取决于他们是什么状态。这四个链接状态是,a link 正常,未访问过的链接。a visited 用户已访问过的链接。a hover 当用户鼠标放在链接上时。a active 链接被点击的那一刻。

CSS Text 文本格式

color 设置文本颜色。direction 设置文本方向。letter-spacing 设置字符间距。line-height 设置行高。text-align 对齐元素中的文本。text-decoration 向文本添加修饰。text-indent 缩进元素中文本的首行。text-shadow 设置文本阴影。text-transform 控制元素中的字母。unicode-bidi 设置或返回文本是否被重写。vertical-align 设置元素的垂直对齐。white-space 设置元素中空白的处理方式。word-spacing 设置字间距。

CSS Font 字体

CSS 字体属性定义字体,加粗,大小,文字样式。在CSS中,有两种类型的字体系列名称,通用字体系列 - 拥有相似外观的字体系统组合(如 "Serif" 或 "Monospace")。特定字体系列 - 一个特定的字体系列(如 "Times" 或 "Courier")。font-size 和 font-family 的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话。font-family 属性应该设置几个字体名称作为一种 "后备" 机制,如果浏览器不支持第一种字体,他将尝试下一种字体。

CSS Background 背景

CSS 背景属性用于定义 HTML 元素的背景。background 简写属性,作用是将背景属性设置在一个声明中。background-attachment 背景图像是否固定或者随着页面的其余部分滚动。background-color 设置元素的背景颜色。background-image 把图像设置为背景。background-position 设置背景图像的起始位置。background-repeat 设置背景图像是否及如何重复。