12月第一周总结-CSDN博客

本文链接：https://blog.csdn.net/m0_64318269/article/details/121742897

初学CSS

基本选择器

    <title>基本选择器</title>
    <style>
        #red{
            color: red;
        }
        .blue{
            color: blue;
            font-size: 80px;
        }
    </style>
</head>
<body>
    <h1>回乡偶书</h1>
    <p id="red">少小离家老大回</p>
    <p>乡音无改鬓毛衰</p>
    <p class="blue">儿童相见不相识</p>
    <p class="blue">笑问客从何处来</p>
</body>
</html>

复合选择器

    <title>复合选择器</title>
    <style>
        .red{
            color: red;
        }
        h1.red{
            font-size: 50px;
        }
        h3,p,div,span{
            color: blue;
        }
    </style>
</head>
<body>
    <h1 class="red">这是h1</h1>
    <h2 class="red">这是h2</h2>
    <h3>这是h3</h3>
    <p>这是p</p>
    <div>这是div</div>
    <span>这是span</span>
    
</body>

关系选择器

    <title>关系选择器</title>
    <style>
        /* div紧跟下一级的span */
        div.box > span{ 
             color: red; 
        } 

        /* 选择div下的所有span */
        div span{
            color: blue;
        } 

        /* 选择p后紧跟的span */
        p + span{
            color: skyblue;
        }

        /* 选择p后所有的span */
        p ~ span{
            color: skyblue;
        }
        
    </style>
</head>
<body>
    <div class="box">
        我是一个div
        <p>我是一个p
            <span>我是p中的span</span>
        </p>
        <span>我是div中的span</span>
        <span>我是div中的span</span>
        <span>我是div中的span</span>
        <span>我是div中的span</span>
    </div>
</body>

属性选择器

    <title>属性选择器</title>
    <style>
        /* 选择所有p中带title标签的元素 */
        p[title]{
            color: skyblue;
        }

        /* 选择p后标签是titl=abc的元素 */
        p[title=abc]{
            color: skyblue;
        }

        /* 选择p中标签首位是abc的元素 */
        p[title^=abc]{
            color: skyblue;
        }

        /* 选择p中标签末位是abc的元素 */
        p[title$=abc]{
            color: skyblue;
        }

        /* 选择p中标签中带e的元素 */
        p[title*=e]{
            color: skyblue;
        }
    </style>
</head>
<body>
    <h1>回乡偶书</h1> 
    <p title="abc">少小离家老大回</p>
    <p title="abcdef">乡音无改鬓毛衰</p>
    <p title="helloabc">儿童相见不相识</p>
    <p>笑问客从何处来</p>
    <p>秋水共长天一色</p>
    <p>落霞与孤鹭齐飞</p>
</body>

伪类选择器

<title>伪类选择器</title>
    <style>
        /* 用于选择ul下第一个是li的元素 */
        ul > li:first-child{ 
            color: skyblue;
        } 

        /* 用于选择ul下最后一个是li的元素 */
        ul > li:last-child{
            color: skyblue;
        }

        /* ul下奇数个是li的元素 */
        ul > li:nth-child(2n+1){
            color: skyblue;
        }

        /* ul下第一个li元素 */
        ul > li:first-of-type{
            color: skyblue;
        }                          /* 这个是同类型的排序 */

        /* ul下除了第三个li的其他所有li元素 */
        ul > li:not(:nth-of-type(3)){
            color: skyblue;
        }                          /* 这个是否定伪类 */

        /* :link用于未访问过的链接 */
        a:link{
            color: skyblue;
        }                           

        /* :visited用于访问过的链接,    该伪类只能改颜色 */
        a:visited{
            color: red;
        }

        /* :hover用于表示被鼠标选中的元素的状态 */
        a:hover{
            color:springgreen;
        }

        /* :active用于鼠标点击时的状态 */
        a:active{
            color: violet;
        }
    </style>
</head>
<body>
    <!-- ul>li回车会自动生成ul标签内嵌套li标签 -->
    <ul>
        <span>我是第一个span</span>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
        <span>我是最后一个span</span>
        <br><br><br>
        <a href="http://www.baidu.com" target="_blonk">访问过的链接</a>
        <br><br><br>
        <a href="http://www.jingdong.com" target="_blonk">jingdong</a>

    </ul>
