CSS 学习笔记

绍小七

已于 2023-08-14 16:18:20 修改

阅读量435

点赞数 1

分类专栏： Java学习笔记文章标签： css 学习笔记

于 2023-08-12 21:43:52 首次发布

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

版权

Java学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、初识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>
</head>
<body>
    <p>这是段落</p>
</body>

小技巧：平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

3.5 文字属性一次性设置

上述的字体样式全部是通过专门的属性进行设置的，如果想一次性直接给字体设置样式，可以使用font属性来实现。

p {
    /*
        一次设置字体样式时，必须注意先后的顺序
        其中 font-size 和 font-family是必须存在的
    */
    font: font-style font-weight font-size/line-height font-family;
}

案例演示

<head>
    <meta charset="UTF-8">
    <title>字体斜体</title>
    <style type="text/css">
        p {
            font: normal 700 30px "隶书";
            color: red;
        }
    </style>
</head>
<body>
    <p>这是段落</p>
</body>

四、CSS外观属性

4.1 color文本颜色

color属性用于定义文本的颜色，其取值的方式有3种：

预定义的颜色值，如：red，green，blue等颜色的单词。
十六进制，如 #FF0000，#FF6600，#29D794等[不区分大小写]。
同时可以使用省略格式书写: #ff0000 -> #f00 , #ffooff -> #fof
RGB代码，也就是十进制，RGB数值范围都是0-255，也可以使用百分百的赋值方式。如：rgb(198,120,0) rgb(100%,30%,0%)

案例演示

<head>
    <meta charset="UTF-8">
    <title>字体颜色</title>
    <style type="text/css">
        #p1 {
            color: red;
        }
        #p2 {
            color: #ff00ff;
        }
        #p3 {
            color: rgb(198,0,198);
        }
    </style>
</head>
<body>
    <p id="p1">这是段落1</p>
    <p id="p2">这是段落2</p>
    <p id="p3">这是段落3</p>
</body>

4.2 line-height行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。

在这里插入图片描述图片中蓝色的区域就是一般默认情况下的行间距也就是行高，下面我们通过CSS样式来设置一下行间距。

<head>
    <meta charset="UTF-8">
    <title>演示行间距</title>
    <style type="text/css">
        p {
            color: red;
            line-height: 30px; /*设置行高之间的距离为30个像素*/
        }
    </style>
</head>
<body>
    <p>
        测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
        测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
        测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
        测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
        测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
        测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    </p>
</body>

在这里插入图片描述经过将行高的设置为30px后，可以看到图片中文仔所在的蓝色区域变大，上下行文件直接的间距发生了高度的变化。

4.3 text-align 文本水平对其方式

text-align 属性用于设置文本内容的水平对齐方式，对齐的方式分为3种：

left：左对齐
right：右对齐
center：居中对齐

结合text-height 属性使用可以实现文字在容器标签中的垂直居中设置。效果如下:

<head>
    <meta charset="UTF-8">
    <title>演示文字水平对齐方式</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            text-align: center; /*设置文本水平对齐居中*/
            line-height: 100px; /*设置行高和div容器的行高相同，实现垂直居中*/
        }
    </style>
</head>
<body>
    <div>测试文本</div>
</body>

水平垂直居中效果图

4.4 text-indent 文本缩进

text-indent 属性用于设置文本的首行缩进，赋值方式可以是em或相对于浏览器窗口宽度的百分比，允许使用负值，建议使用em作为设置单位。

<head>
    <meta charset="UTF-8">
    <title>演示文本首行缩进</title>
    <style type="text/css">
        p {
            text-indent: 2em;
            font-size: 20px;/*即使文字的大小发生变化，依然缩进2个文字大小*/
        }
    </style>
</head>
<body>
    <p>
        测试文本测试文本测试文本测试文本测试文本测试文本
        测试文本测试文本测试文本测试文本测试文本测试文本
        测试文本测试文本测试文本测试文本测试文本测试文本
        测试文本测试文本测试文本测试文本测试文本测试文本
        测试文本测试文本测试文本测试文本测试文本测试文本
    </p>
</body>

五、CSS复合选择器

复合选择器一般用于html标签嵌套比较复杂的元素时使用。分为后代选择器和子元素选择器。

