其他分享
首页 > 其他分享> > 小白学前端——CSS核心属性

小白学前端——CSS核心属性

作者:互联网

01.文本相关属性


文本相关属性包括字体相关属性以及文本相关属性。以下用脑图写出基本的一些属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0%;
            margin: 0%;
        }
        h1{
            color: white;
            background-color: #808080;
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 25px;
           
        }
        p{
            width:500px ;
            text-indent: 2em;
            text-align: justify;
            line-height: 30px;
        }
        b{
            font-size: 20px;
        }
        div1{
            color: #ff0000;
        }
    </style>
</head>
<body>
    <h1>千峰简介</h1>
    <p>
        <b>北京千锋互联科技有限公司(简称千锋) </b>成立于2011年1月。公司总部位于北京,目前已在 <div1>深圳、上海、郑州、广州、大连、武汉、成都、西安、杭州、青岛、重庆、长沙、哈尔滨、南京、太原 </div1>建立分公司。
    </p>
    <p>
        千锋旗下现有 <b>教育培训、人才服务、项目研发、创业孵化</b>等业务。 教育培训业务主要为大学生、企业提供技术培训服务;人才服务业务主要为企业提供优秀的互联网研发人才; 项目研发业务主要为企业提供APP解决方案及APP项目研发; 创业孵化业务为有创业梦想的学员设立,为其提供创业辅导及天使投资等服务。

    </p>
    <p>
        千锋秉承着 <div1>“用良心做教育” </div1>的理念踏踏实实的做事, <div1>创办7年,现已成为业内口碑好、规模大、教学强的移动互联网研发培训机构。</div1> 目前累计与国内 <b>超过8200多家</b> IT相关企业建立人才输送合作,与 <b>562所大学</b> 建立实训就业合作,每年为中国IT企业输送上万名移动开发工程师。计划未来5年内实现年营收过10亿,为中国教育行业贡献一份力量。
    </p>
</body>
</html>

02.列表相关属性


举例代码如下: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            list-style-type:circle;
            list-style-image: url(icon3.jpg);
            list-style-position: inside;
            /* list-style: none; */
            /* background-color: burlywood; */
            background-image: url(1.jpg);
            /* background-repeat:repeat-y; */
            /* background-position: left; */
            background-attachment:fixed;
        }
    </style>
</head>
<body>
    <ul class="div1">
        <li>放松再慢慢升空</li>
        <li>被窝里做一个梦</li>
        <li>外面的噪音太多</li>
        <li>外面的噪音太多</li>
        <li>外面的噪音太多</li>
        <li>外面的噪音太多</li>
        <li>外面的噪音太多</li>
    </ul>
</body>
</html>

03.背景相关属性


 注意背景属性也是可以简写的,但是不强制要求顺序。

在设置背景图片位置时,如果只有一个方位或者一个px值,只能控制水平位置那么另外一个则默认为中间值。

当有一个位置为top,bottom时,另一个值不可以为这两个。

举例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100%;
            height: 800px;
            /* background-color: thistle;
            background-image: url(img/pic.jpg);
            background-repeat: no-repeat;
            background-position: left center;
            background-attachment: fixed; */
            background: violet url(img/pic.jpg ) no-repeat 50px ;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

附练习代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
       
        div{
            
            background-size: 200% 200%;
            height: 1200px;
            background-attachment: fixed;
            background-position: center center;
            overflow: hidden;

        }
        .box1{
            background-image: url(img/bg1.png);
        }
        .box2{
            background-image: url(img/bg2.png);
        }
        .box3{
            background-image: url(img/bg3.png);
        }
        .box4{
            margin-top: 0;
        }
        p{
            height: 200px;
            width: 100%;
            /* line-height: 200px; */
            text-align: center;
            background-color: hsla(0, 0%, 100%, 0.8);
            margin-top: 200px;
        }
        span{
            font-size: 30px;
            font-weight: bold;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>
            <span>Text information1</span>
        </p>
    </div>
    <div class="box2 ">
        <p class="box4">
            <span>Text information2</span>
        </p>
    </div>
    <div class="box3 ">
        <p class="box4">
            <span>Text information3</span>
        </p>
    </div>
</body>
</html>

标签:url,前端,height,color,小白学,background,image,CSS,属性
来源: https://blog.csdn.net/m0_48353529/article/details/118766471