CSS 学习笔记_<p style="color: red">-CSDN博客

本文链接：https://blog.csdn.net/ShaoXiaoQi/article/details/132245383

本文详细介绍了CSS的基础知识，包括选择器、字体样式、外观属性、复合选择器、标签模块分类、伪类、文本修饰、样式引入、背景样式、盒子模型和定位。内容涵盖CSS语法、类选择器、ID选择器、行内样式、内部样式、外部样式、颜色、行间距、文本对齐、文本缩进、背景图片、背景颜色、背景平铺、背景定位、浮动和定位模式等，是CSS学习的全面指南。

摘要由CSDN通过智能技术生成

一、初识CSS

1.1 CSS概述

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。而且还可以针对不同的浏览器设置不同的样式。

CSS的使用方式又分为行内样式，内部样式和外部样式。其中行内样式几乎很少使用，大部分的情况下都使用外部样式，将样式专门写在一个css的文件中，然后引用到html文件中。

1.2 CSS语法

选择器 {
   
    属性: 属性值;
    属性: 属性值;
    属性: 属性值;
    .... }

选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
属性和属性值以“键值对”的形式出现。
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文“:”连接。
多个“键值对”之间用英文“;”进行区分。

案例演示

<head>
    <meta charset="UTF-8">
    <title>CSS演示</title>
    <style type="text/css">
        /*给所有的p标签设置样式*/
        p {
     
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <p>这是段落1</p>
    <p>这是段落2</p>
    <p>这是段落3</p>
    <div>这是div容器</div>
</body>

二、选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。常用的基础的选择器包括：标签选择器、类选择器和ID选择器，也包括一些特殊的如组合选择器和通配*选择器。

2.1 标签选择器

使用标签名作为选择器的名字，页面内所有和标签选择器指定的名称相同的标签都会被CSS的样式影响。
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

labelName {
   
    属性: 属性值;
    属性: 属性值;
    ....
}

案例演示

<head>
    <meta charset="UTF-8">
    <title>标签选择器演示</title>
    <style type="text/css">
        /*标签选择器，当前页面中只有p标签会被样式改变，其他标签不会产生影响*/
        p {
     
            color: red;
        }
    </style>
</head>
<body>
    <p>这是段落1</p>
    <p>这是段落2</p>
    <p>这是段落3</p>
    <div>这是div容器</div>
</body>

2.2 类选择器

在标签的内部添加class属性，使用class属性的值作为选择器名称，页面内所有相同的class名称所在的标签都会被CSS的样式影响。

2.2.1 class属性赋值的规范

长名称或词组可以使用中横线来为选择器命名。
不建议使用“_”下划线来命名CSS选择器。
不要纯数字、中文等命名，尽量使用英文字母来表示。
尽量不要使用标签名作为类名，比如 .p .h1 这是不合法的。

.className {
   
    属性: 属性值;
    属性: 属性值;
    ....
}

案例演示

<head>
    <meta charset="UTF-8">
    <title>类选择器演示</title>
    <style type="text/css">
        /*
            在标签的内部添加class属性，使用class属性的值作为选择器名称，
            页面内所有相同的class名称所在的标签都会被CSS的样式影响。
        */
        .one {
     
            color: red;
        }
    </style>
</head>
<body>
    <p class="one">这是段落1</p>
    <p>这是段落2</p>
    <p>这是段落3</p>
    <div class="one">这是div容器</div>
</body>

2.3 ID选择器

在标签的内部添加id属性，使用id属性的值作为选择器名称，页面内id的属性值可以重复，但尽量保证唯一，CSS中id重复没有影响，但是在 js 技术中会出现问题。

#idName {
   
    属性: 属性值;
    属性: 属性值;
    ....
}

案例演示

<head>
    <meta charset="UTF-8">
    <title>id选择器演示</title>
    <style type="text/css">
        /*在同一个页面中，保证id的值唯一*/
        #p1 {
     
            color: red;
        }
    </style>
