CSS入门基础学习（中）

CSS显示模式

作用：网页标签特别多，在不同地方用不到相同类型，了解他们的特点可以方便给页面进行布局。

元素显示模式就是元素（标签）以什么方式进行显示，例如<div>占一行,<span>一行内可以放多个，HTML元素一般分为块元素和行内元素，两种类型。

块元素：

常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>是最典型的块级元素。

特点：

自己独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是容器（父级宽度）
是一个容器及盒子，里面可以放行内元素或块级元素

下面我们进行书写一些行内块元素来看一下各自的效果样式：

代码如下：

<body>
    <!-- 标题元素独占一行 -->
    <h1>小侯不躺平</h1>
    <!-- 一行的元素类型 -->
    <p>本人暂就读于xupt</p>
    <!-- 一个典型块级元素 -->
    <div>计算机科学与技术专业</div>
    <!-- 无序列表 -->
    <ul>等风来不如追风而去</ul>
    <!-- 有序列表 -->
    <ol>平安喜乐!</ol>  
</body>

结果如图所示：

注意：文字类的元素内不能使用块级元素

<p>主要存放文字则<p>里不可以存放块级元素

同理标题的元素也不可以存放块级元素

行内元素：

常见的行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>，其中<span>是最典型的行内元素，有的地方也称行内元素为内联元素。

特点：

相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的需进行显示模式的转换
默认宽度就是它内容本身的宽度
行内元素只能容纳文本和其他行内元素

下面我们进行书写行内元素来观察之中的区别：

代码如下：

<body>
    <!-- 两个链接 -->
    <a href="#">我是小侯</a>
    <a href="#">我是小侯</a>
    <!-- 加粗字体 -->
    <strong>xupt</strong>
    <strong>xupt</strong>
    <!-- 加粗字体 -->
    <b>计算机科学与技术专业</b>
    <b>计算机科学与技术专业</b>
    <!-- 倾斜字体 -->
    <em>平安喜乐</em>
    <em>平安喜乐</em>
    <!-- 倾斜 -->
    <i>未来可期</i>
    <i>未来可期</i>
    <!-- 文字中间有删除线 -->
    <del>父母在不远游</del>
    <del>父母在不远游</del>
    <!-- 文字含删除线 -->
    <s>散人乐队</s>
    <s>散人乐队</s>
    <!-- 下划线 -->
    <ins>狮童乐队</ins>
    <ins>狮童乐队</ins>
    <!-- 下划线 -->
    <u>浅尝即止</u>
    <u>人间风月</u>
    <!-- 一个行内 -->
    <span>潮起潮落</span>
    <span>潮起潮落</span>
</body>

结果如下图所示：

注意：链接里面不可以再放链接

特殊情况链接中可以放块级元素。但是给<a>转换一下块级模式最安全

行内块元素：

在行内块元素中有几个特别的标签——<img/>、<input/>、<td>，它们同时具有块元素和行内块元素的特点。

特点：

和相邻的元素在一行上，但是它们存在空隙。一行内可以显示多个
默认宽度就是它本身的内容宽度
高度，行高，外边距都可以控制

下面我们来尝试书写一下观察区别：

代码如下：

<body>
    <img src="D:\360Downloads\Software\案例\1.jpg" height="60px" width="60px" >
    <img src="D:\360Downloads\Software\案例\2.jpeg" height="60px" width="60px">

    <input></input>
    <input></input>

    <td>表格</td>
    <td>表格</td>
</body>

结果图如下所示：

总结：

块级元素	一行只可放一个块级	可设置高度和宽度	默认宽度为100%	容器可以包含任何标签
行内元素	一行可以放多个行内标签	不可以直接设置高度和宽度	本身内容（宽度）	容纳文本或者其他行内元素
行内块元素	一行可以放多个行内块度	可以设置宽度和高度	宽度为本身内容

显示模式转换：

特殊情况下，需要元素转换。一个模式元素需要转换为另一种模式的特点，比如想要增加链接<a>的触发单位就可以将其转换为块级元素。

转换为块元素：display：block
转换为行元素：display：inline
转换为行内块元素：display：inline-block

下面我们就使用实例来进行内容的讲解：

代码如下所示：

<style>
        /* 将行内元素转换为块元素则可以使其设置宽高 */
        a{
            display:block;
            height:50px;
            width:150px;
            background-color: pink;
            text-decoration: none;
            text-indent: 2em;
        }
        /* 将块元素转换为行内元素则设置的宽高不可使用 */
        div{
            display: inline;
            height: 10px;
            width: 40px;
            text-align: center;
            background-color: aqua;
        }
        /* 将行内元素转换为行内块元素 */
        span{
            display: inline-block;
            width: 50px;
            height:60px;
            background-color: brown;
            text-align: center;
        }
