CSS体验

CSS体验

青青草原羊村懒大王2024-05-01 16:11

1.CSS的定义

html 复制代码

    <title>CSS初体验</title>
    <style>
        /* 选择器 */
        属性名和属性值成对出现 ，这种叫键值对
        p{
            color: blueviolet;
            font-size: 30px;
        }
        </style>
</head>
<body>
        <p>懒羊羊</p>
</body>

2.CSS书写方式

内部样式表、外部样式表、行内样式

html 复制代码

    <title>Document</title>
    <link rel="stylesheet" href="./外部样式表.css">
</head>
<body>
<p>狼洋洋</p>
<p>狼洋洋</p>
<div style="color: blue;">狼洋洋</div>
</body>

css 复制代码

p {
    color: rgb(203, 38, 79);
}

3.选择器

作用：

查找标签，设置样式。

基础选择器：

标签选择器、类选择器、id选择器、通配符选择器。

标签选择器：

使用标签名作为选择器→选中同名标签设置相同样式。

eg:p、h1、div、img

类选择器

html 复制代码

  <title>Document</title>
    <style>
        .red{
            color:brown
        }
        .size{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="red">强制一行</div>
    <p class="red size">11111</p>
    <!-- 一个类选择器可以给多个标签使用 -->
    一个标签可以使用多个类名，class属性值可以写多个类。中间用空格隔开

</body>