CSS学习笔记三（显示模式，背景和精灵图）

最新推荐文章于 2023-07-14 14:32:25 发布
最新推荐文章于 2023-07-14 14:32:25 发布
阅读量278 收藏 1
点赞数
分类专栏： 前端 文章标签： html 定位 css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xbean1028/article/details/116353258
版权

CSS学习笔记三（显示模式，背景和精灵图）

文章目录

CSS显示模式

Div和Span标签

  • 什么是div?
  • 作用: 一般用于配合css完成网页的基本布局
<style>
        .header{
            width: 980px;
            height: 100px;
            background: red;
            margin: auto;
            margin-bottom: 10px;
        }
        .content{
            width: 980px;
            height: 500px;
            background: green;
            margin: auto;
            margin-bottom: 10px;
        }
        .footer{
            width: 980px;
            height: 100px;
            background: blue;
            margin: auto;
        }
        .logo{
            width: 200px;
            height: 50px;
            background: pink;
            float: left;
            margin: 20px;
        }
        .nav{
            width: 600px;
            height: 50px;
            background: yellow;
            float: right;
            margin: 20px;
        }
        .aside{
            width: 250px;
            height: 460px;
            background: purple;
            float: left;
            margin: 20px;
        }
        .article{
            width: 650px;
            height: 460px;
            background: deepskyblue;
            float: right;
            margin: 20px;
        }
</style>
<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="aside"></div>
    <div class="article"></div>
</div>
<div class="footer"></div>
  • 什么是span?
  • 作用: 一般用于配合css修改网页中的一些局部信息
<style>
        span{
            color: red;
        }
</style>
<p>努力到<span>无能为力</span>, 拼搏到<span>感动自己</span></p>

  • div和span有什么区别?

    1.div会单独的占领一行,而span不会单独占领一行

    2.div是一个容器级的标签, 而span是一个文本级的标签

  • 容器级的标签和文本级的标签的区别?

    容器级的标签中可以嵌套其它所有的标签

  • 常见容器级的标签: div h ul ol dl li dt dd …

  • 文本级的标签中只能嵌套文字/图片/超链接

  • 常见文本级的标签:span p buis strong em ins del …

  • 注意点:

    不用刻意去记忆哪些标签是文本级的哪些标签是容器级, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套(ul>li, ol>li , dl>dt+dd)

CSS元素显示模式

  • 在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级

  • 在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素(其实还有一类, 行内块级)

  • 什么是块级元素, 什么是行内元素?

    块级元素会独占一行

    行内元素不会独占一行

  • 常见容器级的标签: div h ul ol dl li dt dd …

  • 常见文本级的标签:span p buis stong em ins del …

  • 常见块级元素: p div h ul ol dl li dt dd

  • 常见行内元素: span buis strong em ins del

  • 块级元素和行内元素的区别?

  • 块级元素

    独占一行

    如果没有设置宽度, 那么默认和父元素一样宽

    如果设置了宽高, 那么就按照设置的来显示

  • 行内元素

    不会独占一行

    如果没有设置宽度, 那么默认和内容一样宽

    行内元素是不可以设置宽度和高度的

  • 行内块级元素

    为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素

    不独占一行, 并且可以设置宽高

CSS元素显示模式转换

  • 如何转换CSS元素的显示模式?

  • 设置元素的display属性

    display取值

    block 块级

    inline 行内

    inline-block 行内块级

  • 快捷键

    di display: inline;

    db display: block;

    dib display: inline-block;

背景和精灵图

背景相关属性

背景颜色

  • 在CSS中可以通过background-color:属性设置标签的背景颜色

  • 取值:

    具体单词

    rgb

    rgba

    十六进制

  • 格式:

<style>
  div{
            width: 100px;
            height: 50px;
        }
  .box1{
            background-color: red;
        }
        .box2{
            background-color: rgb(0,255,0);
        }
        .box3{
            background-color: rgba(0,0,255,0.7);
        }
        .box4{
            background-color: #0ff;
        }
</style>

img

  • 快捷键:

    bc background-color: #fff;

背景图片

  • 在CSS可以通过background-image: url();设置背景图片
  • 格式:
<style>
        div{
            width: 500px;
            height: 500px;
        }
        .box1{
            background-image: url(images/girl.jpg);
            /*background-image: url(http://img4.imgtn.bdimg.com/it/u=2278032206,4196312526&fm=21&gp=0.jpg);*/
        }
