HTML中css的学习(三)——css属性

一、文字属性

font-size:设置字体大小

font-family:设置文字的字体,常见的如:黑体、宋体、楷体等

font-style:规定斜体字,常见的如:normal:文本正常显示,italic:文本斜体显示,oblique:文本倾斜显示

font-weight:设置文体的粗细,关键字100~900为字体指定了9级加粗度。100最细,900最粗。

二、文本属性

color:设置文本颜色

text-indent:缩进元素中文本的首行,取值类型如下:text-indent:5em,表示此段落第一行缩进5个字符的宽度;text-indent:20%,表示此段落第一行缩进父容器宽度的百分之二十;

text-decoration: none:会关闭原本应用到一个元素上的所有装饰,underline: 添加下划线 overline:在文本的顶端画一个上划线 line-through:在文本中间画一个贯穿线 blink:让文本闪烁

text-align:一个元素中的文本行互相之间的对齐方式,值有left(左对齐)、right(右对齐) 和 center(居中)

word-spacing: 字符之间的间隔

letter-spacing: 单词或者字母之间的间隔

line-height:25px-32px

三、背景属性

background-color:设置背景颜色,默认透明

background-image:url("图片路径"):设置背景图片

background-repeat:repeat-y:只在垂直方向都平铺 repeat-x:只在水平方向都平铺 repeat:在水平垂直方向都平铺 no-repeat:任何方向都不平铺

background-position: 改变图像在背景中的位置。top、bottom、left、right 和 center

四、列表属性

list-style-type:decimal;改变列表的标志类型

list-style-image: url("images/dog.gif");用图像表示标志

list-style-position: inside;确定标志出现在列表项内容之外还是内容内部

五、尺寸显示轮廓属性

width:设置元素的宽度

height:设置元素的高度

显示属性 display:none 不显示 block:块级显示 inline:行级显示

绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

常用属性: outline-style:solid(实线)/dotted(虚线)/dashed(虚线,虚线的每段较长)/double(框为空心);

设置轮廓的样式

outline-color:red;设置轮廓的颜色

outline-width:10px设置轮廓的宽度

六、浮动属性

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

float:left向左浮动

float:right向右浮动

对于浮动属性的话,在有些需要拼接的div中或者模块中用着很方便,只是在拼接的时候要注意块的大小。

七、定位属性

position:static默认值,该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。

position:relative相对定位,它的偏移是相对于原先在文档流中的位置,普通流中仍然保留此元素的位置。relative不会改变行内元素的display值。

position:absolute绝对定位,如果其父元素没有设置position属性,则其根据body元素来变动,否则根据父元素的位置进行变动。此属性会脱离页面中的普通流并改变display的属性。行内元素应用了absolute属性后会改变其display为block。应用了absolute/relative属性值后,很有可能会覆盖其他非定位元素(static),可以设置z-index的值以防止被覆盖。

position:fixed元素设置为此属性值后,其会脱离普通流,而且其根元素是浏览器窗口,即当你滚动网页,这个元素依旧会显示在浏览器的那个位置。fixed属性会创建新的层叠上下文。和absolute相同,fixed也会使行内元素的display变成block。

position:sticky盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为table),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position:sticky对table元素的效果与position:relative相同。

猜你喜欢

转载自blog.csdn.net/qq_41061437/article/details/82179085