操作css样式-CSDN博客

本文链接：https://blog.csdn.net/weixin_44799698/article/details/103002864

css样式之属性操作

一、文本属性

1.text-align:cnter 文本居中

2.line heigth 垂直居中：行高，和高度对应

3.设置图片与文本的距离：vertical-align

4.text-decoration:none 去掉超链接下划线

5.要是给a标签修改颜色的时候，就定到a标签上，用继承有

时候是搞不定的因为继承的级别是很低的，如果a标签设置

了样式，是不会继承父亲的

6.首行缩进：text-indent:30px

7.font-style:oblique 或者italic…(设置字体的样式为斜体)

二.字体属性(type)

font-family(使用什么字体)

font-style(字体的样式，是否斜体)：normal/italic/oblique

font-variant(字体大小写)：normal/small-caps

font-weight(字体的粗细)：normal/bold/bolder/lithter

font-size(字体的大小)：absolute-size/relative-size/length/percentage

三、背景属性

1.background-color:背景颜色

2.background-image:url(‘11.jpg’); 背景图片链接

3.background-repeat:repeat-x; x轴平铺

4.background-repeat:no-repeat; 不重复

5.background-position:400px 200px 调整背景的位置（距左。距右）

6.background-position: center:center; 背景居中

简写：
background: url(‘11.jpg’) no-repeat center;

四.块属性(block)

边距属性：

margin-top(设置顶边距)

margin-right(设置右边距)

margin-bottom(设置底边距)

margin-left(设置左边距)填充距属性：

padding-top设置顶端真充距)

padding-right设置顶端真充距)

padding-bottom设置顶端真充距)

padding-left设置顶端真充距)

列表属性

去掉列表前面的标志：ul li{list-style:none;}
去掉列表前面的空格：ul{padding:0}

上面两行也可写成下面一行
去掉盒子上面的间隙：*{margin:0; padding :0;}

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li{
            font-family: 华文中宋;
            list-style: none; //去掉点
            /*list-style: circle;//空心圆*/
            /*list-style: disc;//实心圆（默认也是实心圆）*/
        }
        ul{
            padding: 0; //把字体移到前面

        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>第一章</li>
        <li>第二章</li>
        <li>第三章</li>
        <li>第四章</li>
    </ul>
</div>
</body>
</html>

五.边框属性(border)

border-top-width(顶端边框宽度)

border-right-width(右端边框宽度)

border-bottom-width(底端边框宽度)

border-left-width(d左边框宽度)

border-width(一次定义边框宽度)

border-color(设置边框颜色)

border-style(设置边框样式)

border-top(一次定义顶端各种属性)

border-right(一次定义右端各种属性)

border-bottom(一次定义底端各种属性)

border-left(一次定义左端各种属性)

图文混排：

width(定义宽度属性)

height(定义高度属性)

float(文字环绕在一个元素的四周)

clear(定义某一边是否有环绕)

六.display属性

display属性
1.将块级标签设置成内联标签：disply：inline;

2.将内联标签设置成块级标签：disply：block;

3.内联块级标签：像块级一样可设长宽，也可像内联一样在一行显示：

display:inline-block;

4.display:none; 吧不想让用户看到的给隐藏了（很重要的一个属性
）

5.visibility :hiddon；也是隐藏

**注意与visibility:hidden的区别：

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

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

项目符号和编号(list)

display(定义是否显示)

white-space(怎样处理空白部分)：normal/pre/nowrap

list-style-type(在列表前加项目符号)disc(圆点)/circle(圈)/square（方形）

/decimal（阿拉伯数字） /lower-roman(小写罗马数字 )/upper-roman(大写罗马数

字)/lower-alpha(小写英文字母)/upper-alpha(大写英文字母)/nore

list-style-tyle(在列表前加图案):/none

list-style-position(决定列表项中第二行的起邕位置)

list-style(一次性定义所有属性)

七、定位（positioning）即层属性

Type：设定对象的定位方式。

有三种方式：Absolute（绝对定位）、Relative（相对定位）、Static

（无特殊定位）。相对应的

Visibility：设定对象定位层的最初显示状态。有三种状态：Inherit（继承父层的显示属性）、

Visible（对象可视）、Hidden隐藏对象。相对应的 CSS属性是”visibility”。

Z-Index：设置对象的层叠顺序。编号较大的层会显示在编号较小的层上边。变量值可以是

正值也可以是负值。相对应的 CSS属性是”z-index”。

Overflow：设置如果层的内容超出了层的大小时如何处理。有四种处理方式：visible，增加

层的大小，从而将层的所有内容显示出来；hidden，保持层的大小不变，将超出层的内容剪裁掉；Scroll，总是显示滚动；Auto，只有在内容超出层的边界时才显示滚动条。相对应的

CSS属性是”overflow”。 Placement：设置对象定位层的位置和大小。可以分别设置 lef（t左

边定位）、top（顶部定位）、width（宽）、height（高）。相对应的 CSS属性分别是”left;top;

width;height”。Clip：定义定位层的可视区域。区域外的部分为不可视区，为透明的。可

以理解为在定位层上放一个矩形遮罩的效果。相对应的 CSS属性是”clip”。

八、扩展（Extensions）

Pagebreak：在打印的时候强迫在样式控制的对象前后换页。

Before：设置对象前出现的页分割符。设置为 always时，始终在对象之前插入页分割符。相

对应的 CSS属性是”page-break-before”。

After：设置对象后出现的页分割符。设置为 always时，始终在对象之后插入页分割符。相

对应的 CSS属性是”’>。