CSS 一些常用方法的总结

CSS 指的是层叠样式表（Cascading StyleSheet），在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制，本文对 css 一些基本内容及常用功能进行一下总结，总结的内容主要是来自实验楼的 CSS 速成教程 ，这篇文章会实时更新，后续如果遇到什么好的有用功能，也会更新到这篇文章中。

css 基础语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector { declaration1; declaration2; ... declarationN;}

选择器通常是需要改变的 HTML 元素，每条声明都由一个属性和一个值组成，每个属性都有一个值，属性和值被冒号分开。

h1{ color:red; font-size:14px;}

css 基本样式

介绍 css 的一些基本样式，这些都是 css 中一些常用的设置。

背景

css 是允许使用纯色作为背景，也允许使用背景图像实现一些相当复杂的效果。

属性	描述
background-attachment	背景图像是否固定或者随着页面的其余部分滚动
background-color	设置元素的背景颜色
background-image	把图片设置为背景
background-position	设置背景图片的起始位置
background-repeat	设置背景图片是否及如何重复，其中， no-repeat ：表示不能重复， repeat ：可重复（默认值）， repeat-x ：表示 x 轴重复， repeat-y ：表示 y 轴重
background-size	规定背景图片的尺寸
background-origin	规定背景图片的定位区域
background-clip	规定背景的绘制区域

举个例子，如下所示

