一.文本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>
二,字体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 属性的设置。 |
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{ 8 background-image: url('img/2.jpg'); 9 background-size: cover; 10 } 11 div{ 12 height: 150px; 13 border: 1px solid red; 14 } 15 .a{ 16 background-color: yellow; 17 padding: 35px; 18 background-clip:content-box; 19 } 20 .b{ 21 background-image: url('img/1.jpg'); 22 background-size: 100px 50px; 23 background-repeat: no-repeat; 24 background-position: bottom right; 25 /* background-position: bottom: left; 如果这样写图片会被锁定在父空间的左上方*/ 26 /* background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。 */ 27 } 28 .c{ 29 background-image: url('img/1.jpg'); 30 background-size: 100px 50px; 31 overflow: hidden; 32 white-space: normal; 33 background-repeat: no-repeat; 34 background-position: left; 35 background-origin: content-box; 36 padding:35px; 37 /* text-overflow: ellipsis; */ 38 } 39 body{ 40 background-image: url('img/3.jpg'); 41 background-repeat: no-repeat; 42 background-size: 200px 70px; 43 background-position: bottom right; 44 background-attachment: fixed; 45 } 46 </style> 47 </head> 48 <body> 49 <div class="a" style="height: auto"> 50 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 51 </div> 52 <div class="b"></div> 53 <div class="c" style="height: auto"> 54 background-origin 属性规定 background-position 属性相对于什么位置来定位。注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果.background-origin 属性规定 background-position 属性相对于什么位置来定位。注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果.background-origin 属性规定 background-position 属性相对于什么位置来定位。注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果. 55 </div> 56 <p>图像不会随页面的其余部分滚动。</p> 57 <p>图像不会随页面的其余部分滚动。</p> 58 <p>图像不会随页面的其余部分滚动。</p> 59 <p>图像不会随页面的其余部分滚动。</p> 60 <p>图像不会随页面的其余部分滚动。</p> 61 <p>图像不会随页面的其余部分滚动。</p> 62 <p>图像不会随页面的其余部分滚动。</p> 63 <p>图像不会随页面的其余部分滚动。</p> 64 <p>图像不会随页面的其余部分滚动。</p> 65 <p>图像不会随页面的其余部分滚动。</p> 66 <p>图像不会随页面的其余部分滚动。</p> 67 <p>图像不会随页面的其余部分滚动。</p> 68 <p>图像不会随页面的其余部分滚动。</p> 69 <p>图像不会随页面的其余部分滚动。</p> 70 <p>图像不会随页面的其余部分滚动。</p> 71 <p>图像不会随页面的其余部分滚动。</p> 72 <p>图像不会随页面的其余部分滚动。</p> 73 <p>图像不会随页面的其余部分滚动。</p> 74 <p>图像不会随页面的其余部分滚动。</p> 75 <p>图像不会随页面的其余部分滚动。</p> 76 <p>图像不会随页面的其余部分滚动。</p> 77 <p>图像不会随页面的其余部分滚动。</p> 78 </body> 79 </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; 也是允许的。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div{ 8 width: 300px; 9 height: 300px; 10 /* background-color: red; */ 11 /* border: 50px solid; */ 12 border-width: 50px; 13 border-style: dashed; 14 border-color: black red blue yellow;/* 上右下左 */ 15 } 16 </style> 17 </head> 18 <body> 19 <div></div> 20 </body> 21 </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。 % 规定基于父元素的宽度的百分比的内边距。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{ 8 background-color: yellow; 9 } 10 div{ 11 width: 200px; 12 height: 300px; 13 padding: 35px; 14 background-color: yellowgreen; 15 background-clip: content-box; 16 border-width: 20px; 17 border-style: solid; 18 border-color: red; 19 } 20 p{ 21 border: 1px solid red; 22 margin: 20px; 23 } 24 </style> 25 </head> 26 <body> 27 <div> 28 padding padding padding padding 29 padding padding padding padding 30 </div> 31 ..................................... 32 ..................................... 33 ..................................... 34 ..................................... 35 ..................................... 36 <p> 37 margin margin margin margin 38 margin margin margin margin 39 </p> 40 ..................................... 41 ..................................... 42 ..................................... 43 ..................................... 44 ..................................... 45 </body> 46 </html>
