CSS-1 基础

最新推荐文章于 2024-09-14 17:04:32 发布

fly_ship

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量151

点赞数

文章标签： css

本文链接：https://blog.csdn.net/fly_ship/article/details/109952099

版权

前端专栏收录该内容

36 篇文章 2 订阅

订阅专栏

CSS （Cascadins Style sheets）层叠样式表
html主要做结构，CSS则是样式

选择器：声明

基础选择器：
1、标签选择器：某一类标签全部选出来，但不能差异化更改

    <style>
        /* 选择器{样式} */
        /* 给谁改 {改什么样式} */
        p {
            color:red;
            /* 修改文字大小 12像素 */
            font-size: 12px;
        }
    </style>
    
</head>

<body>
    <p>有点意思</p>
</body>

2、类选择器：有点像函数嗷（名字）

    <style>
        /* 类选择器口诀: 样式点定义  结构类(class)调用  一个或多个 开发最常用*/
      .red {
          color: red;
      }
      .star-sing {
        color: green;
      }
      .memeda {  
         color: pink;
      }
    </style>
</head>
<body>
    <ul>
        <li class="red">冰雨</li>
        <li class="red">来生缘</li>
        <li>李香兰</li>
        <li class="memeda">生僻字</li>
        <li class="star-sing">江南style</li>
    </ul>
    <div class="red">我也想变红色</div>
</body>

三个盒子红绿红

    <style>
        .red{
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
        .green{
            width: 100px;
            height: 100px;
                /* 背景颜色 */
                background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">red</div>
    <div class="green">green</div>
    <div class="red">red</div>
</body>

多类名调用
一下调用俩函数中间用空格分开

    <style>
        .red {
            color:  red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>

<div class="red font-size">刘德华</div>

2.5、id选择器（身份证号）
id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用

      #pink {
          color: pink;
      }

    <div id="pink">迈克尔·杰克逊</div>
    <div>pink老师</div>

3、通配符选择器
选取页面中所有的元素（标签），不用调用
全选啊，ctrl+a

<style>
     * {
         color: red;
     }
     /* * 这里把 html  body  div  span  li 等等的标签都改为了红色 */
    </style>
</head>
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>