前端学习第四天，加油！

最新推荐文章于 2024-05-12 14:23:18 发布

小歌的学习日常

最新推荐文章于 2024-05-12 14:23:18 发布

阅读量38

点赞数

文章标签：前端学习 css

本文链接：https://blog.csdn.net/m0_59060850/article/details/128911852

版权

今天开始css！！

CSS简介

1.1了解

用于美化网页、布局页面。

1.HTML的局限性

只关注内容语义，不美观。

2.CSS-网页美容师

CSS是层叠样式表的简称，有时也称为CSS样式表或级联样式表。

它也是一种标记语言。

CSS主要用于设置HTML页面中文本内容（字体、大小、对齐方式等）、图片外形（高宽、边框样式、边距）以及版面的布局和外观显示的样式。

CSS最大价值：使得结构（HTML）和样式（CSS）相分离。

1.3CSS语法规范

CSS规则由两个主要的部分组成：选择器以及一条或多条声明。

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

选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。

属性和属性值一键值对出现，用冒号隔开；各属性之间用分号隔开。

1.4CSS代码风格

1.属性值前，冒号后面，保留一个空格。

2.选择器（标签）和大括号中间保留空格。

2.CSS基础选择器

2.1CSS选择器作用

选择器就是根据不同需求把不同的标签选出来。简单来说就是选择标签用的。

2.2选择器分类

选择器分为基础选择器和复合选择器两大类。先来了解基础选择器：

基础选择器是由单个选择器组成的。

基础选择器又包括：标签选择器、类选择器、ID选择器和通配符选择器

2.3标签选择器

标签选择器（元素选择器）是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定同一的CSS样式。

语法

标签名{
    属性1： 属性值1；
    属性2： 属性值2；
    属性3： 属性值3；
......
}

2.4类选择器

如果想要差异化选择不同的标签，单独选一个或者某个标签，可以使用类选择器。

选择器在HTML中以class属性表示，在CSS中，类选择器以一个“.”号显示。

语法

.类名{
    属性1: 属性值1;
    ...
}

给一个例子：

<!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>CSS语法规范</title>
    <style>
        /* 选择器{样式} */
        /* 给谁改样式{改什么样式} */
        p {
            color: red;
            /* 修改文字像素大小为12 */
            font-size: 12px;
        }
        .red {
            color: red;

        }

    </style>
</head>
<body>
    <p>来啦来啦</p>
    <div>去吧去吧</div>
    <ul>
        <li class="red">小高</li>
        <li>小歌</li>
        <li>大妹</li>
    </ul>
    <div class="red">
        变红
    </div>
</body>
</html>

课堂案例：

完成如下：

代码如下：

<!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>利用类选择器画三个盒子</title>
    <style>
        .red {
        width: 100px;
        height: 100px;
        /* 背景颜色 */
        background-color: red;
    }
        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    
</head>
<body>
    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div>
</body>
</html>

2.4类选择器-多类名

简单理解为：一个标签多个名字

1.多类名使用

<div class="red font20">高歌</div>

注意：在标签class属性中写多个类名，多个类名中间用空格分开。

2.多类名在开发中的应用场景

可以把一些标签元素相同的样式（共同部分）放到一个类里面。

这些标签都可以调用这个公共类，然后再调用自己独有的类。

2.5id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中的id选择器以“#”来定义。

语法

#id名 {
    属性1：属性值1:；
    ...
}

举一个栗子：

#pink {
            color: pink;
        }



 <div id="pink">我需要粉色</div>

id选择器和类选择器的区别

1.类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

2.id才选择器好比身份证号码，全国唯一，不得重复。

2.6通配符选择器

在CSS中，通配符选择器使用“*”定义，他表示选取页面中的所有元素（标签）。

语法

* {
    属性： 属性值1；
    ...
}

通配符选择器不需要调用，自动就给所有元素使用样式。

他在特使情况下使用，例如清楚所有元素标签的内外边距，代码为：

* {
    margin： 0；
    padding： 0；
}