前端-常用CSS基础篇

CSS

一。简介

CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
样式对网页中元素位置的排版进行像素级精确控制

更多介绍请参考（介绍内容转自此博客）：https://i.cnblogs.com/posts?cateId=1939744

二。css的三种使用方式

<!--css使用的三种方式-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式学习</title>
<!--    第二种-->
    <style>
        .box2{
            color: aqua;
        }
    </style>
<!--    第三种-->
    <link rel="stylesheet" href="css/test02.css">
</head>
<body>
<!--1.在标签内使用style属性设置样式-->
<div class="box1" style="color: blueviolet">box1</div>

<!--2.在head内设置style标签设置属性-->
<div class="box2" id="box2">box2</div>

<!--3.link标签引入目录，在指定目录设置属性-->
<div class="box3">从各方面反馈的意见看，大家一致认为，在‘两个一百年’历史交汇点上，党的十九届五中全会重点研究‘十四五’规划问题并提出建议，将‘十四五’规划与2035年远景目标统筹考虑，对动员和激励全党全国各族人民，战胜前进道路上各种风险挑战，为全面建设社会主义现代化国家开好局、起好步，具有十分重要的意义</div>

<span>这个是span</span>
<br>
<a href="http://www.baidu.com" >百度</a>
<a href="http://www.taobao.com" name="淘宝">淘宝</a>
<a href="http://www.hao123.com" name="好123">好123</a>

<div class="box4">
    <ul>
        <li>222222</li>
        <li><p>jj</p></li>
        <li><a href="sllll">lll</a></li>
        <li><di>ss1111</di></li>
        <li><p>lllll</p></li>
    </ul>
</div>
</body>
</html>

第三种方式对应的css文件内容（调用方式）：

/*css选择器*/
/*!*通过标签选择，只要是span都会选择/*/
span{
    color: blue;
}

/*id选择器，前面加#*/
/*#box2{*/
/*    font: normal 36px/60px "Malgun Gothic";*/
/*}*/

/*类选择器，前面加.*/
.box1{
    font-weight: bold;
}

/*属性选择器,前面加标签名[属性名]:*/
a[name]{
    color: red;
}

/*层级选择器，类属性是box4都会生效*/
/*box4下的a标签设置颜色为红色*/
.box4 a{
    color: red;
}

.box4 p{
    color: blue;
}


/*组选择器*/
/*.box1,#box2,.box3{*/
/*    height: 300px;*/
/*    background: aqua;*/
/*}*/

/*伪选择器,可以百度：*/
.box1:hover{
    background: aqua;
}



三。css中设置文字的：大小，样式，背景、位置设置

.box2{
    /*文字水平居中*/
    /*text-align: center;*/
}
.box3{
    /*color: brown;*/
    /*字体大小*/
    /*font-size: 36px;*/
    /*字体加粗*/
    /*font-weight: bold;*/
    /*字体样式，默认为温软雅黑*/
    /*font-family: "Microsoft YaHei UI";*/
    /*行高*/
    /*line-height: 100px;*/
    /*字体大小、加粗、字体样式和行高可以一起设置*/
    /*font: bold 36px/100px "Microsoft YaHei UI";*/

    /*字体倾斜,不倾斜：normal 倾斜：italic*/
    /*font-style: normal;*/

    /*字体首行缩进*/
    /*text-indent: 20px;*/
}
/*给整个页面设置背景颜色*/
/*body{*/
/*    !*background: beige;*!*/
/*    !*通过16进制设置背景颜色*!*/
/*    !*background: #cccccc;*!*/
/*    !*rgb调整颜色*!*/
/*    !*background: rgb(255, 228, 181);*!*/
/*    !*调整背景透明度,0.5：代表透明度为0.5*!*/
/*    !*background: rgba(255, 228, 181, 0.5);*!*/
/*}*/

