本文详细介绍了CSS的创建过程、基本语法，包括选择器、属性设置，以及在XML文档中的应用。涵盖了类型选择器、类选择器、ID选择器，还重点讲解了字体、文本、背景、浮动、垂直和水平方向的元素排列方式等内容。
CSS(Cascading Style Sheet,层叠样式表或级联样式表)是一种样式控制语言，其基本思想是为结构文档中的各个标记定义相应的一组显示样式。CSS最初是为了弥补HTML的不足而产生的。后来又应用于XML上，用于格式化XML数据内容。CSS不仅可以静态地修饰网页还可以配合各种脚本语言动态地对网页中的各元素进行格式化。
一、CSS的创建和应用
CSS 的创建与应用主要包含以下几个步骤。
（1）建立XML文档。
（2）创建样式表文件。
（3）链接样式表文件到XML文档中。<?xml-stylesheet type=“text/css” href=“product.css”?>
（4）在浏览器中浏览XML文档的显示效果。
二、CSS基本语法
定义样式
CSS规则集由选择器和声明块声明，基本格式如下：
选择器
{
属性1：属性值1；
属性2：属性值2；
……
属性n：属性值n；
}
选择器用来指定该规则所适用的元素，可以由一个或多个元素名或特定的标识构成；用花括号“{ }”括起来的若干属性名与对应的属性值，每一条声明都包含一个属性名和相应的属性值，用冒号分割，用来对选择器所指定的元素设置具体的显示样式。
定义CSS需要掌握两个语法：
（1）如何定义选择器
（2）CSS支持哪些样式属性，每个样式属性支持哪些值。
三、对XML文档有效的CSS选择符
1、类型选择器（Type Selecter）
类型选择器直接以元素、对象的名称作为选择符，这是常见的选择符。例如product.css的样式定义
ProductName{
font-family:Arial;
font-color:20pt;
}
2、类选择器（Class Selector）
类选择器选择所有class属性值等于className的元素，语法结构如下：
.className{property:value}
示例如下所示。
.authorname{color:blue;}
若在xml文档的元素中设置其class属性为authorname，就可以设置字体颜色为蓝色，如下所示。
<author class=“authorname”>LIPING</author>
3、ID选择器（ID Selector）
ID选择器和类选择器的区别就是将.改为#，语法结构如下。
#idName{property：value；}
示例如下所示。
.authorname{color:blue;}
若在xml文档的元素中设置其id属性为authorname，就可以设置字体颜色为蓝色，如下所示。
<author id=“authorname”>LIPING</author>
注意：
1、类选择器
（1）使用.开头表示类选择器
（2）在需要修改的标签中，使用class=“类名”的格式
（3）一个类可以被多个标签使用，一个标签也可以使用 多个类。
（4）尽量避免使用纯数字，中文，标签名…对类进行命名
2、id选择器
（1）使用#开头表示id选择器
（2）id选择器中的值和需要修改的标签中的id相同
4、其他选择方式
如果想把一组属性用于多个元素，可以用逗号将选择符中的所有元素隔开。如teacher和student这两个元素都要设为10像素的页边距。于是，可以将这两个规则按如下方式组合。
teacher, student{
display：block：
margin：10px；
}
四、CSS的常用属性
1、字体（font）属性
| 标签 | 含义 |
| font-family | 设置字体格式 |
| font-size | 设置字体大小 |
| font-weight | 设置字体粗细 |
| font-style | 设置字体样式 |
| color | 设置字体颜色 |
（1）设置字体格式：
字体名称可以使用中文，但不推荐；
多个字体之间使用逗号分割；
字体中有空格，需要使用双引号括起来。
（2）设置字体粗细：
font-weight：bold；表示加粗
font-weight：normal；默认值
font-weight：100；也可以取100~900之间的数值
（3）设置字体样式：
font-style：italic；设置为倾斜的格式
font-style：normal；设置为正常的格式
（4）设置字体颜色：
color的写法可以分为3种：
直接输入对应颜色的单词，如pink，green，red等
使用rgb（*，*，*）；*表示0~255之间的数字
使用16进制的方式表示，如#fab
（5）设置字体大小
| 相对长度单位 | 说明 |
| em | 相对于当前对象内文本的字体尺寸 |
| px | 像素，最常用，推荐使用 |
| 绝对长度单位 | 说明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
2、文本属性
| 标签 | 含义 |
| text-align | 设置文本对齐方式 |
| text-index | 设置文本缩进 |
| text-decoration | 设置文本装饰方式 |
| text-transform | 设置文本的字母显示方式 |
| line-height | 设置文本行高 |
| vertical-align | 设置文本垂直对齐方式 |
（1）设置文本对齐方式：
text-align：left；水平靠左对齐。
text-align：center；水平居中对齐。
text-align：right；水平靠右对齐。
text-align：justify；文本两顿对齐（一般用于英文）
（2）设置文本缩进：
单位是像素（px）或磅（pt）；
缩进的值为负数，表示向左缩进；
缩进的值为正数，表示向右缩进。
（3）设置文本装饰方式：
underline（下划线）、none（没有装饰）、overline（加上划线）、line-through（删除线）、blink（使文本闪烁）
（4）设置文本的字母显示方式：
text-transform：uppercase；文本中的字母全部大写。
text-transform：lowercase；文本中的字母全部小写。
text-transform：capitalize；首字母大写。
（5）设置文本垂直对齐方式
baseline（）、sub（）、super（）、top（）、text-top（）、middle（）、bottom（）或text-bottom（）
3、背景属性
| 标签 | 含义 |
| background-color | 设置背景颜色 |
| background-image | 设置背景图片 |
| background-repeat | 设置背景平铺 |
| background-position | 设置背景位置 |
| background-size | 设置背景尺寸 |
（1）设置背景颜色：
background-color的写法可以分为3种：
直接输入对应颜色的单词，如pink，green，red等
使用rgb（*，*，*）；*表示0~255之间的数字
使用16进制的方式表示，如#fab
（2）设置背景图片：
background-image：url(“./dog.png”);
url中的路径可以是绝对路径，也可以是相对路径。
（3）设置背景平铺：
repeat：平铺（默认就是平铺方式）
no-repeat：不平铺
repeat-x：水平平铺
repeat-y：垂直平铺
（4）设置背景位置：
背景位置用于修改背景图片的位置
参数有三种风格
1）方位名词：
（top left，top center，top right）
（center left，center center，center right）
（bottom left，bottom center，bottom right）
注意，如果仅规定了一个关键词，另一个值将是center
2）精确单位：
（x%y%）
第一个是水平位置，第二个是垂直位置
左上角是0%0%，右上角是100%100%
注意，如果仅规定了一个关键词，另一个值将是50%
3）混合单词：
（xpos ypos）
第一个值是水平位置，第二个值是垂直位置
左上角是0 0
注意，如果仅规定了一个关键字，另一个值将是50%
可以混合使用%和position的值
（5）设置背景尺寸
具体的数值：例如40px 60px表示宽度为40px，高度为60px；
百分比：根据父元素的尺寸进行百分比设置；
cover：将背景图扩展至足够大, 以使背景图像完全覆盖背景区域. 某些图像的部分区域可能无法显示在背景定位区域中；
contain：将图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
4、设置文本的显示方式
| 标签 | 含义 |
| block | 以块显示方式 |
| in-line | 以行显示方式 |
| list-item | 以列表的显示方式 |
| none | 不显示元素内容 |
文本的显示方式是指文本在浏览器中以何种方式显示，可通过display属性设置。
（1）设置块（block）显示方式：
可以通过position、width和height属性设置块的位置和大小。
position：absolute/relative/static；其中默认为static
（2）设置列表显示：
在列表显示方式中，可以通过list-style-type属性来指定项目符号的外观，可取的值有disc（圆盘）、circle（圆圈）、square（方块）、decimal（十进制数）、lower-roman（小写的罗马数字）、upper-roman（大写的罗马数字）、lower-alpha（小写英文字母）和upper-alpha（大写英文字母）
5、边距和填充
margin（外边距）：控制盒子与盒子之间的距离。
margin: 5px(表示四个方向外边距都是 5px)
margin: 5px 10px(表示上下外边距 5px, 左右外边距 10px)
margin: 5px 10px 20px(表示上外边距 5px, 左右外边距 10px, 下外边距 20px)
margin: 5px 10px 20px 30px(表示上外边距 5px, 右外边距 10px, 下外边距 20px, 左外边距 30px)
padding（内边距）：设置边框和内容之间的距离。
padding: 5px(表示四个方向内边距都是 5px)
padding: 5px 10px(表示上下内边距 5px, 左右内边距 10px)
padding: 5px 10px 20px(表示上内边距 5px, 左右内边距 10px, 下内边距 20px)
padding: 5px 10px 20px 30px(表示 上内边距 5px, 右内边距 10px, 下内边距 20px, 左内边距 30px)
content（内容）
6、设置鼠标cursor属性
| 属性值 | 示意图 | 描述 |
| auto | 默认值，由浏览器根据当前上下文确定要显示的光标样式 | |
| default | 默认光标，不考虑上下文，通常是一个箭头 | |
| none | 不显示光标 | |
| initial | 将此属性设置为其默认值 | |
| inherit | 从父元素基础 cursor 属性的值 | |
| context-menu | 表示上下文菜单可用 | |
| help | 表示有帮助 | |
| pointer | 表示一个链接 | |
| progress | 进度指示器，表示程序正在执行一些处理，但是您仍然可以在该界面进行一些操作（与 wait 不同） | |
| wait | 表示程序繁忙，您应该等待程序指向完成 | |
| cell | 表示可以选择一个单元格（或一组单元格） | |
| crosshair | 一个简单的十字准线 | |
| text | 表示可以选择的文本 | |
| vertical-text | 表示可以选择的垂直文本 | |
| alias | 表示要创建别名或快捷方式 | |
| copy | 表示可以复制某些内容 | |
| move | 表示可以移动鼠标下方的对象 | |
| no-drop | 表示所拖动的项目不能放置在当前位置 | |
| not-allowed | 表示无法完成某事 | |
| all-scroll | 表示对象可以沿任何方向滚动（平移） | |
| col-resize | 表示可以水平调整列的大小 | |
| row-resize | 表示可以垂直调整行的大小 | |
| n-resize | 表示对象的边缘可以向上（向北）移动 | |
| e-resize | 表示对象的边缘可以向右（向东）移动 | |
| s-resize | 表示对象的边缘可以向下（向南）移动 | |
| w-resize | 表示对象的边缘可以向左（向西）移动 | |
| ne-resize | 表示对象的边缘可以向上和向右（北/东）移动 | |
| nw-resize | 表示对象的边缘可以向上和向左（北/西）移动 | |
| se-resize | 表示对象的边缘可以向下和向右（向南/向东）移动 | |
| sw-resize | 表示对象的边缘可以向下和向左（南/西）移动 | |
| ew-resize | 表示可以双向调整对象大小的光标 | |
| ns-resize | ||
| nesw-resize | ||
| nwse-resize | ||
| zoom-in | 表示可以放大某些内容 | |
| zoom-out | 表示可以缩小某些内容 | |
| grab | 表示可以抓取（拖动）某些东西 | |
| grabbing | 表示已经抓取到某些东西 | |
| url("") | 自定义光标的样式，括号中的内容为光标图像的源文件路径 |
7、border（边框）属性
border-radius：设置圆角矩形
（1）基本用法
<style>
div {
width: 400px;
height: 200px;
border: 2px solid palegreen;
border-radius: 200px;
}
</style>
（2）生成圆形：
<style>
div {
width: 400px;
height: 400px;
border: 2px solid palegreen;
border-radius: 200px;
}
</style>
width和height大小相等变为正方形，设置border-radius为正方形宽度的一半就是一个圆形。
（3）展示写法：
<style>
div {
width: 400px;
height: 400px;
border: 2px solid palegreen;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
border-bottom-left-radius: 200px;
border-bottom-right-radius: 200px;
}
</style>
border - radius 是一个复合写法, 也可以分别对4个角进行设置
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
8、float属性设置浮动
border-bottom-left-radius 左下角
1、浮动的设置：css属性float：left/right/none 左浮动/右浮动/不浮动（默认）
2、浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘
3、浮动的影响：对附近的元素布局造成改变，使得布局混乱
因为浮动元素脱离了普通流，会出现一种高度坍塌的现象：原来的父容器高度是内部元素撑开的，但是当内部元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌，变为高度0px。
9、设置垂直方向上的元素排列方式
align-items：stretch;（默认值，行拉伸以占据剩余空间）
align-items：center；（垂直居中）
align-items：flex-start；（近端对齐）
align-items：flex-end；（低端对齐）
10、设置水平方向上的元素排列方式
justify-content：flex-start；（默认值，左对齐）
justify-content：flex-end；（右对齐）
justify-content：center（位于容器中间）
justify-content：space-between（横向分布，但分布和结尾 没有额外空间）
justify-content：space-around（横向分布，但开头和结尾有
额外空间）：flex-start；（近端对齐）
align-items：flex-end；（低端对齐）
10、设置水平方向上的元素排列方式
justify-content：flex-start；（默认值，左对齐）
justify-content：flex-end；（右对齐）
justify-content：center（位于容器中间）
justify-content：space-between（横向分布，但分布和结尾 没有额外空间）
justify-content：space-around（横向分布，但开头和结尾有
额外空间）
扫一扫
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
