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

编程语言 2023-07-01 22:14:29 阅读次数: 0

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

今日学习

一、EMMET语法

1.emmet语法快速生成HTML

  1. 快速生成标签——tab
  2. 快速生成多个div
 div*10
  1. 父子关系 >
  2. 兄弟关系 +
div+p
  1. 快速生成clss
p.class(clss名)+tab键
  1. 快速生成demo
.demo$*5+tab键
  1. 想生成的标签里面默认显示几个文字
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. 网页布局的本质

网页布局过程：

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

核心：利用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. 边框会影响盒子的实际大小

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

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

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>

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

八、写在最后

累

在这里插入图片描述明天见朋友们~

猜你喜欢

转载自blog.csdn.net/P9ulp/article/details/125765199
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022