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

CSS(二)

时间:2017-07-29 00:00:12      阅读:276      评论:0      收藏:0      [点我收藏+]

标签:类型   idt   大写   position   背景   重复   lower   logs   poi   

一、CSS常用属性

1. 颜色属性    Color

2. 背景属性

background-image: 背景图片

Background-repeat: 背景重复

Repeat-x(x轴方向重复) | repeat-y(y轴方向重复) |no-repeat(不重复)

Background-attachment: 背景附件 scroll(默认值)  fixed(固定)

Background-position:背景位置

  Left|center|right( 横向)

  Top|center|bottom(纵向)

注意:background-position 两个值之间需要使用空格隔开

Background:<背景颜色>|<背景图片>|<背景重复>|<背景附件>|<背景位置>                       

3. 边框属性

(1)border-style 边框样式

  Border-top-style

  Border-left-style

  Border-bottom-style

  Border-right-style

  值:     

  dotted 点线

  Dashed 虚线

  Solid   实线

  Double 双实线

  Groove 槽状线

  Ridge   脊线

  Inset  内嵌效果

  Outset 外凸效果

  Border-width 边框宽度

(2)单位使用像素

   同上

(3)Border-color  边框颜色

  同上

  Border:边框宽度 边框样式 边框颜色;

4. 文本属性

Letter-spacing  字母间隔  值为长度  值可以是负值 可以支持中文

Word -spacing  词间距   值为长度  值可以是负值 抓取词边界  可以支持中文但是 请加上词边界

Text-decoration 文本修饰 :None(默认值)           通常我们使用这个属性将a标签的默认下划线取消

  Underline  定义文本下的一条线

  Overline    定义文本上的一条线

  Line-through  定义穿过文本中的一条线

Text-align 对齐方式

  Left|center|right|justify(两端对齐)

  Justify 将我们的文字贴近我们的边框 将我们的空白留给中间

Text-indent  文本缩进  2em
      line-height 设置行间距离(行高)   不允许出现负值

 作用:用来将文本居中显示 一般都是和设置的高度相同 让文字垂直居中显示

 

  5. 鼠标光标属性

Cursor

  Text      文本

  Crosshair 十字架

  Wait     等待

  Help     帮助

  Pointer   小手

6.列表属性 

List-style-type  列表样式类型

值:

  Disc                    实心点

  Circle                       圆圈

  Square               小方块

  Decimal            数字

  Lower-roman  小写罗马字

  Upper-roman  大写罗马字

  Lower-alpha   小写字母

  Upper-alpha   大写字母

  None                       没有标识

List-style-image  列表样式图片      url()

List-style-position 列表样式位置 

  Inside 表示在里面

  Outside 表示在li外面(默认值)

作用:就是让你来判断是否控制图片被样式表是否修改

三、无意义标签

Div

块级标签,会自动换行(独占一行)

Span

行内标签 内容显示在一行内

块级元素的特点:

1.总是独自占一行显示

2.高度、行高和内边距外边距 都可以控制

3.宽度和浏览器宽度一样 与内容无关

4.可以容纳行内元素和其他块元素

行内元素特点:

1.和其他标签在同一行内显示

2.高度 行高 内边距 外边距 部分可控

3.与内容有关 内容改变宽度改变

4.容纳文本和其他行内元素

实例:

技术分享

技术分享

技术分享

参考资料:https://www.w3cschool.cn/css/

CSS(二)

标签:类型   idt   大写   position   背景   重复   lower   logs   poi   

原文地址:http://www.cnblogs.com/wslch/p/7252911.html

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