css基础(3)

css基础(3)

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:背景图像纵向平铺

背景位置

语法:
background-position:length | | length
background-position:position | | position
参数:
length:百分比
position:top | center | bottom | left | right | center
说明:
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为:(0% 0%)。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注意:

  1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
  2. 如果和精确单位和方位名字混合使用,则必须是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>
在这里插入图片描述

发表评论