css基础（3）

最新推荐文章于 2024-10-12 10:09:54 发布

触不可及的Allen

最新推荐文章于 2024-10-12 10:09:54 发布

阅读量182

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/Jy123_/article/details/105806062

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

css书写规范

开始就形成良好的书写规范，是你专业化的开始。

空格规范

选择器与{}之间必须包含空格例如h1 {}
属性名与之后的：之间不允许包含空格，：与属性值之间必须包含空格例如font-size: 12px;

选择器规范

当使用交集选择器时，每个选择器声明必须独占一行。例如：
h1,
a {
font-size: 16px;
}
建议：选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。

属性规范

属性定义必须另起一行。
.selector {
margin: 0;
padding: 0;
}

css背景（background）

css可以添加背景颜色和背景图片

background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
background-color	背景颜色
背景的合写（复合属性）
background:背景颜色背景图片地址背景平铺背景滚动背景位置

背景图片（image）

语法：background-image: none | url(url)
参数：none （无背景图默认） URL（使用绝对或者相对路径的图片）

背景平铺

语法：background-repeat：repeat | no-repeat | repeat-x | repeat-y
参数：
repeat：背景图像在纵向和横向上平铺（默认）
no-repeat：背景图像不平铺
repeat-x：背景图像横向平铺
repeat-y：背景图像纵向平铺

背景位置

position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。实际工作用的最多的，就是背景图片居中对齐了。

背景附着

语法：background-attachment：scroll | fixed
参数：
scroll ：背景图像是随着对象内容滚动
fixed ：背景图像固定
设置背景图像是随对象内容滚动还是固定的。

背景简写

background：背景颜色背景图片链接背景平铺背景滚动背景位置
示例：background：transparent url(image.jpg) repeat-y scroll 50% 0;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片</title>
    <style>
        body {
            width: 700px;
            height: 500px;
            /* 背景图片 */
            /* background-image: url(a.jpg); */
            /* 背景平铺 */
            /* background-repeat: repeat; */
            /* background-repeat: repeat-x; */
            /* background-repeat: repeat-y; */
            /* background-repeat: no-repeat; */
            /* 背景图片大小 */
            /* background-size: 350px; */
            /* 背景图片位置 */
            /* background-position: center; */
            /* 背景附着 */
            /* background-attachment: scroll; */
            /* background-attachment: fixed; */
            /* 简写 */
            background: url(a.jpg) no-repeat scroll 50% 0;
        }

        p {
            height: 1500px;
        }
    </style>
</head>

<body>
    <p>jiadkaiuhaf</p>
</body>

</html>

在这里插入图片描述

背景透明

css3支持的语法：background：rgba(0,0,0,0.3);
最后一个参数是alpha透明度取值范围0-1之间
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

背景缩放（css3）

语法：background-size设置背景图片的尺寸
参数：
1.可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）
2.设置为cover时，会自动调整缩放比例，保证图片始终填充背景区域，如果溢出会被隐藏
3.设置contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
			background-size: 300px 100px;
			/* background-size: contain; */
			/* background-size: cover; */

多背景（css3）

以逗号分隔可以设置多背景，可用于自适应布局

一个元素可以设置多重背景图像
每组属性间使用逗号分隔
如果设置的多重背景图之间存在交集（重叠关系），前面的背景图会覆盖在后面的背景图之上
为了避免背景色将图像盖住，背景色通常定义在最后一组

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

凹凸文字

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凹凸文字</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: #ccc;
        }

        div {
            font-size: 70px;
            font-family: "微软雅黑";
            text-align: center;
            color: #ccc;
        }

        /* text-shadow：垂直位置 水平位置 阴影位置 阴影颜色 */
        .tu {
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }

        .ao {
            text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000;
        }
    </style>
</head>

<body>
    <div class="tu">我是凸起的文字</div>
    <div class="ao">我是凹起的文字</div>
</body>

</html>

在这里插入图片描述

导航栏案例

文本的修饰
text-decoration 通常用于给链接修饰效果
值描述
none 默认，定义标准的文本
underline 定义文本下一条线，下划线
overline 定义文本上的一条线
line-through 定义穿过文本向下的一条线
使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素-用行高垂直居中</title>
    <style>
        a {
            text-decoration: none;
            width: 200px;
            height: 50px;
            color: rgb(44, 41, 41);
            display: inline-block;
            line-height: 50px;
            text-align: center;
        }

        a:hover {
            background: url(h.png);
        }
    </style>
</head>

<body>
    <a href="#">下载专区</a>
    <a href="#">零食专区</a>
    <a href="#">运动专区</a>
    <a href="#">休闲专区</a>
</body>

</html>

在这里插入图片描述