5.1 后代选择器

当标签发生嵌套时，内层标签就是外层标签的后代。后代选择器又称为包含选择器，用来选择元素或元素组的后代，其语法就是把外层标签写在前面，内层标签通过空格分隔写在后面。

语法格式

/*其中选择器3是选择器2的后代，选择器2是选择器1的后代*/
选择器1 选择器2 选择器3 {
    样式;
}

代码演示

<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
        div p span { /*div标签下的p标签下的span标签被选择*/
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <span>测试文本1</span>
        </p>
        <span>测试文本2</span>
    </div>
    <span>测试文本3</span>
</body>
</html>

5.2 子元素选择器

子元素选择器只能选择某个元素的子元素[亲儿子]，不包含孙子，重孙之类。

语法格式

父元素 > 子元素 {
    样式;
}

其中子元素必须是父元素的直接后代

代码演示

<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style type="text/css">
         /*被选择的是div标签下的span标签，不包含p标签下的span标签*/
        div > span {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <span>测试文本1</span>
        </p>
        <span>测试文本2</span>
    </div>
    <span>测试文本3</span>
</body>
</html>

5.3 练习

/*
    在不修改下列代码的前提下，完成以下任务：
    1.链接登录的颜色为红色。 
    2.主导航栏里面的文字颜色为绿色。
    3.主导航栏和侧导航栏里面文字都是26像素并且是隶书。
    4.收藏本站 要求字体加粗。
*/
<div class="nav">    <!-- 主导航栏 -->
    <ul>
        <li>公司首页</li>
        <li>公司简介</li>
        <li>公司产品</li>
        <li>联系我们</li>
    </ul>
    <div> 收藏本站 </div>
</div>
<div class="sitenav">    <!-- 侧导航栏 -->
    <div class="site-l">左侧侧导航栏</div>
    <div class="site-r"><a href="#">登录</a></div>
</div>
代码实现
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style type="text/css">
        .site-r a { /*需求一*/
            color: red;
        }
        .nav { /*需求二*/
            color: green;
        }
        .nav,.sitenav { /*需求三*/
            font-size: 26px;
            font-family: "隶书";
        }
        .nav > div { /*需求四*/
            font-weight: 700;
        }
    </style>
</head>

六、标签模块分类（display）

不同的标签在页面中所占的区域大小不同，分为块级元素、行内元素和行内块级元素。

6.1 标签元素分类和特点

6.1.1 块级元素【block-level】

块级元素是指：会独自占据页面的一整行或多整行¬，可以对其高度、宽度、对齐方式等属性进行设置，通常用于网页布局和网页结构的搭建。
常见的块级元素有<h1> ~ <h6>、<p>、<ul>、<ol>、<li>、<div>等标签，其中<div>标签是典型的用于网页布局和网页结构的搭建的块级元素。
块级元素的特点：

一个元素占用一行，总是从新的一行开始
高度、宽度、内外边距都可以控制。
宽度默认是容器的100%
可以容纳其他类型的元素[块级、行内元素、行内块级元素]
只有文字才能组成段落，所以<p>标签内不能嵌套块级元素，同理还有<h1> ~ <h6>等专门针对文字的标签中也不能嵌套块级元素。

<head>
    <meta charset="UTF-8">
    <title>块级元素</title>
    <style type="text/css">
        p {
            /*可以对比添加高度宽度前后的区别*/
            width: 300px;
            height: 200px;
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <p>
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    </p>
</body>

6.1.2 行内元素【inline-level】

行内元素[内联元素]不占有网页独立的一行，仅仅靠自身的文本大小和图像尺寸来支撑元素结构，一般不可以设置宽度、高度、对齐方式等属性，常用语控制页面内文本的样式。
常见行内元素有<a>、<span>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>等，其中<span>标签是最典型的行内元素。
行内元素的特点：

和相邻的行内元素在同一行
高宽无法设置，但水平方向padding和margin可以设置，垂直方向无法设置。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。<a>标签特殊，但是<a>标签不能嵌套<a>标签

<head>
    <meta charset="UTF-8">
    <title>行内元素</title>
    <style type="text/css">
        span {
            /*高度和宽度的设置都是无效的*/
            width: 300px;
            height: 200px;
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <span>
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    </span>
</body>

6.1.3 行内块元素【inline-block】

行内块元素不占有网页的独立一行，但是相比较行内元素，我们可以设置行内块级元素的高度和宽度以及对齐方式。常见的行内块级元素: <img>、<input>、<td>等。

行内块级标签的特点：

和相邻的行内元素或行内块元素在网页的同一行，但是之间会有空白缝隙。
默认的宽度就是它本身内容所占的宽度
高度、行高、内外边距都可以控制。

<head>
    <meta charset="UTF-8">
    <title>行内块元素</title>
    <style type="text/css">
        input {
            /*高度和宽度可以设置*/
            width: 300px;
            height: 200px;
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
</body>

6.2 标签元素类型转换 display

不同类型的标签元素之间是可以通过display属性相互转换的。
转换为行内元素：display: inline;
转换为块级元素：display: block;
转换为行内块元素：display: inline-block;

注意事项

块级元素可以转换为行内元素或行内块元素。
行内元素可以转换为块级元素或行内块元素。
行内块元素只能转换为块级元素，不能被转换为行内元素。

<head>
    <meta charset="UTF-8">
    <title>标签元素转换</title>
    <style type="text/css">
        /*演示块级元素转换为其他元素*/
        div {
            width: 100px;
            height: 100px;
            /*块元素转行内元素：行内元素的宽度是由行内的内容支持的，需要填充内容才能看到*/
            display: inline;
            /*块元素转行内块元素*/
            display: inline-block;
        }
        .div1 {
            background-color: red;
        }
        .div2 {
            background-color: green;
        }
        .div3 {
            background-color: blue;
        }
        /*演示行内元素转换为其他元素*/
        span {
            width: 100px;
            height: 100px;
            /*转换为块级元素*/
            display: block;
            /*转换为行内块元素*/
            display: inline-block;
        }
        .span1 {
            background-color: red;
        }
        .span2 {
            background-color: green;
        }
        .span3 {
            background-color: blue;
        }
        /*
            演示行内块元素转化为其他元素
            行内块元素不能被转换为行内元素
         */
        img {
            height: 200px;
            display: block;
        }
        input {
            background-color: aqua;
            display: block;
        }
    </style>
</head>
<body>
    /*演示块元素转换为其他元素*/
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    /*演示行内元素转换为其他元素*/
    <span class="span1">span1</span>
    <span class="span2">span2</span>
    <span class="span3">span3</span>
    /*演示行内块元素转换为其他元素*/
    <img src="images/1.jfif" >
    <input type="text">
</body>

7. CSS伪类

伪类需要结合选择器使用，一般用于文档状态的改变，动态的事件等，也就是满足某些条件的情况下才会生效。例如用户用鼠标悬停到某个元素上，或者鼠标点击某个元素时的状态。

:link 伪类将应用于未被访问过的链接
:hover 伪类将应用于有鼠标指针悬停于其上的元素。
:active 伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。
:visited 伪类将应用于已经被访问过的链接。
:focus 伪类将应用于拥有键盘输入焦点的元素。（ie8以上支持）

如果伪类用于超链接，那么在定义时有顺序要求，不能随便改变顺序位置：
:line -> :visited -> :hover -> :active 顺序。

伪类语法

标签名: 伪类 {
    属性;
}

代码演示

<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style type="text/css">
        a:link {
            color: brown;
        }
        a:visited {
            color: red;
        }
        a:hover {
            color: fuchsia;
        }
        a:active {
            color: black;
        }
        input:focus {
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">连接</a>
    <input type="text">
</body>

八、文本修饰 text-decoration

text-decoration属性主要用于给文本内容做修饰，如下划线、上划线、删除线等。
none：无修饰
underline：下划线
line-through：删除线
overline：上划线

<head>
    <meta charset="UTF-8">
    <title>文本修饰</title>
    <style type="text/css">
        p {
            /*text-decoration: none;
            text-decoration: underline;
            text-decoration: line-through;*/
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <p>文本内容</p>
</body>

九、 CSS样式引入

CSS样式的使用方式一共有3种，分别为：行内样式，内部样式和外部样式。

行内样式

行内样式指的是通过标签中的style属性给当前标签设置样式。语法如下

<标签名 style="属性:属性值;属性:属性值;....">内容</标签名>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

弊端：代码的复用性差。
好处：优先级高。

内部样式

内部样式就是我们前面CSS演示中一直在使用的样式，在head标签中通过style标签使用。

弊端：在代码服用性上只能作用于本html文件中的元素。
好处：相比较行内样式提高了代码的复用性。

外部样式

外部样式是将所有的样式定义在一个或多个以.css为扩展名的外部样式表文件中，文件中的样式代码和在内部样式中的代码写法一致。然后在head标签中通过link标签将外部的样式连接到html的文件中，语法如果下:

<head>
    <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

样式优先级

使用了 !important声明的规则。
内嵌在 HTML 元素的 style属性里面的声明。内部样式和外部样式谁后执行谁生效。
使用了 ID 选择器的规则。
使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
使用了元素选择器的规则。
只包含一个通用选择器的规则。

代码演示

<head>
        <meta charset="UTF-8">
        <title>CSS样式引入</title>
        <!--内部样式-->
        <style type="text/css">
            p {
                color: green!important;
            }
        </style>
        <!--引入外部样式-->
        <link rel="stylesheet" type="text/css" href="css/MyCSS.css">
    </head>
    <body>
        <!--行内样式-->
        <p style="color: red; font-size: 30px; ">行内样式</p>
        <p>内部样式</p>
        <p class="p1">外部样式</p>
 </body>

在这里插入图片描述

十、CSS背景样式（background）

background属性用于设置背景颜色和背景图片。

background-color背景颜色，可以给颜色名、十六进制、RGB颜色坐标。
background-image 背景图片地址
background-repeat 是否平铺
background-position 背景位置
background-attachment 背景固定还是滚动

10.1 背景图片

background-image 属性允许指定一个图片展示在背景中可以和 background-color 连用。如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。语法如下

background-image: none | url(图片路径);

none:默认值，表示无背景图
url:图片路径中不需要""，可以是绝对路径或相对路径

10.2 背景平铺（repeat）

background-repeat属性用于设置图片在背景的平铺方式，语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y;

repeat: 默认值，背景图像在纵向和横向上平铺
no-repeat: 背景图片不平铺
repeat-x: 背景图像在横向上平铺
repeat-y: 背景图像在纵向上平铺

10.3 背景位置

background-position属性主要用于设置背景图片在容器中的位置。语法

background-position : position-x position-y;

position-x表示横向坐标
position-y表示纵向坐标
坐标的值可以是像素px，百分比%或者是方位：

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

注意

position后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。
比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
实际工作用的最多的，就是背景图片居中对齐了。

10.4 背景附着（滚动）

background-attachment 用于设置背景固定还是滚动，也就是当浏览器中出现下拉的滚动条时，我们下拉滚动条，背景图片是否跟着滚动的设置。语法：

background-attachment : scroll | fixed;

scroll:默认背景图像是随着内容滚动
fixed:背景图像固定

10.5 背景简写

针对于背景图片的相关设置，也可以通过background属性一次性简写设置。
background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background:背景颜色背景图片地址背景平铺背景滚动背景位置

background: transparent url(image.jpg) repeat-y scroll 50% 0;

10.6 代码演示

<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <style type="text/css">
        div {
            height: 2000px;
            /* 
            background-color: lavender;
            background-image: url(images/2.png);
            background-repeat: no-repeat;
            background-position: 50px 50px;
            background-attachment: fixed;
            */
         background: lavender url(images/2.png) no-repeat fixed 50px 50px;
        }
    </style>
</head>
<body>
    <div>
        测试内容测试内容测试内容测试内容测试内容测试内容测试内容
        测试内容测试内容测试内容测试内容测试内容测试内容测试内容
        测试内容测试内容测试内容测试内容测试内容测试内容测试内容
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        测试内容测试内容测试内容测试内容测试内容测试内容测试内容
        测试内容测试内容测试内容测试内容测试内容测试内容测试内容
        测试内容测试内容测试内容测试内容测试内容测试内容测试内容
    </div>
</body>

十一、盒子模型

CSS一共有三个大模块：盒子模型、浮动、定位，其余的都是细节。

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。CSS其实没有太多逻辑可言，类似我们小时候玩的积木,我们可以自由的，随意的摆放出我们想要的效果。

11.1 盒子模型（Box Model）

所有的文档元素（标签）都会生成一个矩形框，我们称为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

内边距（padding）外边距(margin)

11.2 盒子边框（border）

border 属性用于给元素所在容器的四个方向设置边框。

语法

border:border-width || border-style || border-color;

border-width:设置边框粗细，一般使用像素px border-width:
border-style:设置边框风格
none:默认值，没有边框。
solid:实线边框最常用。
dashed:虚线边框。
dotted:点线边框。
double:双实线边框
border-color:设置边框颜色

同时也可以针对边框的四边分别做不同的设置。
border-top: 用于设置上边框;
border-bottom: 用于设置下边框;
border-left: 用于设置左边框;
border-right: 用于设置右边框;
如果四边边框的设置相同，可以通过border一次性实现设置。

边框清零

一般用于给有默认边框的元素取消边框使用的，如果标签中的输入框的边框。

border:0px;

表格的细线边框

在表格标签中，因为表格外围和每个单元格都有自己的边框，即使设cellpadding和cellspacing也只是将内外边框合并一起，通过CSS样式就可以实现表格边框美观的设置。

table { 
    border-collapse:collapse;/*表示边框合并在一起*/
    border-spacing: 1px;/*定义边框之间的间距*/
}

代码演示

<head>
     <meta charset="UTF-8">
     <title>border边框</title>
     <style type="text/css">
         p {
             border: 10px solid red;
         }
         input {
             border: 0;
         }
         table {
             border: 1px solid black;
             border-collapse:collapse;/*表示边框合并在一起*/
             border-spacing: 1px;/*定义边框之间的间距*/
         }
         td {
             border: 1px solid black;
         }
     </style>
</head>
<body>
    <p>border边框</p>
    请输入:<input type="text">
    <table>
        <tr>
            <td>数据</td>
            <td>数据</td>
        </tr>
        <tr>
            <td>数据</td>
            <td>数据</td>
        </tr>
    </table>
</body>

11.3 内边距（padding）

padding属性用于设置内边距。是指边框与内容之间的距离。可以通过如下4个属性单独设置
padding-top:上内边距设置
padding-right:右内边距设置
padding-bottom:下内边距设置
padding-left:左内边距设置

也可以通过padding属性一次性设置上右下左四边的边距。语法如下

padding: 10px 20px 30px 40px;/*表示 上10px 右20px 下 30px 左40px 顺时针*/
padding: 10px 20px 30px;/*表示 上是10px 左右是20px 下是30px*/
padding: 10px 20px;/*表示 上下是10px 左右是20px*/
padding: 10px;/*表示上下左右都是10px*/

代码演示

<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style type="text/css">
        div {
            border: 1px solid red;
            /*padding: 10px 20px 30px 40px;*/
            /*padding: 10px 20px 30px;*/
            /*padding: 10px 20px;*/
            padding: 10px;
        }
    </style>
</head>
<body>
    <div>内边距</div>
</body>

11.4 外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。可以通过如下4个属性单独设置

margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边，取值顺序跟内边距相同。

代码演示

<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
        .one {
            margin: 50px;
        }
        .two {
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <input class="one" type="text" value="外边距1">
    <input class="two" type="text" value="外边距2">
</body>

11.4.1 外边距实现盒子居中

我们前面演示过让容器中的文字内容居中的操作，现在来实现一下让标签中的子标签实现居中的操作。

让一个盒子实现水平居中，需要满足两个条件：

必须的块级元素
盒子必须有指定宽度（width）

代码演示

<head>
    <meta charset="UTF-8">
    <title>外边距水平居中</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        .one {
            width: 60px;
            height: 60px;
            background-color: red;
            /*溢出隐藏，后面讲解*/
            overflow: hidden;
        }
        .two {
            width: 20px;
            height: 20px;
            background-color: blue;
            /*
            20px:为上下的边距，通过外层容器高度-内层容器高度/2获取
            auto:为自动计算左右边距，实现自动左右居中
            */
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two"></div>
    </div>
</body>

11.5 外边距合并

11.5.1 相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
原因：历史遗留问题，解决方案：无法直接解决，避免就好了。

在这里插入图片描述

代码演示

<head>
    <meta charset="UTF-8">
    <title>外边距合并塌陷</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        div {
            width: 100px;
            height: 100px;
        }
        .one {
            background: red;
            margin-bottom: 100px;
        }
        .two {
            background-color: blue;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

11.5.2 嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

代码演示

<head>
    <meta charset="UTF-8">
    <title>嵌套元素外边距塌陷</title>
    <style type="text/css">
        .one {
            width: 60px;
            height: 60px;
            background: red;
            margin-top: 50px;
            /*
            增加边框后会改变div容器的大小，有可能会造成网页布局错乱
            border: 1px solid black;
            */
            overflow: hidden;
        }
        .two {
            width: 20px;
            height: 20px;
            background-color: blue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two">
            溢出文本溢出文本溢出文本溢出文本溢出
        </div>
    </div>
</body>

十二、浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中的指定位置的过程。标准流是指浏览器对页面元素按照从上到下，从左到右的顺序排列。

在CSS中浮动通过float属性来设置，语法如下

float: none || left || right;

none:默认值不浮动
left:向左浮动
right:向右浮动

代码演示

<head>
    <meta charset="UTF-8">
    <title>float浮动</title>
    <style type="text/css">
        .outer {
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .one {
            width: 50px;
            height: 50px;
            background-color: red;
            float: left;
        }
        .two {
            width: 50px;
            height: 50px;
            background-color: green;
            float: left;
        }
        .three {
            width: 50px;
            height: 50px;
            background-color: blue;
            float: left;
        }
    </style>
</head>

注意事项

浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。
浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
由上面可以推断出，一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
浮动脱离标准流，不占位置，会影响后面的标准流。浮动只有左右浮动。
浮动的元素会自动转换为行内块元素

十三、定位

定位指定是将元素定位到页面的某一个位置，达到页面布局的效果。元素的定位属性主要包括定位模式和边移量两部分。

定位模式

属性	描述
position	定位模式指定的定位的方式，主要区别于定位的参照物。
static	自动定位（默认定位方式）默认值，指定位的元素按照标准流进行位置的摆放。
relative	相对定位，相对于其原文档流的位置进行定位相对定位，参照物是自身原有的位置，虽然自身发生了偏移，但是自身原有的位置并没有被释放。
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位当一个元素使用绝对定位的时候，会自动查找已经定位的父元素，使用定位的父元素的位置作为参照物。如果父元素都没有定位，则使用窗口（body）进行定位。失去位置，脱离标准流
fixed	固定定位，相对于浏览器窗口进行定位

边移量

通过边移量属性设置元素top/bottom/left/right的移动，来精确定位元素的位置。

属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

也就说，以后定位要和这边偏移搭配使用了，比如 top: 100px; left: 30px; 等等

代码演示

<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style type="text/css">
        .outer {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin: 0 auto;
            position: relative;
        }
        .one {
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .two {
            width: 50px;
            height: 50px;
            background-color: green;
            position: absolute;
            top: 0;
            left: 50px;
        }
        .three {
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>

固定定位演示

<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        img {
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <img src="images/2.png" alt="">
    <p>
        定位指定是将元素定位到页面的某一个位置，达到页面布局的效果。
        定位指定是将元素定位到页面的某一个位置，达到页面布局的效果。
        定位指定是将元素定位到页面的某一个位置，达到页面布局的效果。
        定位指定是将元素定位到页面的某一个位置，达到页面布局的效果。
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        定位指定是将元素定位到页面的某一个位置，达到页面布局的效果。
        定位指定是将元素定位到页面的某一个位置，达到页面布局的效果。
        定位指定是将元素定位到页面的某一个位置，达到页面布局的效果。
        定位指定是将元素定位到页面的某一个位置，达到页面布局的效果。
    </p>
</body>

绍小七

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
CSS 学习笔记

一、初识CSS1.1 CSS概述CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。而且还
复制链接

扫一扫