【前端学习日志】CSSemmet语法&复合选择器&元素显示模式&背景&CSS特性&盒子（含一些简单案例）

本文链接：https://blog.csdn.net/P9ulp/article/details/125765199

本文详细介绍了HTML和CSS的基础知识，包括使用EMMET加速HTML和CSS编写，理解复合选择器如后代、子、并集和伪类选择器，学习元素的显示模式，以及CSS背景的设置。此外，还涵盖了CSS的层叠性、继承性和优先级，以及盒子模型和一些实用技巧，帮助初学者快速掌握网页布局和样式设计。

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

来自2022.7.13
在这里插入图片描述

今日学习

一、EMMET语法
二、复合选择器
三、元素显示模式
四、CSS的背景
五、CSS的特性
六、盒子模型
七、课堂练习or案例
八、写在最后

一、EMMET语法

1.emmet语法快速生成HTML

快速生成标签——tab
快速生成多个div

 div*10

父子关系 >
兄弟关系 +

div+p

快速生成clss

p.class(clss名)+tab键

快速生成demo

.demo$*5+tab键

想生成的标签里面默认显示几个文字

div{一句话}*5

2.emmet语法快速生成CSS样式

总结：万物皆可tab键

3.快速格式化代码

vscode右键选择格式化

二、复合选择器

1.什么是复合选择器

更高效的选择目标元素
由两个或多个基础选择器通过不同方式组合而成
包括：后代选择器、子选择器、并集选择器、伪类选择器

2.后代选择器

可以选择父元素里面的子元素

语法：
元素1 元素2 {样式}
ps：元素间需要空格
元素1为父亲元素2为后代最终选择的是元素2

    <style>
        /* 我想要把Ol里面的li选择出来改为pink */
        /* 后代选择器 */
        ol li{
            color: pink;
        }
    </style>

复杂版：

    <style>
        /* 我想要把Ol里面的li选择出来改为pink */
        /* 后代选择器 */
        .nav li a{
            color: pink;
        }
    </style>

</head>
<body>
    <ul class="nav">
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <!-- 只要这行变色 -->
        <li><a href="#">我是ul的孩子</a></li>
    </ul> 
</body>

3.子选择器

只能选择作为某元素的最近一级子元素
简单理解就是选亲儿子元素

元素1>元素2