</head>
<body>
    <p id="p1">这是段落1</p>
    <p>这是段落2</p>
    <p>这是段落3</p>
    <div>这是div容器</div>
</body>

2.4 组合选择器

组合选择器表示多个选择器组合到一起使用，每个选择器中间使用,号隔开。

选择器名,选择器名... {
   
    属性: 属性值;
    属性: 属性值;
    ....
}

案例演示

<head>
    <meta charset="UTF-8">
    <title>组合选择器演示</title>
    <style type="text/css">
        /*多个选择器一起生效*/
        .one,.two {
     
            color: red;
        }
    </style>
</head>
<body>
    <p class="one">这是段落1</p>
    <p>这是段落2</p>
    <p>这是段落3</p>
    <div class="two">这是div容器</div>
</body>

2.5 通配选择器

页面中的所有元素都会被通配选择器的CSS样式影响到。

* {
   
    属性: 属性值;
    属性: 属性值;
    ....
}

案例演示

<head>
    <meta charset="UTF-8">
    <title>通配选择器演示</title>
    <style type="text/css">
        /*影响整个页面的所有元素*/
        * {
     
            color: red;
        }
    </style>
</head>
<body>
    <p>这是段落1</p>
    <p>这是段落2</p>
    <p>这是段落3</p>
    <div>这是div容器</div>
</body>

三、CSS字体样式

CSS的字体样式主要是针对页面中的字体进行样式的设计，如：字体的字号大小、字体粗细、是否斜体、字体的选择[宋体、黑体、微软雅黑等]。

3.1 font-size字号大小

font-size主要用于设置字号的大小，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。font-size字体的大小使用数字表示，数字越大，文字显示的越大，默认为16px。

在这里插入图片描述

案例演示

<head>
    <meta charset="UTF-8">
    <title>字体大小</title>
    <style type="text/css">
        p {
     
            font-size: 28px;
            color: red;
        }
    </style>
</head>
<body>
    <p>这是段落</p>
</body>

3.2 font-family文字字体

font-family用于设置文字的字体，默认字体为微软雅黑，能够使用什么字体，取决于操作系统中安装了哪些字体，在C:\Windows\Fonts目录下的字体都是可以使用的。

字体属性中可以设置多个字体，当前面的字体不生效时，后面的字体可以用于替代
如果多个字体中包含英文字体，需要将英文字体写在前面
因为大部分的中文都内置了各种英文字体
所以将英文字体写到后面会导致无法生效

p {
   
   font-family: "微软雅黑","隶书",....;
}

常用技巧

现在网页中普遍使用14px+。
尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

3.3 font-weight字体粗细

字体加粗除了可以使用b和strong标签之外，也可以通过css来实现。

font-weight主要用于设置字体的粗细，赋值的方式有两种

英文赋值：normal、bold、bolder、lighter
数字赋值：100-900【整百赋值】，数字 400 等价于 normal，而 700 等价于 bold。但是我们更喜欢用数字来表示。

<head>
    <meta charset="UTF-8">
    <title>字体粗细</title>
    <style type="text/css">
        p {
     
            font-size: 28px;
            font-family: "微软雅黑","隶书";
             /*一般使用数字来设置字体的粗细*/
            font-weight: 700;
            color: red;
        }
    </style>
</head>
<body>
    <p>这是段落</p>
</body>

3.4 font-style文字斜体

字体的斜体设置除了可以使用 i 和 em 标签外，同样可以使用css样式设置。

font-style主要用于设置字体的斜体操作，赋值方式有3种

normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。

<head>
    <meta charset="UTF-8">
    <title>字体斜体</title>
    <style type="text/css">
        p {
     
            font-size: 28px;
            font-family: "微软雅黑","隶书";
            font-weight: 700;
            /*中文没有斜体的习惯，一般要求横平竖直*/
            font-style: oblique;
            color: red;
        }
    </style>