css入门学习笔记

Posted 2023-02-06 小乔不掉发

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css入门学习笔记相关的知识，希望对你有一定的参考价值。

我是目录标题

一、css 语法规范：
二、css基础选择器：
三、CSS 字体属性：
四、css 文本属性：
五、外部样式表：
六、CSS复合选择器：（重要）
七、元素显示模式转换：
八、盒子模型：

一、css 语法规范：

二、css基础选择器：

1、标签选择器：

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

作用：

标签选择器可以把某一类标签全部选择出来，比如所有的< div >标签和所有的< span >标签

优点：

能快速为页面中同类型的标签统一设置样式

缺点：

不能设计差异化样式，只能选择全部的当前标签

<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>Document</title>
    <style>
        /* 选择器 样式 */
        /* 给谁改样式 改什么样式 */
        p 
            color: red;
        
        div 
            color: pink;
        
    </style>
</head>
<body>
    <p>男生</p>
    <div>女生</div>
</body>

2、类选择器：

如果想要差异化选择器不同的标签，单独选一个或者某几个标签，可以使用类选择器
类选择器在HTML中以 class 属性表示，在css中，类选择器以一个点 “.” 号显示

注意：

① 类选择器使用 "."（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）

② 可以理解为给这个标签起了个名字来表示
③ 长名称或词组可以使用中横线来为选择器命名
④ 不要使用纯数字、中文等命名，尽量使用英文字母来表示
⑤ 命名要有意义，尽量使别人一眼就知道这个类名的目

<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>Document</title>
    <style>
        /* 类选择器口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用 */
        .red 
            color: red;
        
    </style>
</head>
<body>
    <ul>
        <li class="red">冰雨</li>
        <li>生僻字</li>
    </ul>
    <div class="red">我想变红</div>
</body>