<style>
        .nav>a {
            color: pink;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

4.并集选择器

可以选择多组标签，同时为它们定义相同的样式

元素1，元素2，元素N {样式}

 <style>
        /* 要求1：将熊大和熊二改为粉色 */
        div, p {
            color: pink;
        }

        /* 要求2：请把熊大和熊二改为粉色，还有小猪一家改为粉色 */
        div,p , .pig li{
            color: pink;
        }
    </style>
</head>

<body>
    <div>熊大</div>
    <P>熊二</P>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

5.伪类选择器

给链接添加特殊的效果
例：将光标放到链接上时变色
最大特点：冒号

5.1链接伪类选择器

a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针为其上的链接
a:active 选择活动链接（鼠标未按下）

        /* 1.未访问的链接改为黑色无下划线 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* 2.已访问的链接改为橘色 */
        a:visited {
            color: orange;
        }

        /* 3.选择鼠标经过的链接 */
        a:hover {
            color: blue;
        }

        /* 4.鼠标按下拖动时的链接 */
        a:active {
            color: green;
        }

一定要按顺序写！
a:lik/a:visited/a:ohver/a:acitive

5.2focus伪类选择器

用于选取获得焦点的表单元素

<style>
        input:focus {
            background-color: pink;
        }
    </style>

三、元素显示模式

1.什么是元素显示模式

元素标签以什么方式进行显示
比如<div自己占一行，一行可以放多个span
html元素一般分为块元素和行内元素

2.块元素

h1-h6
p
div 最典型的块元素
ul
ol
li

特点

独占一行
高度宽度外边距可以控制
宽度默认是容器的100%
是一个容器盒子，里面可以放块元素或行内元素

ps:<p标签主要用于存放文字，所以不能放块级元素，特别是div，同理h1-h6也不能放

3.行内元素

a
strong
b
em
i
u
span 最典型

特点

相邻行内元素在一行上，一行可以显示多个
高宽直接设置无效
默认宽度就是本身内容宽度
行内元素只能容纳文本或其他行内元素

ps:链接里面不能放链接，a里面可以放块级元素

4.行内块元素

img
input
td

特点

和相邻行内元素在一行上，但中间有空白缝隙，一行可以显示多个
默认宽度就是本身高度
高度行高外边距都可以控制

5.元素显示模式转换

一个模式的元素需要另外一种模式的特性

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

在这里插入代码片`    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素a转换为块级元素 */
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: darkslategrey;
            /* 把块级元素div转化为行内元素 */
            display: inline;
        }

        span {
            width: 200px;
            height: 200px;
            background-color: rgb(122, 26, 95);
            /* 把行内元素span转化为行内块元素 */
            display: inline-block;
        }
    </style>`

6. 小技巧——文字垂直居中

解决方案：让文字的行高等于盒子的高度

<style>
        a {
            height: 40px;
            line-height: 40px;
        }
    </style>

行高<盒子高度：文字偏上
行高>盒子高度：文字偏下

四、CSS的背景

1.背景颜色

bcakground-color:颜色值
一般情况下元素背景默认为transparent（透明）

2.背景图片

方便控制位置（精灵图）

background-image：none | url（）

div {
            width: 120px;
            height: 120px;
            background-image: url(cat.jpg);
        }

3.背景平铺

bcakground-repeat:repeat | no-repeat | repeat-X | repeat-Y
平铺 | 不平铺 | 横向上平铺 | 纵向平铺

4.背景图片位置

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

background-position: x y;
xy为坐标

参数是方位名词

如果指定的两个值都是方位名词，则前后顺序无关
比如left top和top left效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中

background-position:right center;

5.背景固定

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

background-attachment:scroll | fixed

6.背景复合写法

习惯性约定顺序：
背景颜色背景图片地址背景平铺滚动图片位置

    <style>
        h3 {
            background:black url(wzry.jpg) no-repeat fixed center top
        }
    </style>

7.背景半透明

background：rgba(0,0,0,0.3)
最后一个范围在0-1

五、CSS的特性

层叠性
继承性
优先级

1.层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式

层叠性原则：

样式冲突，遵循就近原则（覆盖）
不冲突不会层叠

<style>
        div{
            color: darkorange;
        }
        div{
            color: pink;
        }
    </style>

结果为粉红色

2.继承性

子标签会继承父标签的某些样式，如文本颜色和字号
子承父业
子元素可以继承父元素的样式（颜色字号等）
可以继承行高

<style>
        div {
            color: darkorange;
        }
    </style>
</head>

<body>
    <div>
        <p>今天是七月十三日</p>
    </div>
</body>

结果为橘色

body{
	font:12px/1.5 Microsoft YaHei;
}

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父类的行高
此时子元素的行高为：当前子元素文字大小的1.5倍
优势是可以根据字体的大小灵活调整行高

3.优先级

3.1选择器权重

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

选择器相同→执行层叠性
选择器不同→由选择器权重执行

选择器	权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪选择器	0,0,1,0
id选择器	0,1,0,0
行内选择器style	1,0,0,0
!important	无穷大

3.2继承的权重为0

 <style>
        #father{
            color: blueviolet;
        }
        p{
            color: paleturquoise;
        }
    </style>
</head>
<body>
    <div id="father">
        <p>你笑起来真好看</p>
    </div>

在这里插入图片描述

继承的权重为0
标签到底执行哪个样式看这个标签有没有直接选中的元素

3.3权重叠加

复合选择器会有权重叠加问题**（永远不会有进位）**
加就完事了

六、盒子模型

1. 网页布局的本质

网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子
利用CSS设置好盒子样式，然后放到相应的位置
往盒子里装东西

核心：利用CSS摆盒子

2. 盒子模型的组成

CSS盒子模型本质是一个盒子，封装周围的HTML元素，包括：边框、外边距、内边距和实际内容

border 边框
content 内容
padding 内边距
margin 外边距

3. 边框（border）

border可以设置元素的边框，边框由三部分组成：

边框宽度（粗细）
边框样式
边框颜色

属性	作用
border-width	定义边框粗细，单位px
border-style	边框样式
border-color	边框颜色

<style>
        div {
            width: 300px;
            height: 200px;
            /* 边框粗细 */
            border-width: 5px;
            /* 边框线条（实线） */
            border-style: solid;
            /* 边框颜色 */
            border-color: cornflowerblue;

        }
    </style>

3.1 复合属性

没有顺序

 <style>
        div {
            border:1px solid pink;
        }
    </style>

