HTML与CSS学习 day3

最新推荐文章于 2024-09-12 19:13:21 发布

只只m

最新推荐文章于 2024-09-12 19:13:21 发布

阅读量88

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_42778611/article/details/114664328

版权

体验css语法规范

<style>
        p{
            color: red;
            font-size: 20px;
        }
    </style>
    
<p>学习前端第三天 我很快乐</p>

标签选择器

 <style>
    p {
        color: green;
    }
    div {
        color: brown;
    }
</style>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>

类选择器
首先在需要修改的区域添加一个class属性 class="类名"。其次在

<style> 
 .类名 {
     修改的内容
      }
 </style>

在这里插入图片描述

  <style>
        .red {
            color: red;
        }

        .pp {
            color: green;
        }

        .cc {
            color: indigo;
        }
    </style>
</head>

<body>
    <ul>
        <li class="red">只只</li>
        <li class="pp">只只只</li>
        <li class="cc">只只只只</li>
    </ul>
</body>

多类名的使用
类名之间必须使用空格

<style>
   .box{
       width: 100px;
       height: 100px;
   }
   .red{
       background-color: red;
   }
   .green{
       background-color: green;
   }
</style>
<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>  
</body>

id选择器
css中id以#定义 id只能调用一次

<style>
    #red {
        color: red;
    }
</style>
<body>
  <div id="red">ios</div>  
</body>

id选择器和类选择器的区别
在这里插入图片描述

通配符选择器
*可以对所有标签修改样式例如 div span li 等等

<style>
    * {
        color: red;
    }
    /* *可以对所有标签修改样式 例如 div span li 等等 */
</style>

<body>
    <div>一只咸鱼</div>
    <span>一只咸鱼</span>
    <ul>
        <li>一只咸鱼</li>
    </ul>
    <ol>
        <li>一只咸鱼</li>
    </ol>
</body>

对比

在这里插入图片描述

css字体系列

font-family

<style>
      body{
          font-family: '宋体';
      } 
  </style>
<body>
    <h4>静夜思</h4>
    <p>床前明月光</p>
    <p>疑是地上霜</p>
    <p>举头望明月</p>
    <p>低头思故乡</p>
</body>