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

css常用属性设置

1.背景(css背景属性用于定义HTML元素的背景效果)

background-color 设置元素的背景颜色

background-image 设置元素的背景图像,默认情况下,背景图像进行平铺重复显示。

background-repeat 设置是否及如何重复背景图像

2.文本

color 字体颜色

text-align 对齐方式(left、center、right)

text-decoration 文本修饰(line-though 中划线 overline 上划线 underline 下划线)

text-indent 首行缩进

text-decoration: none 去除文本效果(去除超链接的下划线)

3.字体

font-family 文本字体

font-size 文本字体大小

4.对齐方式

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

left 把文本排列到左边

right 把文本排列到右边

center 把文本排列到中间

justify 实现两端对齐文本效果

5.display属性

display属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。

none 此元素不会被显示

block 此元素将显示为块级元素,此元素前后会带有换行符

6.浮动

float的属性有none、left、right。

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

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

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

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

7.盒子模型

border、padding、margin三个属性构成了盒子模型。

border     边框

   设置边框的颜色、样式、宽度

             border:颜色   样式   宽度

                例:border:red    solid  1px

    单独设置边框的宽度、颜色、样式

            border - width

            border - style

            border - color

  border - collapse

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

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

padding    内边距

设置元素所有内边距的宽度,或者设置各边上内边距的宽度。

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

td{  padding:15px;  }

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

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

margin  外边距

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

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

设置一个值:上右下左都一致

设置两个值:上下一致、左右一致

设置三个值:上右下,左和右一致

说明:auto:自动,可以理解为居中。

          margin:auto   auto:第一个auto表示上下外边距自动计算,第二个auto表示左右外边距自动计算。但是上下外边距在自动计算时不会自动生效,而左右外边距会生效,表现为居中状态。

猜你喜欢

转载自blog.csdn.net/weixin_64416967/article/details/122800260