</style>
<body>
    <a href="#" >小侯</a>

    <div>
        等风来不如追风而去！
    </div>

    <span>我是行内元素</span>
</body>

运行结果如图：

案例示范：简洁的侧边栏

案例的核心思路分为两步：

1.把链接a转换为块级元素，这样链接可以独占一行，并且有宽度和高度的设置

2.鼠标经过a给链接设置背景颜色

代码如下：

<style>
        a{
            display: block;
            /* 行高设置方便将文字居中显示 */
            height: 40px;
            width: 130px;
            background-color:darkslategrey;
            color:white;
            text-indent: 2em;
            text-decoration: none;
            /* 将文字居中显示，上下间隔相等将文字挤在了中间位置 */
            line-height: 40px;
        }
        a:hover{
            background-color: coral;
        }
</style>
<body>
    <a href="#">手机&nbsp;电话卡</a>
    <a href="#">电视&nbsp;盒子</a>
    <a href="#">笔记本&nbsp;平板</a>
    <a href="#">出行&nbsp;穿戴</a>
    <a href="#">智能&nbsp;路由器</a>
    <a href="#">健康&nbsp;儿童</a>
    <a href="#">耳机&nbsp;音响</a>
</body>

运行结果如下图所示：

由上可知单行文字垂直居中即让行高等于文本高度即可：

原理如下图所示：

当行高小于盒子高度则偏上，大于盒子高度则偏下。

CSS背景

背景属性可以设置：背景颜色、背景图片、背景平铺、背景图片的位置、背景图像固定等。

背景颜色：

该属性定义了元素的背景颜色

语法：background-color:颜色值;

一般情况下背景颜色默认为transparent（透明），也可以手动调节（透明即没有颜色设置）

背景图片：

background-image属性描述了元素的背景图片。实际开发中常见的一些logo或者一些装饰性的小图片或大图。优点：便于控制位置

语法：background-image:none/url();

如下示例：

body{
        background-image: url(D:/360Downloads/Software/案例/1.jpg);
    }

将大图设置为整个页面的背景方式。

背景平铺：

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

参数值	作用
repeat	背景图片在纵向和横向上平铺（默认的）
no-repeat	背景图片不平铺
repeat-x	背景图片在横向上平铺
repeat-y	背景图片在纵向上平铺

示例：

不设置平不平铺：

代码如下：

<style>
    div{
        height: 700px;
        width: 1000px;
        background-color: pink;
        background-image: url(D:/360Downloads/Software/案例/2.jpeg);
    }
</style>
<body>
    <div></div>
</body>

设置不平铺：

即在样式中添加相应的代码即可，这项任务可以下去自己试着尝试完成一下，这里就不详细解释了。

背景图片位置（可以调节图片在什么位置）：

利用background-position属性可以改变图片在背景中的位置

语法：background-position:x y;

参数代表的意思是：x坐标，y坐标。同时也可以使用方位名词或精确位置

length 百分数|浮点数字和长度单位标识符组成的长度值

position top | center | botton | left | right 方位名词

1.参数是方位名词：

如果指定的两个值是方位名词，则两值的前后顺序无关，比如left top(左上)和top left(左上)效果是一样的，如果指定了一个方位名词，另一个省略则第二个默认为居中对齐。

2.精确单位：

如果参数是精确单位，那么第一个为x坐标，第二个为y坐标，如果只指定一个数值，那么该数值一定是x坐标，另一个默认为垂直居中

3.参数为混合单位：

第一个为x坐标，第二个为y坐标

示例：

代码如下：

<style>    
body{
        background-image: url(D:/360Downloads/Software/示例文件/16680863355383.webp);
        background-repeat: no-repeat;
        background-position: left bottom;
    }
</style>

<style>
    body{
        background-image: url(D:/360Downloads/Software/示例文件/16680863355383.webp);
        background-repeat: no-repeat;
        background-position: left center;
    }
</style>

    <style>
    body{
        background-image: url(D:/360Downloads/Software/示例文件/16680863355383.webp);
        background-repeat: no-repeat;
        background-position: left top;
    }
</style>

    <style>
    body{
        background-image: url(D:/360Downloads/Software/示例文件/16680863355383.webp);
        background-repeat: no-repeat;
        background-position: 80px 190px;
    }
</style>

由上述示例可知，使用方位和数值相差不大可以根据自己网页的需要进行选择。

背景图像的固定（背景附着）：

