一.文本Text
| CSS text-align 属性 | 文本对齐方式 |
| CSS text-decoration 属性 | text-decoration 属性规定添加到文本的修饰 |
| CSS line-height 属性 | 设置以百分比计的行高 |
| CSS text-transform 属性 | text-transform 属性控制文本的大小写 |
| CSS3 text-overflow 属性 | text-overflow 属性规定当文本溢出包含元素时发生的事情 |
1.CSS text-align 属性 文本对齐方式
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 div{
8 width: 200px;
9 height: 200px;
10 background-color: red;
11 }
12 #a{
13 text-align: left;
14 }
15 #b{
16 text-align: center;
17 }
18 #c{
19 text-align: right;
20 }
21 </style>
22 </head>
23 <body>
24 <div>
25 <p id="a">这是一个段</p>
26 <p id="b">这是一个段</p>
27 <p id="c">这是一个段</p>
28 </div>
29 </body>
30 </html>
2.CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰。
注释：修饰的颜色由 "color" 属性设置。
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| blink | 定义闪烁的文本。 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
所有主流浏览器都支持 text-decoration 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
注释：IE、Chrome 或 Safari 不支持 "blink" 属性值。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 h1{
8 text-decoration: underline;
9 }
10 h2{
11 text-decoration: overline;
12 }
13 h3{
14 text-decoration: line-through;
15 }
16 </style>
17 </head>
18 <body>
19 <h1>定义文本下的一条线</h1>
20 <h2>定义文本上的一条线</h2>
21 <h3>定义穿过文本下的一条线</h3>
22 </body>
23 </html>
3.CSS line-height 属性 设置以百分比计的行高
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比行间距。 |
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 div{
8 width: 200px;
9 }
10 .wider{
11 line-height: 400%;
12 }
13 .narrower{
14 line-height: 40%;
15 }
16 </style>
17 </head>
18 <body>
19 <div>
20 <p>
21 这是拥有标准行高的段落
22 这是拥有标准行高的段落
23 这是拥有标准行高的段落
24 这是拥有标准行高的段落
25 这是拥有标准行高的段落
26 </p>
27 <p class="wider">
28 这个段落拥有更大的行高
29 这个段落拥有更大的行高
30 这个段落拥有更大的行高
31 这个段落拥有更大的行高
32 这个段落拥有更大的行高
33 </p>
34 <p class="narrower">
35 这个段落拥有更小的行高
36 这个段落拥有更小的行高
37 这个段落拥有更小的行高
38 这个段落拥有更小的行高
39 这个段落拥有更小的行高
40 </p>
41 </div>
42 </body>
43 </html>
4.CSS text-transform 属性 text-transform 属性控制文本的大小写
| none | 默认。定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母，仅有小写字母。 |
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 #a{
8 text-transform: capitalize;
9 }
10 #b{
11 text-transform: uppercase;
12 }
13 #c{
14 text-transform: lowercase;
15 }
16 </style>
17 </head>
18 <body>
19 <p id="a">adcDEF</p>
20 <p id="b">adcDEF</p>
21 <p id="c">adcDEF</p>
22 </body>
23 </html>
5.CSS3 text-overflow 属性 text-overflow 属性规定当文本溢出包含元素时发生的事情
| clip | 修剪文本。 | 测试 |
| ellipsis | 显示省略符号来代表被修剪的文本。 | 测试 |
| string | 使用给定的字符串来代表被修剪的文本。 |
使用注意事项：
- 要给容器定义宽度
- 要设置
overflow:hidden; - 要给相对应的文字设置：
white-space:nowrap - 还要设置
text-overflow:ellipsis多余的部分会以...的方式出现
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 .a{
8 border:1px solid red;
9 width: 200px;
10 overflow:hidden;
11 white-space:nowrap;
12 text-overflow:clip;
13 }
14 #b{
15 border:1px solid #000000;
16 width: 200px;
17 overflow:hidden;
18 white-space:nowrap;
19 text-overflow: ellipsis;
20 }
21 </style>
22 </head>
23 <body>
24 <div>
25 <div class="a">
26 这是一段很长的话，因为它会复制自己
27 这是一段很长的话，因为它会复制自己
28 这是一段很长的话，因为它会复制自己
29 这是一段很长的话，因为它会复制自己
30 </div>
31 <br />
32 <hr />
33 <div id="b">
34 这是一段很长的话，因为它会复制自己
35 这是一段很长的话，因为它会复制自己
36 这是一段很长的话，因为它会复制自己
37 这是一段很长的话，因为它会复制自己
38 </div>
39 <br />
40 <hr />
41 <div id="c">
42 这是一段很长的话，因为它会复制自己
43 这是一段很长的话，因为它会复制自己
44 这是一段很长的话，因为它会复制自己
45 这是一段很长的话，因为它会复制自己
46 </div>
47 </div>
48 </body>
49 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>text-ellipsis的使用</title>
6 <style>
7 div.test{
8 width:200px;
9 white-space:nowrap;
10 overflow:hidden;
11 border:1px solid #000000;
12 }
13
14 div.test:hover{
15 text-overflow:inherit;
16 overflow:visible;
17 }
18 </style>
19 </head>
20 <body>
21
22 <p>鼠标移动到框内，查看效果.</p>
23
24 <div class="test" style="text-overflow:ellipsis;">如果超出会出现省略号，因为设置了text-overflow:ellipsis</div>
25 <br>
26 <div class="test" style="text-overflow:clip;">设置超出不会出现省略号，会直接截掉，因为设置了text-overflow:clip</div>
27
28 </body>
29 </html>
better
二,字体font
font-family 规定元素的字体系列
color 设置字体颜色
font-size 设置字体大小
| smaller | 把 font-size 设置为比父元素更小的尺寸。 |
| larger | 把 font-size 设置为比父元素更大的尺寸。 |
| length | 把 font-size 设置为一个固定的值。 |
| % | 把 font-size 设置为基于父元素的一个百分比值。 |
font-weight 设置字体粗细
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
|
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 |
font-style
| italic | 浏览器会显示一个斜体的字体样式。 |
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 div{
8 border: 1px solid red;
9 }
10 p{
11 border: 1px solid red;
12 }
13 </style>
14 </head>
15 <body>
16 <div style="font-family: cursive;">规定元素的字体系列</div>
17 <div style="color: red;">规定元素的字体系列</div>
18 <div style="font-size: 200%">规定元素的字体系列</div>
19 <div style="font-weight: 200%">规定元素的字体系列</div>
20 <div style="font-style: italic">规定元素的字体系列</div>
21 <p>规定元素的字体系列</p>
22 <p>规定元素的字体系列</p>
23 </body>
24 </html>
三.背景background
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：
- background-color
- background-position(
/*background-repeat:no-repeat;必须要用这个属性，不然图像一直重复不能体现效果*/
/* background-position: bottom: left; 如果这样写图片会被锁定在父空间的左上方*/ /* background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。 */
)
|
如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。 |
| x% y% |
第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。 |
| xpos ypos |
第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。 |
- background-size
length 设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
测试 percentage 以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
测试 cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
测试 contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 测试 - background-repeat
- background-origin
padding-box 背景图像相对于内边距框来定位。 测试 border-box 背景图像相对于边框盒来定位。 测试 content-box 背景图像相对于内容框来定位。 测试 （background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果，还要加padding才有明显效果）
- background-clip
- background-attachment
- background-image
| background-color | 规定要使用的背景颜色。 | 1 |
| background-position | 规定背景图像的位置。 | 1 |
| background-size | 规定背景图片的尺寸。 | 3 |
| background-repeat | 规定如何重复背景图像。 | 1 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-clip | 规定背景的绘制区域。 | 3 |
| background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
| background-image | 规定要使用的背景图像。 | 1 |
| inherit | 规定应该从父元素继承 background 属性的设置。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-image: url('img/2.jpg');
background-size: cover;
}
div{
height: 150px;
border: 1px solid red;
}
.a{
background-color: yellow;
padding: 35px;
background-clip:content-box;
}
.b{
background-image: url('img/1.jpg');
background-size: 100px 50px;
background-repeat: no-repeat;
background-position: bottom right;
/* background-position: bottom: left; 如果这样写图片会被锁定在父空间的左上方*/
/* background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。 */
}
.c{
background-image: url('img/1.jpg');
background-size: 100px 50px;
overflow: hidden;
white-space: normal;
background-repeat: no-repeat;
background-position: left;
background-origin: content-box;
padding:35px;
/* text-overflow: ellipsis; */
}
body{
background-image: url('img/3.jpg');
background-repeat: no-repeat;
background-size: 200px 70px;
background-position: bottom right;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="a" style="height: auto">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
<div class="b"></div>
<div class="c" style="height: auto">
background-origin 属性规定 background-position 属性相对于什么位置来定位。注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果.background-origin 属性规定 background-position 属性相对于什么位置来定位。注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果.background-origin 属性规定 background-position 属性相对于什么位置来定位。注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果.
</div>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
</body>
</html>
效果图
四，边框border
border 简写属性在一个声明设置所有的边框属性。
- border-width
- border-style
- border-color
可以按顺序设置如下属性：
- border-width
thin 定义细的边框。 medium 默认。定义中等的边框。 thick 定义粗的边框。 length 允许您自定义边框的宽度。 - border-style
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。IE不支持 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 - border-color
(border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。
例子 1
border-color:red green blue pink;
- 上边框是红色
- 右边框是绿色
- 下边框是蓝色
- 左边框是粉色
例子 2
border-color:red green blue;
- 上边框是红色
- 右边框和左边框是绿色
- 下边框是蓝色
例子 3
border-color:dotted red green;
- 上边框和下边框是红色
- 右边框和左边框是绿色
例子 4
border-color:red;
- 所有 4 个边框都是红色
要记住，边框的样式不能为 none 或 hidden，否则边框不会出现。
注释：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
)
color_name 规定颜色值为颜色名称的边框颜色（比如 red）。 hex_number 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。 rgb_number 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。 transparent 默认值。边框颜色为透明。
如果不设置其中的某个值，也不会出问题，比如 border: 1px solid #ff0000; 也是允许的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
/* background-color: red; */
/* border: 50px solid; */
border-width: 50px;
border-style: dashed;
border-color: black red blue yellow;/* 上右下左 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
五，内外边距 padding margin
定义和用法
padding 简写属性在一个声明中设置所有内边距属性。
说明
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注释：不允许使用负值。
例子 1
padding:10px 5px 15px 20px;
- 上内边距是 10px
- 右内边距是 5px
- 下内边距是 15px
- 左内边距是 20px
例子 2
padding:10px 5px 15px;
- 上内边距是 10px
- 右内边距和左内边距是 5px
- 下内边距是 15px
例子 3
padding:10px 5px;
- 上内边距和下内边距是 10px
- 右内边距和左内边距是 5px
例子 4
padding:10px;
- 所有 4 个内边距都是 10px
auto 浏览器计算内边距。 length 规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。 % 规定基于父元素的宽度的百分比的内边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color: yellow;
}
div{
width: 200px;
height: 300px;
padding: 35px;
background-color: yellowgreen;
background-clip: content-box;
border-width: 20px;
border-style: solid;
border-color: red;
}
p{
border: 1px solid red;
margin: 20px;
}
</style>
</head>
<body>
<div>
padding padding padding padding
padding padding padding padding
</div>
.....................................
.....................................
.....................................
.....................................
.....................................
<p>
margin margin margin margin
margin margin margin margin
</p>
.....................................
.....................................
.....................................
.....................................
.....................................
</body>
</html>