</style>
<div class="box1"></div>

  • 注意点:

  • 图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址

  • 如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充

  • 如果网页上出现了图片, 那么浏览器会再次发送请求获取图片

  • 快捷键:

    bi background-image: url();

背景平铺

  • 在CSS中可以通过background-repeat属性控制背景图片的平铺方式的

  • 取值:

    repeat 默认, 在水平和垂直都需要平铺

    no-repeat 在水平和垂直都不需要平铺

    repeat-x 只在水平方向平铺

    repeat-y 只在垂直方向平铺

  • 格式:

<style>
        /*
        div{
            width: 500px;
            height: 500px;
        }
        .box1{
         background-color: red;
            background-image: url(images/girl.jpg);
            background-repeat: repeat-y;
        }
</style>
<div class="box1"></div>
  • 应用场景:
  • 可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度
  • 可以将多张图片拼接成一张图片
  • 注意点:
  • 背景颜色和背景图片可以共存, 图片会覆盖颜色
  • 快捷键
  • bgr background-repeat:

背景定位

  • 在CSS中有一个叫做background-position:属性, 就是专门用于控制背景图片的位置
  • 格式:
    background-position: 水平方向 垂直方向;
  • 取值:
  • 具体的方位名词
  • 水平方向: left center right
  • 垂直方向: top center bottom
<style>
        div{
            /*width: 500px;*/
            height: 500px;
        }
        .box1{
            background-color: red;
            background-image: url(images/girl.jpg);
            background-repeat: no-repeat;
            /*background-position: left top;*/
            /*background-position: right top;*/
            /*background-position: right bottom;*/
            /*background-position: left bottom;*/
            /*background-position: center center;*/
            /*background-position: left center;*/
            background-position: center top;
        }
</style>

<div class="box1"></div>
  • 具体的像素
  • 例如: background-position: 100px 200px;
  • 记住一定要写单位, 也就是一定要写px
  • 记住具体的像素是可以接收负数的
<style>
        div{
            /*width: 500px;*/
            height: 500px;
        }
        .box1{
            background-color: red;
            background-image: url(images/girl.jpg);
            background-repeat: no-repeat;
            /*background-position: 100px 0;*/
            /*background-position: 100px 200px;*/
            background-position: -100px -100px;
        }
</style>

  • 应用场景:

    当图片比较大的时候, 可以通过定位属性保证图片永远居中显示

  • 快捷键:

    bp background-position: 0 0;

背景属性连写

  • 和font属性一样, background属性也可以连写

  • 背景属性缩写的格式

    background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;

  • 注意点：

    background属性中， 任何一个属性都可以被省略

  • 快捷键:

    bg+ background: #fff url() 0 0 no-repeat;

背景关联

  • 默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么我们就可以修改背景图片和滚动条的关联方式

  • 如何修改背景关联方式？

    在CSS中有一个叫做background-attachment的属性， 这个属性就是专门用于修改关联方式的

  • 格式

    background-attachment：scroll;

  • 取值：

    scroll 默认值， 会随着滚动条的滚动而滚动

    fixed 不会随着滚动条的滚动而滚动

  • 快捷键:

    ba background-attachment:;

插入图片和背景图片的区别

  • 背景图片仅仅是一个装饰, 不会占用位置

    插入图片会占用位置

  • 背景图片有定位属性, 所以可以很方便的控制图片的位置

    插入图片没有定位属性, 所有控制图片的位置不太方便

  • 插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片

css精灵

  • CSS精灵图是一种图像合成技术, 全称CSS Sprite

  • CSS精灵图作用

    可以减少请求的次数, 以及可以降低服务器处理压力

  • 如何使用CSS精灵图

    CSS的精灵图需要配合背景图片和背景定位来使用

  • 示例

    <style>
        .box{
            width: 86px;
            height: 28px;
            background-image: url(images/weibo.png);
            background-position: -425px -200px;
        }
    </style>
    <div class="box"></div>

感谢极客江南，B站有相关视频，参考链接：https://www.jianshu.com/p/b87347645fc5

