css基础篇

最新推荐文章于 2024-10-31 19:00:00 发布

Windstormm

最新推荐文章于 2024-10-31 19:00:00 发布

阅读量310

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_58833537/article/details/119115285

版权

CSS 层叠样式表
衣服颜色：红色

1.优先级
2.覆盖先定义规则
3.css的3种使用方法

二选择器
标签 id class （基本）90%
并集复合通配后代子代伪类属性兄弟

行内样式》行外样式

如何垂直居中
1.高度和行高一样
2.text-align:center

选择器代码实操如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/index.css" rel="stylesheet">
    <style>
        /*通配选择器，设置页面的默认样式（版本兼容性问题），作用覆盖页面所有元素*/
        *{
            margin: 0;
            padding: 0;
        }
        /*标签选择器*/
        div{
            width: 50px;
            height: 50px;
            border: 1px solid red;
        }
        /*id选择器*/
        #zixuan{
            background: blue;
        }
        /*class选择器*/
        .zhangsan{
            background: red;
        }
        /*并集选择器，其中逗号隔开的是不同的选择器，对于不同的选择器对应的元素操作*/
        #zixuan,.zhangsan{
            border: 5px solid black;
        }
        /*交集选择器，更加精准操作*/
        div.zhangsan1{
            background: greenyellow;
        }
        /*后代选择器（指定祖先，然后寻找后代）*/
        body img{
            width: 300px;
            height: 300px;
        }

        /*子代选择器（爸爸找孩子）*/
        div:nth-child(4)>img{
            width: 50px;
            height: 50px;
        }
        /*伪类选择器，这里的hover与active被称为伪元素，除此之外还有许多*/
        div:nth-child(4)>img:hover{
            width: 100px;
            height: 100px;
        }
         div:nth-child(4)>img:hover:active{
            width: 200px;
            height: 200px;
        }
        /*属性选择器，主要用于input*/
        input[type="text"]{
            border: 10px solid red;
        }
       /*兄弟选择器 用~（找的是五湖四海的兄弟）或用+（只能找后面的第一个兄弟） */
        span~#zixuan{
            width: 10px;
            height: 10px;
        }
        /*相邻选择器  只能是+，只能找后面的第一个兄弟*/
        #zixuan+#zixuan1{

            width: 50px;

            height: 50px;
        }
        span:nth-child(2)+#span1{
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="zixuan" ></div>
    <div id="zixuan1" class="zhangsan"></div>
    <span id="span">子轩</span>
    <div class="zhangsan1"></div>
    <div><img src="img/blog-1.jpg"></div>
    <div id="zixuan2" style="width: 100%;height: 100px"> <input type="text"></div>
<!--    <span id="span2"> 相邻选择器1</span>-->
<!--     <span>相邻选择器2</span>-->
<!--    <span id="span1">相邻选择器3</span>-->


</body>
</html>

文本内容修改代码实操如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--没有我搞不出来的设计图-->
    <style>
       .span{
           /*设置字体大小*/
           font-size:50px ;
           /*设置字体样式*/
           font-family: "楷体";
           /*设置字体粗细*/
           font-weight: lighter ;
           /* 设置字体类型，例如斜体等*/
           font-style: normal;
           /*设置字体颜色*/
           color: greenyellow;
       /*     文本操作     */
       /*设置文本大小写*/
           text-transform: lowercase;
       /*设置文本首行缩进，适用块状标签，遇到行级标签应该用块状标签包裹起来*/
           text-indent: 2em;
           /*换行*/
           white-space: normal;
           width: 50px;
           /*超出部分隐藏*/
           /*overflow: hidden;*/
          /*    字距*/
           letter-spacing: 10px;
       /*     行高*/
           line-height: 20px;
       }
        #bj{
            width: 400px;
            height: 400px;
            border: 2px solid;
            /*background-image: url("img/blog-1.jpg");*/
            /*background-repeat: no-repeat;*/
            /*background-size:center(50px 50px);*/
            /*background-position:center(right,left);*/

            background: url("img/blog-1.jpg") no-repeat center;
        }
    </style>
</head>
<body>
<span>111</span>
    <div class="span">
        <p>ABCDEFGhjkhj</p>

    </div>
<div style="width: 200px;height: 200px;border: 1px solid" >
    <span>111</span>
</div>
<!--<div><img src="img/blog-1.jpg" alt=""></div>-->
<div id="bj"></div>
</body>
</html>
![实操适用](https://img-blog.csdnimg.cn/67d140f8a42844ccbbb717606e1ccb38.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU4ODMzNTM3,size_16,color_FFFFFF,t_70#pic_center)