一. 文本 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 | 把文本排列到中间。 |
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- div{ width: 200px; height: 200px; background-color: red; } #a{ text-align:
- left; } #b{ text-align: center; } #c{ text-align: right; }
- </style>
- </head>
- <body>
- <div>
- <p id="a">
- 这是一个段
- </p>
- <p id="b">
- 这是一个段
- </p>
- <p id="c">
- 这是一个段
- </p>
- </div>
- </body>
- </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" 属性值.
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- h1{ text-decoration: underline; } h2{ text-decoration: overline; } h3{
- text-decoration: line-through; }
- </style>
- </head>
- <body>
- <h1>
- 定义文本下的一条线
- </h1>
- <h2>
- 定义文本上的一条线
- </h2>
- <h3>
- 定义穿过文本下的一条线
- </h3>
- </body>
- </HTML>
View Code
3.CSS line-height 属性 设置以百分比计的行高
number | 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。 |
length | 设置固定的行间距。 |
% | 基于当前字体尺寸的百分比行间距。 |
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- div{
- width: 200px;
- }
- .wider{
- line-height: 400%;
- }
- .narrower{
- line-height: 40%;
- }
- </style>
- </head>
- <body>
- <div>
- <p>
这是拥有标准行高的段落
这是拥有标准行高的段落
这是拥有标准行高的段落
这是拥有标准行高的段落
这是拥有标准行高的段落
- </p>
- <p class="wider">
这个段落拥有更大的行高
这个段落拥有更大的行高
这个段落拥有更大的行高
这个段落拥有更大的行高
这个段落拥有更大的行高
- </p>
- <p class="narrower">
这个段落拥有更小的行高
这个段落拥有更小的行高
这个段落拥有更小的行高
这个段落拥有更小的行高
这个段落拥有更小的行高
- </p>
- </div>
- </body>
- </HTML>
View Code
4.CSS text-transform 属性 text-transform 属性控制文本的大小写
none | 默认。定义带有小写字母和大写字母的标准的文本。 |
capitalize | 文本中的每个单词以大写字母开头。 |
uppercase | 定义仅有大写字母。 |
lowercase | 定义无大写字母,仅有小写字母。 |
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <style>
- #a{ text-transform: capitalize; } #b{ text-transform: uppercase; } #c{
- text-transform: lowercase; }
- </style>
- </head>
- <body>
- <p id="a">
- adcDEF
- </p>
- <p id="b">
- adcDEF
- </p>
- <p id="c">
- adcDEF
- </p>
- </body>
- </HTML>
View Code
5.CSS3 text-overflow 属性 text-overflow 属性规定当文本溢出包含元素时发生的事情
clip | 修剪文本。 | 测试 |
ellipsis | 显示省略符号来代表被修剪的文本。 | 测试 |
string | 使用给定的字符串来代表被修剪的文本。 |
使用注意事项:
要给容器定义宽度
要设置 overflow:hidden;
要给相对应的文字设置: white-space:nowrap
还要设置
text-overflow:ellipsis
多余的部分会以... 的方式出现
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- .a{
- border:1px solid red;
- width: 200px;
- overflow:hidden;
- white-space:nowrap;
- text-overflow:clip;
- }
- #b{
- border:1px solid #000000;
- width: 200px;
- overflow:hidden;
- white-space:nowrap;
- text-overflow: ellipsis;
- }
- </style>
- </head>
- <body>
- <div>
- <div class="a">
这是一段很长的话, 因为它会复制自己
这是一段很长的话, 因为它会复制自己
这是一段很长的话, 因为它会复制自己
这是一段很长的话, 因为它会复制自己
</div> <br /> <hr /> <div id="b">
这是一段很长的话, 因为它会复制自己
这是一段很长的话, 因为它会复制自己
这是一段很长的话, 因为它会复制自己
这是一段很长的话, 因为它会复制自己
</div> <br /> <hr /> <div id="c">
这是一段很长的话, 因为它会复制自己
这是一段很长的话, 因为它会复制自己
这是一段很长的话, 因为它会复制自己
这是一段很长的话, 因为它会复制自己
</div> </div> </body> </HTML>
View Code
<!DOCTYPE HTML> <HTML> <head> <meta charset="utf-8"> <title> text-ellipsis 的使用 </title> <style> div.test{ width:200px; white-space:nowrap; overflow:hidden; border:1px solid #000000; } div.test:hover{ text-overflow:inherit; overflow:visible; } </style> </head> <body> <p> 鼠标移动到框内, 查看效果. </p> <div class="test" style="text-overflow:ellipsis;"> 如果超出会出现省略号, 因为设置了 text-overflow:ellipsis </div> <br> <div class="test" style="text-overflow:clip;"> 设置超出不会出现省略号, 会直接截掉, 因为设置了 text-overflow:clip </div> </body> </HTML>
View Code 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 | 浏览器会显示一个斜体的字体样式。 |
<!DOCTYPE HTML> <HTML lang="en"> <head> <meta charset="UTF-8"> <title> Document </title> <style> div{ border: 1px solid red; } p{ border: 1px solid red; } </style> </head> <body> <div style="font-family: cursive;"> 规定元素的字体系列 </div> <div style="color: red;"> 规定元素的字体系列 </div> <div style="font-size: 200%"> 规定元素的字体系列 </div> <div style="font-weight: 200%"> 规定元素的字体系列 </div> <div style="font-style: italic"> 规定元素的字体系列 </div> <p> 规定元素的字体系列 </p> <p> 规定元素的字体系列 </p> </body> </HTML>
View Code
三. 背景 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
规定要使用的背景颜色。 | 1 | |
规定背景图像的位置。 | 1 | |
规定背景图片的尺寸。 | 3 | |
规定如何重复背景图像。 | 1 | |
规定背景图片的定位区域。 | 3 | |
规定背景的绘制区域。 | 3 | |
规定背景图像是否固定或者随着页面的其余部分滚动。 | 1 | |
规定要使用的背景图像。 | 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>
View Code
效果图
四, 边框 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>
View Code
五, 内外边距 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>
View Code
来源: http://www.bubuko.com/infodetail-2989414.html