CSS属性的那些事儿

最新推荐文章于 2024-02-21 14:37:32 发布

刘大哥就是6

最新推荐文章于 2024-02-21 14:37:32 发布

阅读量308

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/tony_yang6/article/details/106222127

版权

笔记专栏收录该内容

99 篇文章 0 订阅

订阅专栏

1.文字属性

1.font-size：字体大小

2.font-family：文字字体，例如：楷体，微软雅黑

3.font-style：斜体字

normal：默认值正常显示

italic 斜体

4. font-weight：文本字体的粗细 bold

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-文字属性</title>
    <style>
        div {
            /* 字体大小 */
            font-size: 30px;
            /* 字体样式 */
            font-family: 楷体;
            /* 斜体 italic 默认 normal正常显示*/
            font-style: italic;
            /* 加粗字体 */
            font-weight: bold;
        }
    </style>
</head>
<body>
<div>
    11111111111
</div>
</body>
</html>

2.文本属性

1.color 文本颜色

2.text-decoration：

none：文本什么标记都没有

underline：下划线

overline：上划线

line-through：删除线

blink

3.text-indent：文本缩进

4.text-align：

文本对齐方式，center，left，right

5.line-height：行高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1 {
            font-size: 30px;
            color: red;
            text-decoration: underline;
        }

        #id2 {
            font-size: 30px;
            color: blueviolet;
            text-decoration: line-through;
            text-indent: 2em;
            line-height: 100px;
        }

    </style>
</head>
<body>
<div id="id1">
   121211！！！
</div>
<div id="id2">
    预111！！！
</div>
</body>
</html>

3.背景属性

1.background-color：背景颜色，默认是透明

2.background-img：url("图片路径")可以是网络地址，也可以是本地图片

3.background-repeat：重复方式

默认情况下是全屏平铺

repeat-x 水平方向平铺

repeat-y 垂直方向平铺

no-repeat 显示一张

4.background-position：背景图片的位置 top left bottom right

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>11-背景属性</title>    <style>        body {            /*background-color: #7c1823;*/            background-image: url("img/QQ图片20200326112539.png");            background-repeat: no-repeat;            /* 50px 100px 从左上角，50px是水平，100px垂直 */            background-position: -50px -100px;            /*background-position-x: 100px;*/            /*background-position-y: 100px;*/        }    </style></head><body></body></html>

4.列表属性

list-style-type:列表标记样式 disc none square circle 
list-style-image:url("图片地址") 列表图片
list-style-position:inside 图片内部展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-列表属性</title>
    <style>
        li {
            font-size: 30px;
            /*list-style-type: none;*/
            list-style-image: url("img/QQ图片20200326112539.png");
            list-style-position: inside;
        }
    </style>
</head>
<body>
<ul>
    <li>奥1</li>
    <li>武大郎</li>
    <li>罗11</li>
    <li>11</li>
    <li>222</li>
</ul>
</body>
</html>

5.尺寸属性

width：像素 px

height：像素 px

6.显示属性

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

7.float浮动属性

HTML页面中所有元素的解析过程是存在文档流操作的，HTML页面解析从上至下，从左至右依次完成，如果元素使用了float浮动操作，会脱离文档流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-浮动float属性</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin-right: 20px;
            background-image: url("img/QQ图片20200326112539.png");
            background-repeat: no-repeat;
        }

        .float-class {
            float: left;
        }

        /*#id1 {*/
        /*    float: left;*/
        /*}*/

        /*#id2 {*/
        /*    float: left;*/
        /*}*/
    </style>
</head>
<body>
<div style="width: 1200px; height: 200px;">
    <div class="float-class" style="background-color: red"></div>
    <div class="float-class" style="background-color: yellow"></div>
    <div class="float-class" style="background-color: blue"></div>
    <div class="float-class" style="background-color: green"></div>
    <div class="float-class" style="background-color: paleturquoise"></div>
</div>

<div style="width: 1200px; height: 200px; margin-top: 20px">
    <div class="float-class" style="background-color: red"></div>
    <div class="float-class" style="background-color: yellow"></div>
    <div class="float-class" style="background-color: blue"></div>
    <div class="float-class" style="background-color: green"></div>
    <div class="float-class" style="background-color: paleturquoise"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-list列表float浮动</title>
    <style>
        ul {
            list-style-type: none;
        }

        .float-left {
            float: left;
        }

        .float-right {
            float: right;
        }
    </style>
</head>
<body>
<ul style="float:left;">
    <li class="float-left">JavaEE&nbsp;</li>
    <li class="float-left">HTML5&nbsp;</li>
    <li class="float-left">Python&nbsp;</li>
    <li class="float-left">C/C++&nbsp;</li>
    <li class="float-left">C#&nbsp;</li>
</ul>
<ul style="float:right;">
    <li class="float-left">Perl&nbsp;</li>
    <li class="float-left">Swift&nbsp;</li>
    <li class="float-left">OC&nbsp;</li>
    <li class="float-left">PHP&nbsp;</li>
    <li class="float-left">JavaScript&nbsp;</li>
</ul>
</body>
</html>

8.定位属性

相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-相对定位</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }

        #id1 {
            /* 相对定位，相对于原本位置的定位 */
            position: relative;
            /*left: 200px;*/
        }
    </style>
</head>
<body>
<div style="background-color: red">我是一个参照物</div>
<div id="id1" style="background-color: green">这里要进行相对定位
    <div style="background-color: yellow; width: 100px; height: 100px; position: relative; left: 150px;"></div>
</div>
<div style="background-color: red">我是一个参照物</div>


</body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-绝对定位</title>
    <style>
        #outer {
            position: absolute;
            left: 100px;
        }

        #inner {
            /* 绝对定位 */
            position: absolute;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
<div id="outer" style="background-color: red; width: 200px; height: 200px"></div>
<div id="inner" style="background-color: yellow; width: 100px; height: 100px;"></div>
</body>
</html>

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17-固定定位</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }

        #left {
            background-color: red;
            position: fixed;
            top: 0;
            left: 50px;
        }

        #right {
            background-color: green;
            position: fixed;
            bottom: 0;
            right: 50px;
        }
    </style>
</head>
<body>
<div id="left">帕萨特撞断A柱</div>
<div id="right">丰田机油增多</div>
<p>小刘同学</p>

</body>
</html>