文章目录
H5/CSS3
align对齐属性
left ：设置标题文字左对齐（默认值）
center：设置标题文字居中对齐
right：设置标题文字右对齐
hr标签的常用属性
| 属性名 | 含义 | 属性值 |
|---|---|---|
| align | 设置水平线的对齐方式 | 可选择left、right、center三种值，默认为center，居中对齐 |
| size | 设置水平线的粗细 | 以像素为单位，默认为2像素 |
| color | 设置水平线的颜色 | 可用颜色名称、十六进制#RGB、rgb(r,g,b) |
| width | 设置水平线的宽度 | 可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100% |
font 属性
| 属性名 | 含义 |
|---|---|
| face | 设置文字的字体，例如微软雅黑、黑体、宋体等 |
| size | 设置文字的大小，可以取1到7之间的整数值 |
| color | 设置文字的颜色 |
文本格式化标签
| 标签 | 显示效果 |
|---|---|
| <b></b>和<strong></strong> | 文字以粗体方式显示（XHTML推荐使用strong） |
| <i></i>和<em></em> | 文字以斜体方式显示（XHTML推荐使用em） |
| <s></s>和<del></del> | 文字以加删除线方式显示（XHTML推荐使用del） |
| <u></u>和<ins></ins> | 文字以加下划线方式显示（XHTML不赞成使用u） |
特殊字符标签
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | ||
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 立方3（上标3） | ³ |
锚点
用“<a href="#id名">链接文本</a>”创建链接文本
使用相应的id名标注跳转目标的位置
文本居中
text-align: center;
首行缩进
text-indent:2em;
外链CSS
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
字体样式属性
font-size属性用于设置字号。
font-family属性用于设置字体。
font-weight属性用于定义字体的粗细。
font-style属性用于定义字体风格。
normal：默认值，浏览器会显示标准的字体样式;
normal：默认值，浏览器会显示标准的字体样式;
oblique：浏览器会显示倾斜的字体样式;
font综合属性用于综合设置字体样式。
@font-face属性是CSS3的新增属性，用于定义服务器字体。
@font-face{
font-family:字体名称;
src:字体路径;
}
word-wrap属性用于实现长单词和URL地址的自动换行
| 长度单位 | 说明 |
|---|---|
| em | 相对于当前对象内文本的字体尺寸 |
| px | 像素，最常用，推荐使用 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
文本外观属性
color颜色
letter-spacing字间距
word-spacing单词之间的间距
line-height行间距
text-align
text-transform 控制英文字符的大小写
- 其可用属性值如下：
- none：不转换（默认值）
- capitalize：首字母大写
- uppercase：全部字符转换为大写
- lowercase：全部字符转换为小写
text-decoration文本的下划线，上划线，删除线
- 其可用属性值如下：
- none：没有装饰（正常文本默认值）。
- underline：下划线。
- overline：上划线。
- line-through：删除线。
text-indent首行文本的缩进
white-space设置空白符的处理方式
- 其属性值如下：
- normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。
- pre：预格式化，按文档的书写格式保留空格、空行原样显示。
- nowrap：空格空行无效，强制文本不能换行，除非遇到换行标签<br />。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。
text-shadow文本添加阴影效果。
-
text-shadow:h-shadow v-shadow blur color;
text-overflow标示对象内溢出的文本
- 其属性值如下：
- clip：修剪溢出文本，不显示省略标签“…”。
- ellipsis：用省略标签“…”标示被修剪文本，省略标签插入的位置是最后一个字符。
CSS3新增的选择器
属性选择器、关系选择器、结构化伪类选择器、伪元素选择器4类
伪元素选择器
| 伪元素选择器 | 举例 | 说明 |
|---|---|---|
| ::before | p::before | 表示在p标签的内容前面插入内容。 |
| ::after | p::after | 表示在p标签的内容后面插入内容。 |
盒子模型的总宽度与总高度
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（<img />和<input />标签除外
border属性
| 设置内容 | 样式属性 | 常用属性值 |
|---|---|---|
| 边框样式 | border-style:上边 [右边 下边 左边]; | none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线 |
| 边框宽度 | border-width:上边 [右边 下边 左边]; | 像素值 |
| 边框颜色 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
| 综合设置边框 | border:四边宽度 四边样式 四边颜色; | |
| 圆角边框 | border-radius:水平半径参数/垂直半径参数; | 像素值或百分比 |
| 图片边框 | border-images:图片路径 裁切方式/边框宽度/边框扩展距离 重复方式; |
| 属性 | 说明 |
|---|---|
| border-image-source | 指定图片的路径 |
| border-image-slice | 指定边框图像顶部、右侧、底部、左侧内偏移量。 |
| border-image-width | 指定边框宽度 |
| border-image-outset | 指定边框背景向盒子外部延伸的距离。 |
| border-image-repeat | 指定背景图片的平铺方式 |
padding属性
padding:5px /*四个方向内边距为5像素宽度*/
padding:5px 3px /*上下内边距为5像素，左右内边距为3像素*/
padding:5px 3px 4px /*上内边距为5像素，左右内边距为3像素，下内边距为4像素*/
margin属性
margin:5px /*四边外边距为5像素宽度*/
margin:5px 3px /*上下外边距为5像素，左右外边距为3像素*/
margin:5px 3px 4px /*外边距：上为5像素，左右为3像素，下为4像素*/
为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距。
*{
padding:0; /*清除内边距*/
margin:0; /*清除外边距*/
}
制作网页时，经常使块级元素水平居中。
p{ margin: 0 auto; }
box-shadow属性
box-shadow:像素值1 像素值2 像素值3 像素值4 颜色值 阴影类型;
box-shadow:5px 5px 10px 2px #999 inset,-5px -5px 10px 2px #333 inset;
| 参数值 | 说明 |
|---|---|
| 像素值1 | 表示元素水平阴影位置，可以为负值（必选属性）。 |
| 像素值2 | 表示元素垂直阴影位置，可以为负值（必选属性）。 |
| 像素值3 | 阴影模糊半径（可选属性）。 |
| 像素值4 | 阴影扩展半径，不能为负值（可选属性）。 |
| 颜色值 | 阴影颜色（可选属性）。 |
| 阴影类型 | 内阴影（inset）/外阴影（默认）（可选属性）。 |
box-sizing属性
box-sizing: content-box/border-box;
content-box：浏览器对盒模型的解释遵从W3C 标准，当定义width和height时，它的参数值不包括border和padding。
border-box：当定义width和height时，border和padding的参数值被包含在width和height之内。
background属性
background-repeat图像平铺属性
| 平铺属性值 | 含义 |
|---|---|
| repeat | 沿水平和竖直两个方向平铺（默认值） |
| no-repeat | 不平铺（图像位于元素的左上角，只显示一次） |
| repeat-x | 只沿水平方向平铺 |
| repeat-y | 只沿竖直方向平铺 |
background-position图像位置属性
| 位置属性取值 | 含义 |
|---|---|
| 单位数值 | 设置图像左上角在元素中的坐标，例如background-position:20px 20px; |
| 预定义的关键字 | 水平方向值：left、center、right。 |
| 垂直方向值：top、center、bottom。 | |
| 百分比 | 0% 0% ：图像左上角与元素的左上角对齐。 |
| 50% 50%：图像50% 50%中心点与元素50% 50%的中心点对齐。 | |
| 20% 30%：图像20% 30%的点与元素20% 30%的点对齐。 | |
| 100% 100%：图像右下角与元素的右下角对齐，而不是图像充满元素。 |
background-attachment图像固定属性
固定属性取值 含义
scroll 图像随页面元素一起滚动（默认值）。
fixed 图像固定在屏幕上，不随页面元素滚动。
background-size图像大小属性
| 属性值 | 说 明 |
|---|---|
| 像素值 | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto； |
| 百分比 | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto； |
| cover | 把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中； |
| contain | 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域； |
background-origin图像相对位置
- 在上面的语法格式中，background-origin属性有三种取值，分别表示不同的含义，具体解释如下。
- padding-box：背景图像相对于内边距区域来定位。
- border-box：背景图像相对于边框来定位。
- content-box：背景图像相对于内容框来定位。
background-clip背景图像的裁剪区域
- 在语法格式上，background-clip属性和background-origin 属性的取值相似，但含义不同，具体解释如下。
- border-box：默认值，从边框区域向外裁剪背景。
- padding-box：从内边距区域向外裁剪背景。
- content-box：从内容区域向外裁剪背景。
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] ;
RGBA模式和opacity属性
rgba(r,g,b,alpha);
p{background-color: rgba(255,0,0,0.5);}
opacity：0-1;
常见的块元素
<h1>—<h6>
<div>
<p>
<li>
<ul>
<ol>
常见的行内元素
<strong>
<b>
<a>
<em>
<span>
<u>
常见的行内块元素
<input>
<img>
<td>
display
inline
- 此元素将显示为行内元素（行内元素默认的display属性值）。
block
- 此元素将显示为块元素（块元素默认的display属性值）。
inline-block
- 此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。
none
- 此元素将被隐藏，不显示，也不占用页面空间。
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
