CSS基础自学周报--24.3.6-CSDN博客

本文链接：https://blog.csdn.net/new_zh0ng/article/details/136512715

一，完成事项

css基础学习

二，未完成事项

ctfshow

三，下周待做

PHP基础学习

JavaScript

四，本周学习内容

1，CSS

样式，选择器

ID选择器
#c1{

}
<div id='c1'>xxx</div>
类选择器
.c1{

}
<div class='c1'>xxx</div>
标签选择器
筛选全部div标签内容，并将其替换为该样式
div{

}
<div>xxx</div>
后代选择器
<head>
    <style>
        定义一个格式
        .aa > a{
            color:pink;
        }
        这样会优先搜索aa标签，其次替换带有aa标签的内容样式
    </style>
</head>
<body>
    <div class="aa">
        <a>xxx</a>
    </div>
</body>

将样式放在css文件内，用时引用文件

.c1{
    color: blue;
}
/*新建css文件，之后将.c1放在css文件中，用的时候直接引用即可*/
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/q.css">
</head>
<body>
    <span class="c1">
        原神启动！！！
    </span>
</body>

多样式同时引用

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cs1{
            color: blueviolet !important;
    /*在cs1的color后加！important可以防止cs2的color替换*/
            border: black;
        }
        .cs2{
            color: black;
  	/*同时使用多个样式时，若两个样式具有同样的标签，会使用下面的cs2，与class中的顺序无关*/
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div>
        <h1 class="cs2 cs1">
            登陆失败
        </h1>
    </div>
</body>

.c2{
    height: 200px;
    width: 50%;
}
.c3{
    height: 50%;
    width: 50%;
}



<div class="c2">父级标签
    <div class="c3">子级标签
        原神启动！
    </div>
    <div class="c3">
        崩铁启动！
    </div>
</div>
父级高度不可用%，子级可用

既具备块级标签，有具备行内标签特点

<style>
        .qq{
            display: inline-block;/*这里可以影响块级标签和行内标签的特征*/
            height: 100px;
            width: 100px;
            color: blueviolet;
            border: 1px solid red;
        }
</style>

<span class="qq">
    乐
</span>
<span class="qq">
    乐
</span>

<div style="display: inline（或者inline_block）">xxx</div>
<span style="display: block（或者inline_block）">xxx</span>

字体

<style>
        .csgo{
            color:	#4169E1;   /*RGB色标颜色*/
            font-size: 60px;   /*字体大小*/
            font-weight: 400;  /*字体粗细*/
            font-family: Microsoft YaHei UI;  /*字体格式*/
        }
</style>

<span class="csgo">
        原神启动!!!
</span>

文字对齐
<style>
	.ysqd{
            height: 200px;
            width: 20%;
            border: 1px solid #4169E1;
            text-align: center;  /* 水平方向居中 */
            line-height: 100px;  /*  按100px的高度，竖直方向居中，且只能有单行数据 */
        }
</style>
eg:
<style>
    body{
      margin: 0;
    }
    .header{
      background-color: black;
    }
    .header .lift{
      float: left;
      color: whitesmoke;
      height: 30px;
      line-height: 30px;
      margin-left: 30px;
    }
    .header .right{
      float: right;
      color: whitesmoke;
      height: 30px;
      line-height: 30px;
      margin-right: 30px;
    }
  </style>
</head>
<body>
    <div class="header">
        <div class="lift">
          左
        </div>
        <div class="right">
          右
        </div>
      <div style="clear: both"></div>
    </div>
</body>

浮动

.majiang{
            float: right;
            width: 33%;
            height: 200px;
            border: 1px solid seagreen;
        }

<span>左</span>
<span style="float: right" class="ysqd">右</span>
<div class="majiang">	<!--div被浮动后，将会具有span的特性-->
    麻将					
</div>

<!--大量div，可能会脱离文档流-->
<div style="background-color: aqua" >
    <div class="majiang" style="background-color: brown">1</div>
    <div class="majiang">1</div>
    <div class="majiang">1</div>
    <div class="majiang">1</div>
    <div class="majiang">1</div>
    <div class="majiang" style="background-color: crimson">1</div>
*** <div style="clear: both"></div><!--去除浮动，固定位置，撑起父级标签背景，但子级标签背景仍会覆盖父级标签-->
</div>
<div>
    hello
</div>

边距

内边距

<div style="padding: 30px 10px 20px 15px">
    上右下左，顺时针顺序
</div>
<div style="padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px">
    上边距，左边距，右边距，下边距
</div>

外边距

<div style="margin-top: 20px;
            margin-left: 20px;
            margin-right: 20px;
            margin-bottom: 20px;">
</div>

边距应用

.a1{
        width: 1226px;
        margin: 0 auto;
    }

<div class="header">
          <div class="a1">
            <div class="lift">
              
            </div>
            <div class="right">
              右
            </div>
          <div style="clear: both"></div>
          </div>
</div>
<!--顶部栏文字居中显示-->

居中

文本居中

xxxxxxxxxx <div style="width: 200px;text-align: center">    123321<!--文本在区域中居中--></div>

区域居中

<div style="background-color: #4169E1;
    height: 900px;
    width: 1000px;
margin:auto"></div>