码迷,mamicode.com
首页 > Web开发 > 详细

CSS 样式二

时间:2016-04-05 00:41:43      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:

CSS文本样式

  • text-align:设置文本的对齐方式

取值:

left 向左对齐

right:向右对齐

center:居中对齐

  • text-indent:设置文本的首行缩进

????例如,字体设为12px,首行缩进另个字,24px。

  • text-decoration:设置文本的装饰线

????????取值:

????????none 不设置文本装饰线

????????underline:设置下划线

????????overline:上划线

????????line-through:中划线

  • text-transform:(主要应用于英文文本)

????取值:

capitalize:将首字母转换大写

uppercase:将所有的字母转换大写

lowercase:将所有的字母转化小写

  • letter-spacing:如果是汉字,设置字与字之间的间距

????????????????如果是英文文本,设置,字母与字母的间距

  • word-spacing:设置词间距(主要应用英文)
  • line-height:设置文本的行高

技术分享

技术分享

结构代码:

技术分享

示例2:

样式代码:

技术分享

结构代码:

技术分享

CSS列表样式

list-style:设置列表的符号类型

取值:

不设置符号

none

无序列表的项目符号:

square:实心方块

circle:空心原点

disc 实心原点

有序列表的项目符号

decimal????????????????阿拉伯数字

lower-alpha????????????小写字母

upper-alpha????????????大写字母

lower-roman????????小写罗马数字

upper-roman????????大写罗马数字

?

list-style-position:项目符号的位置

????????inside(在li标签的内部)

????????outside(在li标签的外部)

?

list-style-image:将项目符号用背景图片表示

????????书写规则:list-style-image:url(背景图片的路径URL)

简写形式:list-style:square inside url(arrow.gif);

?

示例1:

样式代码:

技术分享

结构代码:

技术分享

CSS背景样式

background-color:设置背景颜色:red #ff0000,rgb(100,120,200)

background-image:url(背景图片的路径url)

background-repeat:

no-repeat:不平铺

repeat:x轴和y轴平铺

repeat-x:在x轴上平铺

repeat-y:在y轴上平铺

background-position:设置图片的位置;

????数值表示法,x px,ypx 只写其中一种,表示另外一个方向上未设置的值,跟这已经设置的这个相同。

单词表示法:

????x方向:left center right,

????y轴方向:top(顶部对齐) center(居中) bottom(底部)

????百分比表示法:50%,50%

background-position:left center;

设置图片x轴向左对齐

设置图片y轴向居中对齐

代码:

技术分享

?

CSS 样式二

标签:

原文地址:http://www.cnblogs.com/nyxd/p/5353390.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!