0922css学习笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaobai_learning/article/details/126978523

这篇博客介绍了CSS中的颜色取值，如通过颜色名称、RGB、十六进制等设置背景色。讲解了如何使用margin: 0 auto实现元素水平居中，并展示了两个案例，一个是新闻页面布局，另一个是商品展示布局。此外，还详细阐述了CSS的选择器用法，包括后代选择器、子代选择器、并集选择器、交集选择器和伪类选择器。最后，简要提到了Emmet语法和背景属性的运用，如背景色、背景图、平铺、位置和综合设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习内容参考：CSS基础-16-拓展-颜色取值_哔哩哔哩_bilibili

预计学习内容p59---p86,实际学习内容：p59---76

评价：课多难完成

p60:颜色取值

了解

p61:标签居中margin:0 auto

其中0表示上下，auto表示左右

<style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            margin : 0 auto;
        }
    </style>




    <div>

    </div>

p62-63:案例1

<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: 800px;
            height: 600px;
            background: whitesmoke;
            margin: 0 auto;
        }
        
        span{
            text-align: center;
        }
        .center{
            text-align: center;
        }
        a{
            text-decoration:none;
        }
        .suojin{
            text-indent: 2em;
        }
        .color1{
            color: #808080;
        }
        .color2{
            color: #87ceeb;
            font-weight: 700;
        }

    </style>
</head>
<body>

    <div>
        <h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
        <p class="center">
            <span class="color1">2077年01月28日14:58</span>
            <span class="color2">新浪科技</span>
            <a href="#">收藏本文</a>
        </p>
            
        <hr>
        <p class="suojin">
        1969年,珍宝岛事件发生后,中苏边境冲突不断,战事一触即发。父亲明知道那年的新兵将开往北疆,随时可能参战,但还是将年仅16岁的大哥送入军营。
        1973年, 又送二哥参军入伍。父亲说:有国才有家，只有国家安宁，才能小家安稳。
        正是受父亲的影响,从抗日战争、解放战争、抗美援朝,再到和平年代,我们家没出五服的亲人,当兵的就有27人。
        好几位堂哥都是父亲亲自送入军营的。父亲的家国情怀,影响了我们家几代人。</p>
        <p class="suojin">七十年代，非农业户口可是个香饽饽,拥有非农业户口就相当于端上了“铁饭碗”，大嫂是一家工厂的临时工，多次恳请父亲退休后，让自己接班。他还是那样话:“我是党的人，违犯政策的事咱不能做!
        1977年3月,二哥从部队退伍，按照当时的政策规定可以安排工作，但必须先在企业工作。父亲当时就在武城县民政局任副局长，且分管安置办，如果稍微变通一下，二哥就可能进事业单位，可父亲不管不问，于是哥被分到了武城化肥厂。</p>
        <p class="suojin">后来工厂效益下滑，战友都陆续调走，父亲恰好要到平原棉麻站工作，组织上为了照顾父亲的身体，主动提出安排一名子女在身边工作，父亲却说，组织上调动他的工作，子女掺和啥?
        1958年,堂哥于忠臣考.上了山东省曲阜水利机械学校,1961年被分配到山东省水利厅。</p>
        <p class="suojin">1962年,中央决定大量精简城市人口,堂哥响应党的号召回到家乡禹城。由于禹城水利事业急需这样的人才，于是堂哥在县水利局当上了临时工。
        水利局党组多次打报告，要求当县长的父亲为其转正，父亲却因为，上级没有相关政策，愣是没批。
        父亲说：权利是人民给的，没有政策规定的事,咱不能做。
        父亲就是这样的“一根筋”。
        </p>

        </div>
    
</body>
</html>

p64-65:案例2

<!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>
        body{
            background-color: #f5f5f5;
        }
        .goods{
            width: 234px;
            height: 400px;
            background-color: #fff;
            margin: 0 auto;
            text-align: center;
        }
        img{
            width: 130px;
        }
        .title{
            font-size: 6px;
        }
        .info{
            color: #cccccc;
            font-size: 3px;
            line-height: 30px;
        }
        .money{
            font-size: 1px;
            color: lightblue;
        }
        
    </style>
</head>
<body>
    <!-- div就是用来网页布局,一个网页可能使用无数次。 -->
    <!-- 原则：尽量使用类名控制样式 -->
    <div class="goods">
        <img src="./iphone.jpg">
        <div class="title">Iphone 14 pro</div>
        <div class="info">强得很</div>
        <div class="money">6999米</div>

    </div>
    
</body>
</html>

p66---70:选择器

一、后代(选择器空格隔开)

<style>
        div p{
            color:red;
        }
    </style>
</head>
<body>
    <!-- 后代：儿子，孙子，重孙子.... -->
    <p>这是一个p</p>
    <div><p>
        这是div的儿子p
    </p>
    </div>
    
</body>

有父子集的环境即可。

二、子代（选择器间>隔开）

<style>
        div > a{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">这是div里的a</a>
        <p>
            <a href="#">这是div里p里的a</a>
        </p>
    </div>

只修改子代，孙子代不影响

三、并集（直接写逗号隔开）

    <style>
        /* p div span h1 文字红色 */
        /* 选择器1 , 选择器2 */

        p,
        div,
        span,
        h1{
            color: red;
        }

    </style>
</head>
<body>
    <p>p</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>

四、交集 p.box{}

    <style>
        p{
            color: red;
        }

        .box{
            color: red;
        }

        /* 添加box类的p标签 */
        p.box{
            color: green;
        }
    </style>

</head>
<body>
    <!-- 找到第一个p，带box类的，设置文字颜色是红色 -->
    <p class="box">这是p标签:box</p>
    <p>pppppppp</p>
    <div class="box">这是div标签:box</div>
    
</body>

五、伪类(hover悬停时颜色)

    <style>
        /* 悬停的时候文字颜色是红色 */
        a:hover{
            color: rgb(237, 19, 186);
            background: green;
        }
    </style>
</head>
<body>
    <a href="#">这是超链接</a>

    
</body>

p71:emmet语法(简写)

p72-76: 背景

一、背景色 backgroundcolor(bgc)

属性值:关键字，rgba，rgb,16进制

二、背景图backgroung-image(bgi)

background-image: url=(图片路径);

直接用，文字在图片上

三、背景平铺backgrount-repeat(bgr)

一般用no-repeat

四、背景位置background-position(bgp)

background-position: 水平位置垂直位置;

使用像素：数字px(正右负左)

五、background背景

1.background连写

background: color image repet position
<!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: 400px;
            height: 400px;
            /* 不分先后顺序  背景色 背景图 背景图平铺 背景图位置*/
            background: pink url(./nilu.png) no-repeat  center bottom; 
            /* 背景图位置如果是英文单词可以颠倒顺序 */

            /* 如果是数值不可以颠倒a */
            /* background: pink url(./nilu.png) no-repeat  50px 100px;  */
            background: pink url(./nilu.png) no-repeat  100px 50px; 
        }
    </style>
</head>
<body>
    <div>

    </div>
    
</body>
</html>