CSS笔记

老郭又瘦了

已于 2022-08-31 16:44:12 修改

阅读量100

点赞数

文章标签： css 前端

于 2022-08-31 13:49:47 首次发布

本文链接：https://blog.csdn.net/weixin_45880589/article/details/126616571

版权

html相当于原始衣服。
CSS相当于给衣服加颜色，加样式。

基本语法

在这里插入图片描述

样式

在这里插入图片描述

HTML中CSS引入方式对比

在这里插入图片描述

CSS选择器

在这里插入图片描述

CSS选择器之标签选择器

<style>
        /*标签选择器，通过标签名选中标签加样式 */
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        嗨害嗨
    </p>

缺点：相同的标签想显示不同的样式，处理不了

CSS选择器之id选择器

  <style>
        /*标签选择器，通过标签名选中标签加样式 */
        #my{
            color: red;
        }
    </style>
</head>
<body>
    <p id="my">
        嗨害嗨
    </p>

在这里插入图片描述
注意：同一页面id应该唯一

CSS选择器之类选择器

在这里插入图片描述

<style>
        .s1{
            color: rgb(20, 85, 142);
        }
        .s2{
            color:red;
        }
    </style>
</head>
<body>
    <p class="s1">
        嗨害嗨
    </p>
    <p class="s2">
        css从入门到入土
    </p>

在这里插入图片描述

CSS选择器之后代选择器（派生选择器）

在这里插入图片描述
特点：可以隔代选中。
缺点：p标签的同级a标签也会被控制，控制范围太广

   <style>
        div a{
            color: black;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <a href="">css从入门到入土</a>
        </p>
    </div>

CSS选择器之子类选择器

子代选择器只会控制子标签
在这里插入图片描述

CSS选择器之通用选择器（基本不用）

在这里插入图片描述

代码

    <style>
        *{
           margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    hello word
    <p>老六</p>
    <p>老八</p>
</body>

CSS选择器之群组选择器

<style>
    body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,a,em,img,strong,dl,dt,dd,ol,ul,li,table,button,input {
        margin: 0;
        padding: 0;
    }
</style>

去边框
在这里插入图片描述