CSS必会基础知识总结1

最新推荐文章于 2024-07-16 17:18:30 发布

「已注销」

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量147

点赞数

分类专栏：前端 #CSS知识点文章标签： css html css3

本文链接：https://blog.csdn.net/m0_58171101/article/details/126412993

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

#CSS知识点

1 篇文章 0 订阅

订阅专栏

CSS必会基础知识总结

❶CSS简介

⒈作用

      美化网页，布局页面

⒉HTML局限性

       只关注内容的语义，主要做结构，显示元素内容

⒊CSS 也称为层叠样式表

⑴CSS也是一种标记语言
⑵CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
注：HTML专注去做结构呈现，样式交给CSS，即结果(HTML)和样式(CSS)相分离。

❷CSS的语法规范

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

1 语法格式

选择器{样式}
给谁改样式{改什么样式}

注：
●选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。
●属性和属性值以“键值对”的形式出现。
●属性是对指定对象设置的样式属性，如：字体大小、文本颜色等
●属性和属性值之间用英文“：”分开
●多个“键值对”之间用英文“；”进行分开

2 简单案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语法</title>
    <style>
        p{
        color:green;
        /*修改了文字大小为15像素*/
        font-size: 15px;
        }
    </style>
</head>
<body>
    <p>你好呀</p>
</body>
</html>

❸CSS基础选择器

 根据不同需求把不同的标签选出来

CSS完成的步骤：
1.找到所有的h1标签。选择器(选对人)😊
2.设置这些标签的样式(做对事)😊

1 基础选择器组成

 由单个选择器组成

2 基础选择器分类

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

Ⅰ.标签选择器

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

语法：
标签名{
    属性1:属性值1;
    属性2:属性值2;
    属性3:属性值3;
    ...
}

⑴例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        p {
            color: green;
        }
        div {
            color:pink;
        }
    </style>
</head>
<body>
    <p>小孩</p>
    <p>青年</p>
    <div>中年</div>
    <div>老年</div>
</body>
</html>

⑵作用：
标签选择器可以把某一类标签全部选择出来
⑶优点：
能快速为页面中的同类型标签统一设置样式。
⑷缺点:
不能设计差异化样式，只能选择全部的当前标签。

Ⅱ.类选择器

⑴使用场景：
如果想要差异化选择不同的标签时，单独选一个或几个标签，可以使用类选择器。

语法：
.类名{
    属性1：属性值1;
    ...
}

⑵注意：
㈠结构需要class属性来调用class类，在CSS中类选择器以“.”号显示
㈡类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义)
㈢不能用标签名作为类名。
㈣简单理解为给这个标签起了一个名字来表示。
㈤长名称或词组可以使用横线来为选择器命名。
㈥不能使用纯数字、中文等命名，尽量使用英文字母来表示。

⑶案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
       
        .red {
            color: red;
        }
        .yeach_haha{
          color: gray;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">小酒窝</li>
        <li>半生缘</li>
        <li class="red">江南</li>
        <li class="yeach_haha">本草纲目</li>
    </ul>
</body>
</html>

类选择器口诀：样式点定义，结构类调用,一个或多个，开发最常用

Ⅲ.类选择器就——多类名

可以给一个标签指定多个类名，从而达到更多选择的目的。即一个标签有多个名字。

⒈多类名使用方式
⑴在标签class属性片中写多个类名。
⑵多个类名中间必须使用空格隔开。
⑶这个标签就可以分别具有这些类名的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多类名</title>
    <style>
        .yellow {
            color: yellow;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="yellow font35">高圆圆</div>
</body>
</html>

⒉多类名的使用场景
⑴可以把一些标签元素相同的样式(共同的部分)放到一个类里面。
⑵这些标签都可以调用这个公共的类，然后再调用自己独有的类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多类名的使用</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            font-size: 30px;
        }
        .red {
            /*背景颜色*/
            background-color: red;
        }
        .green {
            background-color: green;
        }

    </style>
</head>
<body>
    <div class="box red">红色</div>
    <div class="box green">绿色</div>
    <div class="box red">红色</div>
</body>
</html>

Ⅳ.id选择器

id选择器可以为标有特定的id的HTML元素指定特定的样式。id选择器以“#”来定义。

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

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">高圆圆</div>
</body>
</html>