</body>

伪元素选择器

<title>伪元素选择器</title>
    <style>

        /* 指定p元素中字体大小 */
        p{
            font-size: 20px;
        }

        /* ::first-letter表示首字母 */
        p::first-letter{
            font-size: 80px;
        }

        /* ::first-line表示第一行 */
        p::first-line{
            background-color: yellow;
        }

        /* ::selection表示鼠标选中的元素 */
        p::selection{
            background-color: royalblue;
        }

        /* ::before元素的开始       **************重要 */
        div::before{
            content: 'L';
            color: red;
        }

        /* ::after元素的最后        **************重要 */
         div::after{
            content: 'L';
            color: red;
        }
    </style>

样式的继承

如下p标签下的元素包括p中span下的元素都会被选择

<title>样式的继承</title>
    <style>
        /* 继承只发生在祖先和后代中  */
        p{
            color: red;
        }
    </style>
</head>
<body>
    <!-- p元素中不能放块元素 -->
    <p>我是一个元素
        <span>
            我是p元素中的span
            <em>我是p中的span中的em</em>
        </span>
    </p>
</body>

盒子模型

<title>盒子模型</title>

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background: #bfa;
        
            border-width: 10px;      
             /* 边框的宽度   有默认值一般为三个像素 */
            /* 
            除了border-width还有一组
            border-(×××)-width
            ×××可以是：top right bottom left

            四个方向：上右下左
            三个值：上 左右 下；
            两个值：上下 左右；
            */
            /* border-color: red;        边框的颜色  也可同边框的第二种格式 */

            /*边框的样式 无默认值
            border-style: double;*/

            /* border-style 样式
            solid   表示实线
            dotted  点状虚线
            dashed  虚线
            double  双线 */

            /* 简写：*/
            /* 边框 */
            border:10px solid orange; 

            /* ************************************************ */
            /* 内边距
            padding-top 上
            padding-right 右
            padding-bottom 下
            padding-left 左 */

            /* padding-top: 100px;
            padding-right: 100px;
            padding-bottom: 100px;
            padding-left: 100px; */

            /* 简写和边框一样 */
            /* 内边距 */
            padding:10px 20px 30px 40px;

            /* margin-top: 100px;
            margin-right: 100px;
            margin-left: 100px;
            margin-bottom: 100px; 类似于内边距 */
            /* 外边距 */
            margin: 100px 100px 100px  100px;

            /* auto是指浏览器自动调整
            且width的值默认为是auto
            
            -如果将一个宽度和一个外边距设置为auto，则宽度调到最大，边距设置为0
            -如果将三个值都设置为auto，则外边距都是0，宽度最大
            -如果将两个外边距设置为auto，，宽度固定值，则会将外边距设置为相同的值
            利用这个使其居中*/
        }
        .box2{
            width: 100%;
            height: 100%;
            background-color: yellowgreen;
            }
    </style>

布局

<title>布局</title>
    <style>
       
        /* 
        overflow 来设置父元素如何处理溢出的子元素
        overflow-x:  水平
           overflow-y:  垂直
           overflow */
           
        /*
        visible 指默认值
        hidden 会将溢出内容裁剪不显示 
        scroll 生成两个滚动条
        auto根据需要生成滚动条 垂直或水平*/

           /* 行内元素的盒模型不影响布局 */

           /*
            display 用来设置元素显示的类型
            可选值：
                inline 将元素设置为行内元素
                block 将元素设置为块元素
                inline-block 将元素设置为行内块元素
                        行内块，即可以设置宽度和高度又不会独占一行 */

        /*
         visibility 用来设置元素的显示状态
            可选值：
                visible 默认值，元素在页面中正常显示
                hidden元素在页面中隐藏 不显示，但是依然占据页面的位置 */
        .box1{
            width: 300px;
            height: 300px;
            background-color: #bfa;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

默认样式

<title>默认样式</title>
    <style>
        body{
            margin: 0;
        }

        p{
            margin: 0;
        }

        ul{
            margin: 0;
            padding: 0;
            /* 去除项目符号 */
            list-style: none;
        }

        .box1{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <ul>列表项1</ul>
    <ul>列表项2</ul>
    <ul>列表项3</ul>
</body>