css 属性操作(1)

1、CSS text
文本颜色:color

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

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

十六进制值 – 如: #FF0000
一个RGB值 – 如: RGB(255,0,0)
颜色的名称 – 如: red

p { color: rebeccapurple; }

 

水平对齐方式

text-align 属性规定元素中的文本的水平对齐方式。

left   把文本排列到左边。默认值:由浏览器决定。
right   把文本排列到右边。
center   把文本排列到中间。
justify   实现两端对齐文本效果。

 

文本其他属性
font-size: 10px;

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:#ffffff url(‘1.png’) no-repeat right top;

3、边框属性

border-width
border-style (required)
border-color

边框-单独设置各边
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;

4、列表属性

list-style-type 设置列表项标志的类型。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。

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

ist-style-type属性指定列表项标记的类型:ul { list-style-type: square; }
使用图像来替换列表项的标记:ul { list-style-image: url(”); }

5.display属性
none
block
inline
inline-block
none(隐藏某标签) p{display:none;}

 

注意与visibility:hidden的区别:

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

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

block(内联标签设置为块级标签)

span {display:block;}

注意:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。

inline(块级标签设置为内联标签)

li {display:inline;}
inline-block

display:inline-block可做列表布局,其中的类似于图片间的间隙小bug可以通过如下设置解决:

#outer{
border: 3px dashed;
word-spacing: -5px;
}

 

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/4433.html

发表评论

登录后才能评论