background-attachment属性设置背景图像是否固定或者随着页面其余部分滚动

background-attachment后期可以制作视差滚动效果

语法：background-attachment：scroll | fixed

scroll 背景图片是随着对象的滚动而滚动的

fixed 背景图片固定

这一块的内容在博客中显示出来效果是一样的所以这一部分希望大家可以下去实验一下。

背景复合写法：

background：black url(images/bg.jpg) no-repeat fixed center top ；

可以省略其中的任何一项，其中复合写法顺序不定可以任意。

背景颜色半透明：

background:raba(0,0,0,0.3)

最后一个参数是alpha透明度，取值范围0~1之间，1代表不透明

注意背景半透明指的是盒子背景半透明，盒子里面的内容不受其影响

代码如下：

<style>
    div{
        background:rgba(0,0,0,0.3);
        width: 100px;
        height: 60px;
    }
</style>
</head>
<body>
    <div>
        小侯不想放弃
    </div>
</body>

背景总结：

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x和y坐标
background-attachment	背景附着	scroll(背景滚动)/fixed(背景固定)
背景简写	书写更加简单	背景颜色背景图片地址背景平铺背景滚动背景位置
背景色半透明	背景颜色半透明	background:rgba(0,0,0,0.3);后面必须是四个值

综合案例：

1.链接属于行内元素，但是此时需要设置宽度高度需要模式转换

2.里面文字需要水平居中和垂直居中，因此需要单行文字垂直居中的代码

3.链接里面需要设置背景图片，因此需要用到背景的相关属性

4.鼠标经过变化背景图片，因此需要用到链接伪类选择器

因为本人没有找到相应的背景素材所以找了一些其他图片来替换

代码如下：

<style>
        .bg1{
            display: inline-block;
            width:130px;
            height:120px;
            background-image: url(D:/360Downloads/Software/案例/1.jpg);
            text-decoration: none;
            text-align: center;
            line-height: 120px;
            background-position: 400px 200px;
        }
        .bg1:hover{
            background-image: url(D:/360Downloads/Software/案例/对角巷.webp);
        }
        .bg2{
            display: inline-block;
            width:130px;
            height:120px;
            background-image: url(D:/360Downloads/Software/案例/2.jpeg);
            text-decoration: none;
            text-align: center;
            line-height: 120px;
            background-position: left center;
        }
        .bg2:hover{
            background-image: url(D:/360Downloads/Software/示例文件/16680863355383.webp);
        }
        .bg3{
            display: inline-block;
            width: 130px;
            height:120px;
            background-image: url(D:/360Downloads/Software/案例/对角巷.webp);
            text-decoration: none;
            text-align: center;
            line-height: 120px;
            background-position: left center;
        }
        .bg3:hover{
            background-image: url(D:/360Downloads/Software/案例/1.jpg);
        }
        .bg4{
            display: inline-block;
            width: 130px;
            height:120px;
            background-image: url(D:/360Downloads/Software/示例文件/16680863355383.webp);
            text-decoration: none;
            text-align: center;
            line-height: 120px;
            background-position: left center;
        }
        .bg4:hover{
            background-image: url(D:/360Downloads/Software/案例/1.jpg);
        }
</style>
<body>
    <a src="#" class="bg1">彩色导航</a>
    <a src="#" class="bg2">彩色导航</a>
    <a src="#" class="bg3">彩色导航</a>
    <a src="#" class="bg4">彩色导航</a>
</body>

CSS的三大特性

CSS有三个非常重要的三个特性：层叠性、继承性、优先级

层叠性：

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）；另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则：

样式冲突，遵循的原则就是就近原则，那个样式离结构近，就执行哪个样式
样式冲突，不会层叠

由上所示字体颜色会被离得近的样式所覆盖掉

继承性：

现实中的继承：我们继承了父亲的姓

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单理解就是子承父业

恰当地使用继承可以简化代码，降低CSS样式的复杂性
子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承，以及color属性)

由上图可知div继承了body的颜色但没有继承字体大小而使用了本身设置的字体大小，p继承了body的字体颜色。

行高的继承性

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前子元素的文字大小*1.5
body行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调节行高

优先级：

当同一个元素指定多个选择器，就会有优先级的产生

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器权重如下表所示：

选择器	选择器权重
继承或*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=""	1,0,0,0
！important 重要的	无穷大

代码如下：

<style>
        .test{
            color:red;
        }
        #demo{
            color:green;
        }
        div{
            color:pink;
        }
    </style>
<body>
    <div class="test" id="demo" style="color :purple">你笑起来真好看</div>
</body>