江山点墨
关注
专栏目录
（一）css-显示模式、基本属性、特性
前端 可乐 的博客
11-03 302
css 显示模式 、字体属性 、文本属性、css三大特性
CSS学习笔记
YuKing_HONG的博客
10-17 1444
个人学习PINK老师课程的笔记。个人笔记写得不好，敬请见谅，如果有问题没关系，那是正常的。记错了欢迎指出了。
CSS样式-图片居中显示
愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~
09-04 686
前言   在前端开发的过程中，越来越体会到css样式的重要性。 实现效果   html代码： <img src="../../assets/pictures/fail.png" style="width: 60px; height: 60px;" class="btnfail" />   是不是想到使用text-allign:center，但是使用text-allign:cent...
12-CSS基础-CSS显示模式
weixin_34021089的博客
10-04 113
Div和Span标签 什么是div? 作用: 一般用于配合css完成网页的基本布局 <style> .header{ width: 980px; height: 100px; backgro...
CSS的显示模式
weixin_45118878的博客
09-15 622
【前端】CSS的三种显示模式
CSS显示模式
weixin_73304720的博客
10-08 183
CSS显示模式 概述： 显示模式是指元素以什么方式显示，如div默认独占一行，span默认可以多个在一行排列，了解它们的特点与分类可以更好的布局网页。HTML元素一般分为块级元素与行内元素、行内块元素 1、元素默认显示模式与元素特性总结 本身属性为display:block;的元素 称为块级元素 常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol 本身属性为display:inline;的元素称为行级元素 常见行级元素：span,strong,em,i,a,b 本身属性为dis
CSS学习笔记二
qq_59301215的博客
11-17 293
css学习笔记，来自pink老师视频教学。
HTML+CSS学习笔记（温故而知新）
最新发布
qq_64510496的博客
07-14 183
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
CSS复合选择器、元素的显示模式、背景图片的设置
樱花会有盛开的一天❀
03-02 804
css复合选择器、元素的显示模式、背景图片的设置
CSS元素显示模式、背景
Fish
12-10 488
文章目录元素显示模式块元素行内元素（内联元素）行内块元素元素显示模式转换CSS的背景背景颜色背景图片背景平铺背景图片位置背景图片固定背景复合写法背景半透明背景总结 元素显示模式 元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。HTML 元素一般分为块元素和行内元素两种类型。 块元素 1.独占一行。 2.高度，宽度、外边距以及内边距都可以控制。 3.宽度默认是容器（父级宽度）的100%。 4. 是一个容器及盒子，里面可以放行内或
13-CSS基础-背景和精灵图
weixin_34380296的博客
10-04 85
背景相关属性 背景颜色 如何设置标签的背景颜色? 在CSS中可以通过background-color:属性设置标签的背景颜色 取值: 具体单词 rgb rgba 十六进制 格式: <style> div{ width: 100px; ...
CSS学习笔记——显示模式，背景，三大特性
画船听雨眠
03-20 594
实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）。如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。参数代表的意思是：x坐标和y坐标。
CSS显示模式、特性、浮动
x0572_的博客
07-20 427
css显示模式， css三大特性，css浮动
css显示模式
07-04 217
一、div标签 1、作用：配合css完成网页的基本布局二、span 1、作用：一般用于配合css修改网页中的一些局部信息<head> <meta charset="UTF-8"> <title>span</title> <style> span{ color: red; } </style> </head><
CSS的元素显示模式、盒子模型、背景（颜色、图片、平铺、图片位置、图像固定）
Sco_jing的博客
04-23 2156
文章目录1.CSS的元素显示模式1.1 什么是元素显示模式1.2 块元素1.3 行内元素1.4 行内块元素1.5 元素显示模式总结1.6 元素显示模式转换2.盒子模型：网页布局的基础2.1 外边界/距（margin）2.1.1 外边距典型应用2.2 填充/内边距（padding）2.3 边框（border)2.3.1 盒子的边框线2.3.2 表格的细线边框2.4 清除页面元素的默认内外边距3. 背景3.1 背景颜色3.2 背景图片3.3 背景平铺3.4 背景图片位置3.5 背景图像固定（背景附着）3.6 背
css3图片展示方式
weixin_33836874的博客
07-19 185
<view class='img_block' id='mjltest'> <view class='text_view'> <view class='{{cell_class}}'> <image src='http://192.168.31.193/images/img0_4_1...
html css3不拉伸图片显示效果,类似淘宝的
热门推荐
开心大表哥
09-12 4万+
1.利用transform属性不拉伸显示图片,(路径问题需要按需求修改）； html:<div id="surface-div1"> <img :src="pic1" class="surface-img"> </div>CSS:#surface-div1{ position: relative; width: 372px; height: 175px; float
CSS学习笔记：WEB开发中的样式精华
"很好的css学习笔记，pdf格式（64页），包含了CSS+DIV的学习内容，适合初学者逐步了解和掌握CSS技术。" 这篇CSS学习笔记详细介绍了CSS的基础知识，包括其起源、作用以及如何改善HTML页面的设计。CSS，即层叠样式表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值