body{ background-color: red; background-image: url('hha.jpg'); background-repeat: no-repeat; background-position: center top; background-attachment: fixed; background-size：100px 100px;}p{ width: 150px; padding: 10px; background-color: #0014ff;}

html> head> metacharset='UTF-8'> title>title> linkrel='stylesheet'href='style.css'type='text/css'> head> body> p>matt's blogp> body>html>

效果如下下图所示：

文本

css 文本可定义文本的外观，通过文本的属性，可以改变文本的颜色、字符间距、对齐方式等等。

属性	描述
color	文本颜色
direction	文本方向
line-height	行高
letter-spacing	字符间距
text-align	对齐元素中的文本，可选择 left、right 和 center
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-transform	元素中的字母
unicode-bidi	设置文本方向
white-space	元素中空白的处理方式
word-spacing	字间距

应用时，可以进行以下设置

body{ color: red; text-align: center;}p {text-indent: 5em;}

在网页展现时，标签 body 和 p 中元素就会按照设置进行显示。

链接

在 css 的链接属性中，可以对其颜色、字体、背景进行相应的设置，不同的状态我们可以设置对应的样式。

4种链接状态

css 共有以下几种链接状态：

1. a:link ：普通的、未被访问的链接；
2. a:visited ：用户已访问的链接；
3. a:hover ：鼠标指针位于链接的上方；
4. a:active ：链接被点击的时刻。

在进行设置中，有以下两种要求：

• a:hover 必须位于 a:link 和 a:visited 之后；
• a:active 必须位于 a:hover 之后。

修改链接下划线

只需要在链接属性中添加 text-decoration 属性，将对应的值设置为空即可。

a:link{ background-color:#B2FF99; text-decoration:none;}a:visited {background-color:#FFFF85;}a:hover {background-color:#FF704D;}a:active {background-color:#FF704D;}

列表

在 html 中学习过列表的一些设置，这里主要讲述的是如何通过 css 进行列表的设置。

简单的列表类型

列表有无序、有序之分，无序列表又可以用不同的标记来区分，而 list-style-type 这个属性我们就可以用来控制标记类型。

/* html 中添加以下内容 */ulclass='circle'> li>hahali> li>wawali>ul>olclass='square'> li>hahali> li>wawali>ol>/* css 中的设置 */ul.circle {list-style-type:circle}ol.square {list-style-type:upper-roman}}

列表项图片

在无序列表中，除了进行一些默认的设置外，并没有其他可选的内容，但是 css 可以提供图片来作为标记。

ul.img1{list-style-image:url('1.ico')}

表格

在 css 表格的设置中，需要先了解一下属性：

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

这里也以一个例子来说明：

/* html 部分 */tableid='tb'> tr> th>nameth> th>ageth> th>numberth> tr> tr> td>litd> td>3td> td>4td> tr> trclass='tr2'> td>litd> td>3td> td>4td> tr> tr> td>litd> td>3td> td>4td> tr> trclass='tr2'> td>litd> td>3td> td>4td> tr>table>

/* css 部分*/#tb td,th{ border: 1px solid green; padding: 5px;}#tb{ border-collapse: collapse; width: 500px; text-align: center;}#tb th{ text-align: center; color: black; background-color: lightseagreen;}#tb tr.tr2 td{ color: black; background-color: #B2FF99;}

显示效果如下图

轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。涉及到的属性有：

属性	描述
outline	在一个声明中设置所有的轮廓属性。
outline-color	设置轮廓的颜色.
outline-style	设置轮廓的样式。
outline-width	设置轮廓的宽度。

/* html 部分 */<>'p1'>matt's blog

This is mtt's blog.>/* css 部分 */#p1{ outline-color: #FF704D; outline-style: groove; outline-width: 10px;}#p2{ outline-style: dotted; outline-color: green; outline-width: 5px;}

显示效果如下图所示：

css 选择器

选择器是 css 中最常用的组件，本节就介绍一下 css 中最常见的几种选择器。

元素选择器

最常见的选择器就是元素选择器，文档的元素的就是最基本的选择器。比如 h1 、 a 等，在 css 中可以这样实现：

/*第一种，直接对某个元素进行相应的设置*/h1{ color: cadetblue; }/*第二种，对多个元素执行同样的操作*/h1,h2,h3,h4{ color: cadetblue;}/*第三种，对没有特别特定元素设置的元素都执行同样的操作（除 h4外，其他执行的操作都一样）*/*{ color: cadetblue;}h4{ color: darkslategray;}

类选择器

类选择器允许以一种独立与文档元素的方式来制定样式。 .class{} 这是类选择器的标志，点后面是属性名，大括号里面就是具体的设置，如：

/*第一种，最简单的使用方法*//* 调用方式：

matt

*/.div{ color: cadetblue;}/*第二种，将类选择器结合元素选择器来使用，下面的例子这个 .div 就只会对 h1 起作用*//* 调用方式：

matt

*/h1.div{ color: cadetblue;}/*第三种，多类选择器（.class.class{}），它可以继承多个类的作用*//* 调用方式：

shiyanlou is my home

*/.p1{ color: cadetblue;}.p2{ font-size: 20px;}.p1.p2{ font-style: italic;}

id 选择器

id 选择器类似于类选择器，id 选择器的引入是用 # ，就和类选择器的 . 是一样的效果，它与类选择器的区别是：

• id 顾名思义只能在文档中使用一次，而类可以使用多次；
• id 选择器不能像刚才类选择器一样结合使用。

/* html 中的用法 */

'div'>matt's blog

/* css 中的配置*/#div{ color: cadetblue;}

属性选择器

对带有指定属性的 HTML 元素设置样式。

/* 第一种，对带有 title 属性的所有元素设置样式 */[title] {color:red;}/* 第二种，为 title='te' 的所有元素设置样式 */[title=te]{ color: red;}/* 第三种，为 href='http://' 的标签 a 设置元素样式 *//* 调用方式：matt's blog */a[href='http://']{ color: cornflowerblue;}

其他选择器

其他的还有：

• 后代选择器
• 子元素选择器
• 相邻兄弟选择器

下面仅列出一种后代选择器

/* html */

This is strong>mystrong> blog.

/* css */p strong{ color: cadetblue;}

css 盒子模型

css 的盒子模型主要适用于网页的布局。

盒子模型概述

盒子的组成包括：

• margin(外边距)：边框以外就是外边距，默认外边距是透明的（可以为负）；
• border(边框)：内边距的边缘就是边框；
• padding(内边距)：直接包围内容的部分，它呈现了元素的背景；
• content(内容)：正文框的最内部分就是实际的内容.

其中，内边距、边框和外边距都是可选的，默认值是0。下面用一张简单的图来描述它们的结构

内边距

内边据在正文（content）外、边框（border）内，控制该区域最简单的属性是 padding 属性

• padding 属性接受长度值或百分比值，但不允许使用负值；
• 也可以进行统一的内边距设置，也可以进行单边的内边距设置。
• 设置某一边的边据时，可以通过以下四个属性： padding-top 、 padding-right 、 padding-bottom 、 padding-left .

举个栗子

/* html 部分 */tableborder='1'> tr> td> h1>正文h1> td> tr>table>/* css 部分 */h1 { padding-left: 5cm; padding-right: 5cm; padding-top: 30px; padding-bottom: 30px;}

边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

• 边框的宽度可以通过这几个参数来设置： border-top-width 、 border-right-width 、 border-bottom-width 、 border-left-width ；
• 同样可以使用属性控制各个边框的颜色： border-top-color 、 border-right-color 、 border-bottom-color 、 border-left-color 。

外边距

外边距就是围绕在内容框的区域，也可以使用任何长度的单位、百分数来进行设置。

• 宽度的设置： margin-top 、 margin-right 、 margin-bottom 、 margin-left ；
• margin 的默认值是 0;
• 在宽度设置时，可以借助于对称复制；

/* html 部分 */divclass='wb'> divclass='bk'> divclass='nj'> divclass='zw'> matt's blog div> div> div>div>/* css 部分 */.wb{ margin: 100px;}.bk{ border-style: groove;}.nj{ padding: 10px;}.zw{ background-color: cornflowerblue;}

css 一些高级用法

这里是 css 中一些高级的常见用法

定位

定位，就是定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

在 css 中，有三种基本的定位机制：

1. 普通流：在位置顺序决定排版顺序；
2. 浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止；
3. 绝对定位：绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

定位有以下几个属性:

• position：将元素放在一个静态的，相对的，绝对的或固定的位置；
• 通过对 top、left、right、bottom 这四个属性的赋值让元素向对应的方向偏移；
• overflow：设置元素溢出其区域发生的事情；
• clip：设置元素的显示形状，多用于图片；
• vertical-align：设置元素的垂直对其方式；
• z-index：设置元素的堆叠顺序。

position 属性，有以下四种设置：

1. relative：就是普通流；
2. absolute：这个就是绝对定位，该元素区域会与文档区域重合，因为它使用该元素与文档流无关；
3. fixed：将元素固定下来,就算滚动屏幕,它也会在同一个地方不会动；
4. static：设置以后,偏移量什么的就没用了。

.position1{ width: 100px; height: 100px; background-color: cornflowerblue; position: relative; left: 60px;}

浮动

这里涉及到的属性就是 float ，其值可以赋值为：

• left: 元素向左浮动；
• right: 元素向右浮动；
• none: 不浮动；
• inherit: 从父级继承浮动的属性；
• clear: 主要用于去掉向各方向的浮动属性(包括继承来的属性)。

/* html 部分 */<>'qd'>>

/* css 部分 */.qd{ width: 100px; height: 100px; background-color: lightskyblue; float: left;}.wd{ width: 100px; height: 100px; background-color: lightseagreen; float: left;}.ed{ width: 100px; height: 100px; background-color: lightsalmon; float: right;}

效果如下图所示：

尺寸

尺寸属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。涉及到的属性有：

• height– 设置元素的高度。
• line-height –设置行高。
• max-height– 设置元素的最大高度。
• max-width –设置元素的最大宽度。
• min-height –设置元素的最小高度。
• min-width –设置元素的最小宽度。

• width –设置元素的宽度。

  举例说明

  .p1{ line-height: normal; width: 400px;}.p2{ line-height: 50%; width: 400px;}.p3{ line-height: 200%; width: 400px;}

导航栏

这里通过一个示例来实现导航栏的功能。

/* html 部分 */ul> li>ahref='http://'>blog1a>li> li>ahref='http://'>blog2a>li> li>ahref='http://'>blog3a>li> li>ahref='http://'>blog4a>li>ul>/* css 部分 */ul{ list-style: none;}li{ float:left;}a:link,a:visited{ text-decoration: none; background-color: lightgray; display: block; width: 100px; margin:5px 10px;}a:active,a:hover{ background-color: cadetblue;}

显示效果如下：

图片

插入一张图片，加上一句描述符，使用 div 继承

/* html 部分 */<>'image'> <>'./hha.jpg'target='_self'> <>'hha.jpg'width='150px'height='150px'> <>'text'>haha

/* css 部分 */.image{ border: 2px solid darkgrey; width: auto; height: auto; float: left; text-align: center; padding: 5px;}img{ padding: 5px;}.text{ font-size: 20px; margin-bottom: 5px;}

显示效果如下：

然后可以通过 opacity 属性来设置透明度，属性值的范围为0-1，0是完全透明，1是完全不透明。

到这里，css 基本内容已经总结完了，不过本文后续会一直更新，遇到什么常用的设置，都会更新到本文中。