css学习记录1002

最新推荐文章于 2024-08-18 23:31:20 发布

Rayaner

最新推荐文章于 2024-08-18 23:31:20 发布

阅读量101

点赞数

分类专栏：前端研二上文章标签： css

本文链接：https://blog.csdn.net/ray7777777777/article/details/120585162

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

研二上

5 篇文章 0 订阅

订阅专栏

目录：css背景、css三大特性

参考：css2.0中文手册

1、css的背景background（复合属性5个，+1个（背景色半透明），没有特定书写顺序，一般按手册顺序）常用，img标签插入图像不常用（因为无背景的属性）

①背景图片background-image属性：

（控制位置是因为有位置的属性，大的图片比屏幕大，若用img则放不开不能调位置，用背景则显示核心部分。下图：王者荣耀官网）

注意：同时添加背景图片和背景颜色，背景图片会压住背景颜色

②背景位置background-position：

注意：参数若为position方位名词，则两个值前后顺序无关，例如right，center与center（自然竖直为中），right（隐含水平意思）一样；若参数值是精确坐标length或者方位名词和精确坐标两者混合，则第一个一定是x，第二个一定是y

例子：；大背景图片

③背景固定background-fixed：用来生成视差滚动的效果（下图：qq官网）

注意：背景属性设置到盒子上，比如body、div等，然后盒子的对象内容相对背景图片是否固定；而背景属性中的color和image是对于此盒子color在底，image在上

④css3中加了背景色半透明效果，写法background:rgba(0,0,0,0.3);

注意：rgb（0,0,0）是黑色（记忆：反比），a为0是完全透明（记忆：正比），1为完全不透明；

注：很多背景装饰图片打开是在一个大图片上，这个是精灵图，也是用背景来做

2、案例

注意：一个大盒子，放了行内块元素链接a。对a进行行内块元素宽高、text、font、背景（分别设置），以及链接伪类选择器的背景（分别）设置即可。

其中，垂直居中小于行内块元素a的高度，则整体上移。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav a{
            display: inline-block;
            width: 120px;
            height: 58px;
            text-align: center;
            line-height: 48px;
            text-decoration: none;
            color: white;
        }
        .nav .bg1 {
            background-image: url(images/bg1.png);
        } 
        .nav .bg1:hover {
            background-image: url(images/bg11.png);
        } 
        .nav .bg2 {
            background-image: url(images/bg2.png);
        } 
        .nav .bg2:hover {
            background-image: url(images/bg22.png);
        } 
    </style>
</head>
<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>

    </div>
   
</body>
</html>

3、css三大特性

注意：跟文字相关的能继承，包括行高，但是高度，内外边距都不能继承

应用场景：比如搜狐里面大部分字体颜色一样，不用挨个指定颜色，可以给body指定颜色即可，简化代码

（常用）

注：层叠性是同一元素相同选择器指定相同样式；优先级是同一元素多个不同选择器

注：书写方式，color:red!important；

继承的权重为0的意思是子元素指定样式后并不会继承父元素的样式，两者权重互不干扰，而第二个特性继承性中说的是子元素未指定样式，会继承父元素的某些样式。可解释为什么在body设置color后，在其中的a标签仍然是蓝色，说明a链接浏览器默认设置了color为蓝且有下划线；

若有10个标签选择器累加，则不会有进位，结果是0,0,0,10

4、css盒子模型

注：每个标签都是盒子，网页布局就是准备标签，往盒子装文字、图片等内容，设置盒子的css样式即宽高、居中等。

Rayaner

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习记录1002

参考：css2.0中文手册1、css的背景background（复合属性5个，+1个（背景色半透明），没有特定书写顺序，一般按手册顺序）常用，img标签插入图像不常用（因为无背景的属性）①背景图片background-image属性：（控制位置是因为有位置的属性，大的图片比屏幕大，若用img则放不开不能调位置，用背景则显示核心部分。下图：王者荣耀官网）注意：同时添加背景图片和背景颜色，背景图片会压住背景颜色②背景位置background-position：注意：参数...
复制链接

扫一扫

专栏目录