前端复习大纲-CSS02

最新推荐文章于 2024-07-20 15:40:46 发布

莩甲柚

最新推荐文章于 2024-07-20 15:40:46 发布

阅读量63

点赞数

分类专栏：前端学习文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_36303923/article/details/121164281

版权

前端学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

CSS背景属性

在这里插入图片描述

CSS2.1

background-color: #ff99ff;设置元素的背景颜色, 默认值是transparent（透明）
- 单词: background-color: red;
- rgb表示法: background-color: rgb(255,0,0);
- 十六进制表示法: background-color: #ff0000; /简写 #f00/
- RGBA 表示法: background-color: rgba(0, 0, 255, 0.3); /* Red 红、Green 绿、Blue 蓝、Alpha 透明度 */
- HSLA 表示法: background-color: hsla(240,50%,50%,0.4); /* 色调饱和度亮度透明度 */
background-image: url(images/2.gif);将图像设置为背景
- 实际开发常见于logo和一些装饰性的小图片或者是超大的背景图片
- 或者精灵图
background-repeat: no-repeat;设置背景图片是否重复及如何重复，默认平铺满。（重要）
- repeat 平铺;
- no-repeat不要平铺；
- repeat-x横向平铺；
- repeat-y纵向平铺。
background-position: x y; 设置背景图片在当前容器中的位置。参数x, y坐标可以使用精确单位或者方位名词
- 参数值是方位名词(top center bottom left center right)
  - 如果指定的两个值都是方位名词，则两个值前后顺序无关， left top 和top left效果一致
  - 如果只指定了一个方位名词，另一个省略，则第二个值默认是居中对齐
- 参数值是精确单位
  - 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
  - 如果只指定了一个数值，那该数值一定是x坐标，另一个默认是垂直居中
- 参数是混合单位
  - 第一个是x坐标，第二个是y坐标
background-attachment: scroll; 设置背景图片是否跟着滚动条一起移动。属性值可以是：
- scroll（与fixed属性相反，默认属性）
- fixed（背景就会被固定住，不会被滚动条滚走）
background，综合属性, 它的作用是：将上面的多个属性写在一个声明中
- 一般约定的顺序是：background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

background: black url(images/bg.jpg) no-repeat fixed center top;

background：rgba(0, 0, 0, 0.3); 背景颜色半透明
- 最后一个参数是alpha透明度，取值范围0-1
- 习惯把0.3的0省略掉，写为background：rgba(0, 0, 0, .3);
- 背景半透明指的是盒子背景半透明，盒子里面的内容不受影响
- CSS3新增属性，IE9+版本浏览器才支持
- 现在实际开发中，不太关注兼容性写法了，可以放心使用

CSS3

background-origin
background-clip 背景裁切
background-size 调整尺寸
多重背景

案例:五彩导航栏

链接属于行内元素, 但此时需要宽度高度, 因此需要模式转换
里面的文字需要水平和垂直居中, 需要单行文字垂直居中
链接里面需要设置背景图片, 需要背景的相关属性
鼠标经过背景图片变化, 需要用到链接伪类选择器

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

在这里插入图片描述

CSS 和 HTML 结合的方式

1. 行内样式：
在某个特定的标签里采用 style属性。范围只针对此标签。
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

<p style="color:white;background-color:red">我不会就这样轻易的狗带</p>

2. 内嵌样式表：
在页面的 head 里采用 <style>标签。范围针对此页面。
该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

<style type="text/css">
    p {
        font-weight: bold;
        font-style: italic;
        color: red;
    }
</style>

<body>
    <p>111</p>
    <p style="color:blue">222</p>
</body>

3. 引入外部样式表 css 文件:
引入样式表文件的方式又分为两种：

采用标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
采用 import，必须写在<style>标签中，并且必须是第一句。例如：@import url(a.css) ;

两种引入样式方式的区别：外部样式表中不能写标签，但是可以写 import 语句。
在这里插入图片描述

莩甲柚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端复习大纲-CSS02

目录CSS背景属性案例:五彩导航栏CSS 和 HTML 结合的方式CSS背景属性CSS2.1background-color: #ff99ff;设置元素的背景颜色, 默认值是transparent（透明）单词: background-color: red;rgb表示法: background-color: rgb(255,0,0);十六进制表示法: background-color: #ff0000; /简写 #f00/RGBA 表示法: background-color: r
复制链接

扫一扫