首页 > 代码库 > CSS/属性操作

CSS/属性操作

(1)css text 文本

文本颜色:color

颜色属性被用来设置文字的颜色

颜色是通过css最经常的指定:

*十六进制值—如:#FF0000

*一个RGB值---如:RGB(255,0,0)

*颜色的名称---如:red

line-height: 200px;   文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:-4px  设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效

text-decoration:none       text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线

font-family: ‘Lucida Bright‘

font-weight: lighter/bold/border/

font-style: oblique    斜体

text-indent: 150px;      首行缩进150px

letter-spacing: 10px;  字母间距

word-spacing: 20px;  单词间距

text-transform: capitalize/uppercase/lowercase ; 文本转换,用于所有字句变成大写或小写字母,或每个单词的首字母大写

 

(2)背景属性

background-color

background-image

background-repeat

background-position

background-color: cornflowerblue

background-image: url(‘1.jpg‘);

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top(20px 20px);

 

(3)边框属性

border-width

border-style (required)

border-color

border-style: solid;

border-color: chartreuse;

border-width: 20px;

 

(4)列表属性

list-style-type         设置列表项标志的类型。

list-style-image    将图象设置为列表项标志。

list-style-position 设置列表中列表项标志的位置。

list-style          简写属性。用于把所有用于列表的属性设置于一个声明中

 

(5)dispalay属性

none

父子综合显示:(使用悬浮hover方法)

当父类悬浮式,子类不显示

display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失

注意:

与visibility:hidden的区别:

visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

block

内联不能设置长宽

 

(6)Inline

设定为内联

inline-block

既有内联不单独占用一行,也有块级设置长宽的属性

inline-block可做列表布局

 

(7)外边距(margine)和内边距(padding)

margine(外边距):用于控制元素与元素之间的距离;margine的基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。

margine-top:上边距

margine-bottom:下边距

margine-right:右边距

margine-left:左边距

margin:10px 20px 20px 10px;

        上边距为10px

        右边距为20px

        下边距为20px

        左边距为10px

 

margin:10px 20px 10px;

        上边距为10px

        左右边距为20px

        下边距为10px

margin:10px 20px;

        上下边距为10px

        左右边距为20px

margin:25px;

        所有的4个边距都是25px

居中应用:

margin: 0 auto

 

padding(内边距):用于控制内容与边框之间的距离;

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用,一旦改变一切都改变。

设置为margine;

border(边框):围绕在内边距和内容外的边框;

content(内容):盒子的内容,显示文本和图像。

 

(8)float属性

浮动元素会判断上一个元素是否浮动,如果浮动,紧贴;否则,与上一个元素保持垂直距离

block元素和inline元素在文档流中的排列方式

  block元素通常被现实为独立一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度。Block元素可以设置width,height,margine,padding属性;

  inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。Inline元素设置width,height属性无效

所谓的文档流:指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。

脱离文档流:也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。

清除浮动

clear语法:

clear:none|left|right|both

取值:

none:默认值。允许两边都可以有浮动对象

left:不允许左边有浮动对象

right: 不允许右边有浮动对象

both:不允许有浮动对象

需要注意的是:clear属性只会对自身起作用,不会影响其他元素。如果一个元素的右侧有一浮动对象,而这个元素设置了不允许右边有浮动对象,即clear:right,则这个元素会自动下移一格,达到本元素右边没有浮动对象的目的。

 

(9)position(定位属性)精确定位使用

static:默认值 按照正常文档流定位

relative:1.参照物是元素之前文档流中的位置

2.元素不脱离文档流(之前的空间位置仍然存在)

absolute:1.参照物是已定位的父元素

        2.元素脱离文档流

小结:

父元素:position:relative

子元素:position:absolute

脱离文档流:flat  position:absolute      fixed

CSS/属性操作