6月14日web学习笔记总结

今天,学习了以下内容:

1.文字阴影

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

属性:

h-shadow 水平阴影的位置

v-shadow 垂直阴影的位置

blur 模糊的距离

color 阴影的颜色

前两项必写,后两项选写

多重阴影:text-shadow:-5px 0px cyan,5px 0px red;

实例:实现下图效果

代码如下:

<style>
        body {
            background-color: #000;
        }
        
        .con {
            font-size: 60px;
            color: white;
            text-shadow: -5px 0 0 cyan, 5px 0 0 red;
            font-family: 黑体;
        }
    </style>

<body>
    <div class="con">爱自己,生活更美好!</div>
</body>

2.复合选择器

1.并集选择器

2.后代选择器->用来选择元素或元素组的子孙后代->精准选择

中间用空格隔开

3.子元素选择器

选择最近一级元素 用>隔开

3.标签的显示模式

1.标签的显示模式有3种:

块级元素(block:p div h1-h6 li ul ol hr...)

特点:独占一整行,可以设置宽和高

行内元素(inline:span a b strong i em u ins s del...)

特点:不独占一行,不可以设置宽和高,宽和高由内容撑开

行内块元素(inline-block:img put button)

特点:不独占一行,可以设置宽高

2.标签的嵌套关系:

块级元素可以放任何元素

行内元素只能放文本或其他行内元素

3.显示模式的转换

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

4.背景样式

1.背景颜色

background-color 默认值 transparent透明色

.box {
    /* 下面3种写法是等价的 */
    background-color: red;
    background-color: rgb(255, 0, 0);
    background-color: #ff0000;
}

2.背景图片

background-image: url("图片所在路径");

3.图片重复方式

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

repeat 默认值,默认情况下,在水平和垂直方向上都重复

4.图片位置

background-position:center center;水平和垂直位置都居中

水平:left center right

垂直:top center bottom

还可以用像素和百分比表示

精灵图:为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。

精灵图是一种网页图片应用处理方式,原理是将多个小图标或图片合并到一张大图中,然后通过CSS的background-position属性来定位并显示需要显示的图片部分。在网页中引入精灵图后,只需要一次HTTP请求就可以加载所有的小图标或图片,然后通过改变CSS的background-position属性来显示不同的图片部分。

我们需要使用CSS的background-image background-repeat background-position属性进行背景定位,其中最关键的是使用background-position 属性精确地定位。

小背景图片的背景定位基本都是负值。

好咯,我要过星期天啦~

  • 13
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值