3.2 边框分开写法

    <style>
        div {
            /* 边框分开写法 */
            border-top: 1px solid red;
            border-bottom: 10px dashed purple;
            border-left: 10px dashed purple;
            border-rightm: 10px dashed purple;
        }
    </style>

4. 表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式，控制相邻单元格的边框

    <style>
        table,
        td {
            border: 1px solid, pink;
        }
    </style>

border-collapse合并相邻边框

    <style>
            /* 合并相邻表格边框 */
            border-collapse: collapse;
            font: size 14px;
            text-align: center;
    </style>

5. 边框会影响盒子的实际大小

边框会额外增加盒子的实际大小，两种解决方案：

测量盒子大小的时候不量边框
测量边框需要减去边框宽度

6. 内边距

属性	作用
padding-left	左
padding-right	右
padding-top	上
padding-bottom	下

6.1 复合属性

复合属性：
padding：
一个值为上下左右均为（正方形）
两个值代表上下x，左右y
三个值代表上左下
四个值代表上右下左（顺时针）

padding会影响盒子的大小
解决方案

让width/height减去多出来的内边距大小即可
List item

6.2 padding不影响盒子大小的情况

如果盒子没有指定width和height属性，此时padding不会撑开盒子大小

七、课堂练习or案例

1. 将下面的链接文字修改为红色

    <div class="nav">
        <ul>
            <li> <a href="#"> 百度</a></li>
            <li> <a href="#"> 百度</a></li>
        </ul>
    </div>

结果：

<style>
        .nav ul li a {
            color: red;
        }
    </style>

2.请见下面的大肘子文字修改为红色

    <div class="hot">
        <a href="#">大肘子</a>
        <ul>
            <li> <a href="#"> 猪头</a></li>
            <li> <a href="#"> 猪尾巴</a></li>
        </ul>
    </div>

结果：

   <style>
        .hot>a {
            color: red;
        }
    </style>

3.简易小米侧边栏

<style>
        a {
            color: rgb(255, 255, 255);
            text-decoration: none;
            background-color: rgb(68, 67, 72);
            display: block;
            width: 230px;
            height: 40px;
            text-indent: 2em;
            font-weight: 300;
            line-height: 40px;
        }

        a:hover {
            background-color: #ff6700;
        }
    </style>

效果如下：
在这里插入图片描述

4.成长守护平台小图标案例

    <style>
        h3 {
            width: 118px;
            height: 40px;
            background-color: rgb(212, 233, 208);
            font-size: 14px;
            font-weight: 400;
            line-height: 40px;
            text-indent:2em;
            background-image: url(wzry.jpg);
            background-repeat: no-repeat;
            background-position: left center;
        }
    </style>

结果如下：
在这里插入图片描述

5.王者荣耀背景大图

<style>
        body {
            background-image: url(王者荣耀.jpg);
            background-repeat: no-repeat;
            background-position: center top;
        }

在这里插入图片描述

6.精确方位

h3 {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(wzry.jpg);
            background-repeat: no-repeat;
            background-position: 20px 50px;
        }

7.五彩导航

<style>
        .nav .bg1 {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-image: url(bg1.png);
            text-align: center;
            line-height: 58px;
            color: aliceblue;
            font-size: 12px;
            text-decoration: none;
            text-align: center;
        }

        .nav .bg1:hover {
            background-image: url(bg5.png);
        }

        .nav .bg2 {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-image: url(bg2.png);
            text-align: center;
            line-height: 58px;
            color: aliceblue;
            font-size: 12px;
            text-decoration: none;
            text-align: center;
        }

        .nav .bg2:hover {
            background-image: url(bg6.png);
        }

        .nav .bg3 {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-image: url(bg3.png);
            text-align: center;
            line-height: 58px;
            color: aliceblue;
            font-size: 12px;
            text-decoration: none;
            text-align: center;
        }

        .nav .bg3:hover:hover {
            background-image: url(bg7.png);
        }

        .nav .bg4 {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-image: url(bg4.png);
            text-align: center;
            line-height: 58px;
            color: aliceblue;
            font-size: 12px;
            text-decoration: none;
            text-align: center;
        }

        .nav .bg4:hover {
            background-image: url(bg8.png);
        }
    </style>

效果如下：
在这里插入图片描述

8. padding应用-新浪导航

  <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #000;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
            display: inline-block;
            height: 41px;
            font-size: 14px;
            text-decoration: none;
            color: #4c4c4c;
            padding: 0 20px;
        }

        .nav a:hover {
            background-color: #eee;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">博客</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
    </div>
</body>