第二节常用标签的属性

最新推荐文章于 2022-12-10 15:24:13 发布

YuanSZhen

最新推荐文章于 2022-12-10 15:24:13 发布

阅读量187

点赞数

分类专栏： HTML前端开发

本文链接：https://blog.csdn.net/qq_39432774/article/details/75091316

版权

HTML前端开发专栏收录该内容

25 篇文章 0 订阅

订阅专栏

2基础属性

属性名:属性值;

background-color:red；

background-color:red;

font-size:24px;

}

2.1 字体相关属性

font-family:字体名称

font-size:字体大小

font-style:字形（斜体等）

font-variant:字体变化（如大写）

font-weight:字体粗细

p{
    font-family:楷体;
    font-size:60px;
    font-style:italic;
    font-variant:small-caps;
    font-weight:100;

}

可以简写，书写顺序

font-style font-variant font-weight font-size font-family

前面三个可缺省，使用默认值，font-size和font-family必须指定值。

这种书写方式更加简洁

p{
font:60px楷体;
}

2.2 文本相关属性

文本相关属性主要包括颜色、对齐方式、修饰效果等。

color：设置文本的颜色

text-decoration:

none：默认值，没有装饰效果

underline：加下划线

overline：加上划线

line-through：加删除线

text-shadow：增加阴影，比如text-shadow:-5px -10px gray;的含义是定义一个灰色的背景，其水平方向上左移5px，垂直方向上上移10px。

direction：

ltr:自左至右；rtl:自右至左

text-align:文本对齐方式

left 左对齐

right 右对齐

center 居中对齐

justify 两端对齐

vertical-align：文本垂直对齐方式

top 靠上对齐

bottom 靠下对齐

middle 垂直居中对齐

text-indent:文本缩进

letter-spacing:字符之间的间距

word-spacing:字（单词）间距

line-height:设置行高，实际上是调整行间距

2.3 背景相关属性

body{
    background-color:#37ff68;
    background-image:url("../pic/js.jpg");
    background-repeat:no-repeat;
    background-position:bottom;
}

background-color:背景色

background-image:设定背景图片，需要设置图片的url地址

background-repeat:图片的复制选项

repeat：在水平和垂直两个方向上进行复制

no-repeat:不复制

repeat-x:在水平方向上复制

repeat-y：在垂直方向上复制

也可以将这一组属性值封装到一个属性background中，书写顺序是：

背景色background-color

背景图片background-image

重复方式background-repeat

位置backgroud-position

表达更加简洁

background: green url("../pic/js.jpg")no-repeat right top;

2.4 尺寸相关属性

height:高度

width:宽度

div{
    width:200px;
    height:200px;
    background-color:red;
}

max-width:最大宽度

max-height：最大高度

min-width：最小宽度

min-height：最小高度

2.5 显示相关属性

隐藏元素的方法：

（1）visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在；

（2）display：none，不仅隐藏内容，且不占位置

div{
    height:100px;
    /*visibility:hidden;*/
    display: none;
}

display可以设置元素的显示模式

inline:将块级元素以内联元素形式显示，此时width和height属性无效，其空间取决于元素的内容。

inline-block: 将块级元素以内联元素形式显示,同时兼具块级元素的某些特征，比如可以使用width和height设置所占位置大小。

li{
    /*display:inline;*/
    display:inline-block;
    width:200px;
    background-color:blueviolet;
}
span{
    display:block;
}

也可以将内联元素以块级元素形式来显示，即display:block。

2.6 盒子模型

margin：外边距

margin-top、margin-right、margin-bottom、margin-left

使用方式

（1）margin:30px;表示上下左右外边距都未30px；

（2）margin-left：30px；单独设置上下左右外边距

（3）margin：10px 20px 30px 40px；分别设置上右下左四个边距为10px 20px30px 40px

padding:内边距

也有上下左右边距，和margin类似，不再赘述。

border:边框

border-width: 边框宽度;

border-style: 边框线条类型;

border-color: 边框的颜色;

word中设置边框的操作

也可以使用更优化的书写方式

border:10px dashed blue;

outline：轮廓线，用法同border

2.7 定位

定位方式有：static、fixed、relative、absolute。

static 静态定位（默认）

无定位，元素正常出现了流中，不受left、right、top、bottom属性的影响。

div{
    width:200px;
    height:200px;
    background-color:red;
    position:static;
}

显示效果默认

fixed

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:200px;
            height:200px;
            background-color:red;
        }
        #div2{
            width:200px;
            height:200px;
            background-color:greenyellow;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

显示效果为上红下黄

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:200px;
            height:200px;
            background-color:red;
            position:fixed;
            left:30px;
            top:20px;
        }
        #div2{
            width:200px;
            height:200px;
            background-color:greenyellow;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

从结果可以看出，fix定位会将元素从流中“摘”出来单独进行定位，其定位取决于left、top。

重新定位之后可能会出现重叠，通过z-index可以调整其顺序，但是静态定位z-index无效。

relative

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:200px;
            height:200px;
            background-color:rgba(255,0,0,1);
        }
        #div2{
            width:200px;
            height:200px;
            background-color:greenyellow;
            position:relative;
            top:20px;
            left:30px;
        }
        #div3{
            width:100px;
            height:100px;
            background-color:aqua;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

显示结果为上红覆盖

从结果可以看出，相对定位是从原有位置进行位移，但并不影响后续元素的位置。

absolute 绝对定位

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:200px;
            height:200px;
            background-color:rgba(255,0,0,1);
        }
        #div2{
            width:200px;
            height:200px;
            background-color:greenyellow;
            position: absolute;
            top:20px;
            left:30px;
        }
        #div3{
            width:100px;
            height:100px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

从结果可以看出：绝对定位的元素将从流中被“摘”出来，依靠left和top属性进行定位。

与fixed类似，但是参照物不同

fixed参照根元素（html）

absolute参照父容器

YuanSZhen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二节常用标签的属性

2基础属性属性名:属性值;background-color:red；p{ background-color:red; font-size:24px;}2.1 字体相关属性font-family:字体名称font-size:字体大小font-style:字形（斜体等）font-variant:字体变化（如大写）font-weight:字体粗
复制链接

扫一扫