CSS常用属性-xy

一.文本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	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。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 中正常工作。 */

)

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

如果您仅规定了一个关键词，那么第二个值将是"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>