/*给整个页面设置背景图片，默认是repeat,x,y轴都平铺*/
/*body{*/
    /*background: url("../../frontpythontest/practicehtml/图片.jpg");*/
    /*背景平铺方式*/
    /*background-repeat: repeat;*/
    /*background-repeat: no-repeat; --不设置平铺*/
    /*background-repeat: repeat-y; --y轴平铺*/
    /*background-repeat: repeat-x; --y轴平铺*/



    /*背景定位*/
    /*background-repeat: no-repeat;*/
    /*顶部居中*/
    /*background-position: top;*/
    /*底部居中*/
    /*background-position: bottom;*/
    /*水平和垂直方向都居中*/
    /*background-position: center;*/
    /*靠左居中*/
    /*background-position: right;*/
    /*靠右居中*/
    /*background-position: left;*/
    /*百分比居中*/
    /*background-position: 50% 80%;*/
    /*像素值设置*/
    /*background-position: 100px 200px;*/


    /*固定背景*/
    /*background-attachment: fixed;*/


    /*设置背景大小*/
    /*通过像素设置*/
    /*background-size: 200px 100px;*/
    /*默认大小，原图片多大就是多大*/
    /*background-size: auto;*/
    /*百分比大小*/
    /*background-size: 20% 50%;*/
    /*背景填满容器*/
    /*background-size: cover;*/

三。css中设置 模型大小及边距样式

/*模型框：边框：border[实线：solid 双线：double ，点线：dotted] ;padding 内边距；外边距：margin（上下边距会融合，边距以最大的边距为准 例子(两个模型一上一下)：第一个边距为50px，第二为30ps，第一个与第二个模型的边距为50px）*/
.box1{
     500px;
    height: 200px;
    background: aqua;
    padding: 20px;
    border: solid 2px red;
    margin: 50px;
}

.box2{
     500px;
    height: 200px;
    background: #8000ff;
    padding: 20px;
    border: double 3px red;
    margin: 50px;
}

.box3{
     500px;
    height: 200px;
    background: #ff8400;
    /*全部边距都是20px*/
    /*padding: 20px;*/
    /*四个方向分开设置*/
    /*padding: 20px 10px 5px 1px;*/
    /*传两个值，第一个值代表上、下，第二值代表左右*/
    padding:20px 10px;



    /*左边生效*/
    /*border-left: dotted 5px red;*/
    /*下方生效*/
    /*border-bottom: dotted 5px red;*/
    /*右边生效*/
    /*border-right: dotted 5px red;*/
    /*上方生效*/
    border-top: dotted 5px red;


    /*全部生效*/
    /*margin: 50px;*/
    /*全部边距都是20px*/
    /*margin: 20px;*/
    /*四个方向分开设置*/
    /*margin: 20px 10px 5px 1px;*/
    /*传两个值，第一个值代表上、下，第二值代表左右*/
    margin:20px 10px;
}

四。css设置模型的定位显示方式

/*设置水平居中*/
.box1{
     500px;
    height: 200px;
    background: aqua;
    /*设置盒模型水平居中：左右的外边距设为auto*/
    /*margin: 50px auto;*/
    /*margin: 50px;*/
}

.box3{
     500px;
    height: 200px;
    background: #8000ff;
    padding: 20px;
    border: double 3px red;
    /*margin: 50px;*/

    /*相对定位,在父级元素内进行相对定位*/
    /*position: relative;*/
    /*left: 300px;*/
    /*top: 300px;*/

    /*绝对定位，在父级元素内进行绝对定位*/
    position: absolute;
    left: 50px;
    top: 50px;


}

.box2{
     500px;
    height: 200px;
    background: #ff8400;
    padding:20px 10px;
    border-top: dotted 5px red;
    /*margin:20px 10px;*/
}

.box4{
     500px;
    height: 200px;
    background: #ff8400;

    /*固定定位*/
    position: fixed;
    top: 100px;
    left: 300px;
}

.box{
    position: absolute;
    left: 200px;
     600px;
    height: 800px;
    background: bisque;
}

五，css设置模型的 内容样式

/*浮动四个盒子展示为一行*/
.box1{
     200px;
    height: 200px;
    background: aqua;
    float: right;
    /*超出盒子外的内容隐藏*/
    overflow: hidden;
}

.box2{
     200px;
    height: 200px;
    background: #8000ff;
    float: left;
/*隐藏，display: none*/
    display: none;

}

.box3{
     200px;
    height: 200px;
    background: #ff8400;
    float: left;
    /*设置边框样式为圆角*/
    border: solid red;
    border-radius: 5px;
}

.box4{
     200px;
    height: 200px;
    background: #ff8400;
    float: left;
}

.box5{
     200px;
    height: 200px;
    background: #ff8400;
    float: left;
}

.box6{
     200px;
    height: 200px;
    background: #ff8400;
    float: left;
}

.box7{
     200px;
    height: 200px;
    background: #ff8400;
    float: left;
}

.box8{
     200px;
    height: 200px;
    background: #ff8400;
    float: left;
}

爱折腾的小测试