Web前端开发-CSS核心属性_前端开发属性-优快云博客

本文链接：https://blog.youkuaiyun.com/viewerlin/article/details/80016699

本文详细介绍了CSS中的核心属性，包括宽度、高度、背景、字体、文本对齐方式等，并通过实例展示了这些属性如何应用于HTML元素中，同时涉及了浮动及盒子模型的相关概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web前端开发，自学笔记整理

CSS核心属性

1.核心属性
01-CSS核心属性.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS核心属性</title>
        <style type="text/css">
            .test1 {
                /*1.宽度*/
                width: 400px;

                /*2.高度*/
                height: 300px;

                /*3.背景*/
                /*颜色单词*/
                /*background: red;*/
                /*颜色16进制*/
                /*background: #71d232;*/
                /*颜色三原色RGB a表示透明度*/
                /*background: rgb(26,162,97);*/
                background: rgba(26,162,97,1);

                /*4.字体颜色*/
                color: white;

                /*5.字体大小（默认16px）*/
                font-size: 30px;

                /*6.字体类型*/
                font-family: "微软雅黑","宋体";

                /*7.字体加粗
                    bold/bolder/100-900（常规500）/normal 
                */
                font-weight: normal;

                /*8.字体倾斜*/
                font-style: italic;

                /*9.大小写
                    small-caps 
                    all-small-caps
                */
                font-variant: all-small-caps;

                /*10.水平对齐方式 left/right/center/justify */
                text-align: justify
            }

            .test2 {
                width: 150px;
                height: 50px;
                background: red;
                color: white;
                /*11.垂直对齐方式 top/middle/bottom*/
                /*vertical-align: middle;*/
                /*行高
                    多行：行间距
                    单行：位置 (行高=容器高度 居中) 
                */
                line-height: 50px;
            }
            .main {
                width: 150px;
                height: 150px;
                /*倍行高
                    倍数和字体大小有关，如果字体为13px，2倍行高就是26px 
                */
                line-height: 2em;
                /*line-height: 30px;*/
            }
            ul {
                background: lightblue;
                /*12.无序列表样式*/
                /*简写*/
                /*list-style: none;*/
                list-style: circle inside;

                /*显示图片*/
                /*list-style-image: url(img.png);*/

                /*列表符号位置 inside/outside*/
                /*list-style-position: outside;*/

                /*disc实心圆、circle 空心圆、square实心方块、none不显示*/
                /*list-style-type: square;*/
            }
            li {
                line-height: 30px;
            }

            .test3 {
                /*13.文本属性*/
                /*line-through删除线*/
                /*text-decoration: line-through;*/

                /*underline下划线*/
                /*text-decoration: underline;*/

                /*overline上划线*/
                text-decoration: overline;
            }
            a {
                /*none 去掉划线*/
                text-decoration: none;
            }

            span {
                font-size: 25px;
            }
            .car {
                color: red;
            }
            .price-1 {
                color:red;
                text-decoration: line-through;
            }
            .price-2 {
                color: red;
                text-decoration: line-through;
            }
            .price-3 {
                color: purple;
                text-decoration: overline;
            }
            .phone {
                font-style: italic;
                font-size: 20px;
                text-decoration: underline;
            }

            .box {
                width: 300px;
                height: 300px;
                /*14.背景样式*/
                /*背景颜色*/
                background-color: red;
                /*背景图片*/
                background-image: url(qq.png);
                /*背景平铺方式
                    repeat 平铺（默认）
                    no-repeat 不平铺 
                        repeat-x 水平方向平铺
                        repeat-y 垂直方向平铺
                */
                background-repeat: no-repeat;
                /*背景大小*/
                background-size: 100px 100px;
                /*背景位置
                    水平方向：left/center/right/具体数值
                    垂直方向：top/center/bottom/具体数值

                */
                background-position: center;
            }
        </style>
    </head>
    <body>
        <p class="test1">
            你可以不聪明，但不可以不努力！
            hello WORLD！
        </p>
        <div class="test2">HTML</div>
        <p class="main">
            你可以不聪明，但不可以不努力！你可以不聪明，但不可以不努力！你可以不聪明，但不可以不努力！
        </p>
        <br />
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
        <br />
        <p class="test3">HTML</p>
        <a href="01-CSS核心属性.html">谷歌一下</a>
        <br />
        <div class="test4">
            <span class="car">特斯拉电动跑车</span>新上市，不要<span class="price-1">99</span>，只要<span class="price-2">69</span>，VIP价<span class="price-3">59</span>，心动不如行动，赶快拿起电话预约吧(<span class="phone">82008820</span>), 电话预约购买赠送充电卡一张。
        </div>
        <br />
        <div class="box"></div>
    </body>
</html>

2.浮动
02-浮动.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动</title>
        <style type="text/css">
            /*浮动存在的问题：层级、大小*/
            .box {
                width: 299px;
                height: 300px;
                background: red;
            }
            .view {
                width: 100px;
                height: 100px;
            }
            .view1 {
                background: purple;
                /*float: left;*/
                float: right;
            }
            .view2 {
                background: lightblue;
                /*float: left;*/
                float: right;
            }
            .view3 {
                background: green;
                /*float: left;*/
                float: right;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="view view1"></div>
            <div class="view view2"></div>
            <div class="view view3"></div>
        </div>
    </body>
</html>

3.盒子模型
03-盒子模型.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                background: red;

                /*padding 内边距
                    一般用于调整盒子内容位置 
                */
                /*padding-left:20px;
                padding-top: 20px;
                padding-right: 20px;
                padding-bottom: 20px;*/

                /*一个值时：四个方向*/
                /*padding:30px;*/
                /*两个值时：上下、左右*/
                /*padding:30px 50px ;*/
                /*三个值时：上、左右、下*/
                /*padding:20px 30px 10px;*/
                /*四个值时：上、右、下、左*/
                padding: 10px 20px 30px 40px;

                /*border 边框*/
                /*solid实线，dashed虚线，dotted点状线，double双线，none无*/
                border-style: double;
                border-width: 10px;
                border-color: blue;

                /*margin 外边距
                    一般用于调整盒子位置 
                */
                /*margin-left: 30px;
                margin-top: 30px;
                margin-right: 30px;
                margin-bottom: 30px;*/

                /*margin: 10px;
                margin: 10px 20px;
                margin: 10px 20px 30px;*/
                margin: 10px 20px 30px 40px;    

            }
        </style>
    </head>
    <body>
        <div class="box">

        </div>
    </body>
</html>