0
点赞
收藏
分享

微信扫一扫

第四次网页前端培训笔记(CSS常用属性)

吃面多放酱 2022-02-08 阅读 33

1.背景

背景设置
background-color背景颜色
background-image背景图片
background-repeat

是否重复

1.repeat-x

2.repeat-y

3.no-repeat

2.文本

文本属性
字体颜色color:颜色;
对齐方式

text-align:left;(左对齐)

text-align: center;(居中)

text-align: right;(右对齐)

text-align:justify;(两端对齐)

文本修饰text-decoration: line-through(中划线) overline(中划线) underline(下划线);
去除文本效果(去除超链接的下划线)

a {

text-decoration:none;

}

首行缩进text-indent:2em;(首行缩进两格,em表示相对值)

3.display属性

display属性
display:none;隐藏元素
display: block;显示元素

4.浮动

float的属性值有none、left、right

1.只有横向浮动,并没有纵向浮动。

2.会将元素的display属性便更为block。

3.浮动元素的后一个元素会围绕着浮动元素(典型运用是文字围绕图片)

4.浮动元素的前一个元素不会受到任何影响(如果想让两个块元素并排显示,必须让两个块元素都应用float。)

5.盒子模型

1.border(边框):设置所有的边框属性

1)可同时设置边框的宽度、样式、颜色。

      border: 颜色 样式 宽度(顺序无要求)

例:border: red soild 1px  

2)使用border-width、border-style、border-color单独设置。

3)设置是否将表格边框折叠为单一边框。

属性值: border-collapse(单元格边框合并)、border-separate(默认,单元格边框独立)

2.padding(内边距(会使元素变形)):设置元素所有内边距的宽度,或者设置各边上内边距的宽度。

   例: { padding:15px;}

1)如果在表的内容中控制文本到边框的内边距,使用td和th元素的填充属性:

td{

   padding: 15px;

}

2)单独设置各边的内边距:padding-top、padding-left、padding-bottom、padding-right

 (默认按照上、右、下、左的顺序设定)

设置一个值:上右下左都一致。   设置两个值:上下一致、左右一致  设置三个值:上右下,则左和右一致

3.margin(外边距)

例:{ margin:100px;}

1)设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

2)单独设置各个边的外边距:margin-top、margin-left、margin-bottom、margin-right

 (默认按照上、右、下、左的顺序设定)

设置一个值:上右下左都一致。   设置两个值:上下一致、左右一致  设置三个值:上右下,则左和右一致

(auto:自动,可以理解为居中的意思,浏览器自动计算外边距。)

{margin: auto auto;}(第一个auto表示上下边距自动计算,第二个auto表示左右边距自动计算。

注意:但是上下边距自动计算不会生效,只有左右生效,表现为居中状态

举报

相关推荐

0 条评论