ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

5.前端CSS—属性

2020-08-08 19:31:23  阅读：178  来源： 互联网

标签：repeat 前端 height 字体 background font CSS 属性


目录

一、字体属性

1、font-size（字体大小）

p{
	font-size: 14px;
}

font-size 属性可设置字体的尺寸。

​ px：像素，稳定和精确

​ %：把 font-size 设置为基于父元素的一个百分比值，布局时用到。

​ em：移动端字体样式大小，相对于其父元素来设置字体大小

​ rem：可以换算为各种移动端，相对于根元素来设置字体大小

2、font-weight（字体粗细）

font-weight字重，可用来调整字体粗细。

/*font-weight: normal;*/
/*font-weight: bold;*/
/*font-weight: bolder;*/
font-weight: 500;

取值说明：

值 描述
normal 默认值，标准粗细
bord 粗体
border 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细

3、font-family（字体系列）

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
}

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

p{
    width: 300px;
    height: 60px;

    /*综合性写法*/
    font: 15px/30px"宋体";
    /* 等价于
    font-size: 14px;
    line-height: 30px;
    font-family: '宋体';
    */
}

使用font-family注意几点：

  1. 网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，
    比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，
    那么就会变成宋体
    页面中，中文我们只使用： 微软雅黑、宋体、黑体。
    如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman

  2. 为了防止用户电脑里面，没有微软雅黑这个字体。
    就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，
    没有安装微软雅黑字体，那么就是宋体：
    font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。

  3. 要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体： font-family: "Times New Roman","微软雅黑","宋体";

  4. 所有的中文字体，都有英语别名，要知道： 微软雅黑的英语别名：font-family: "Microsoft YaHei";
    宋体的英语别名： font-family: "SimSun";font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

  5. 行高可以用百分比，表示字号的百分之多少。一般来说，都是大于100%的，因为行高一定要大于字号。 font:12px/200% “宋体” 等价于 font:12px/24px “宋体”; 反过来，比如： font:16px/48px “宋体”;等价于 font:16px/300% “宋体”

CSS font-family 各名称一览表:

https://blog.csdn.net/cddcj/article/details/70739481

4、color（字体颜色、背景颜色）

颜色表示方法有三种：颜色名称单词（如:red）、rgb表示（如:rgb(255,0,0) ）、十六进制值（如:#FF0000）。

（1）RGB原理：光学显示器每个像素都是由三原色（红绿蓝）发光原件组成的，靠明亮不同调成不同的颜色。

　　用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值；其中255代表纯色，0代表无色。

常见颜色

div{
    /*黑色：*/
    background-color: rgb(0,0,0);
    /*光学显示器，每个元件都不发光，黑色的。*/

    /*白色：*/
    background-color: rgb(255,255,255);

    /*颜色可以叠加，比如黄色就是红色和绿色的叠加：*/
    background-color: rgb(255,255,0);

    background-color: rgb(111,222,123);
    /*就是红、绿、蓝三种颜色的不同比例叠加。*/
}

后来还演化出了rgba，可以用来实现透明度的调整：

div{
    background-color: rgba(0,0,0,.1);
}

（2）16进制表示法：

所有用#开头的值，都是16进制的。例如：#ff0000：红色
　　16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0)。

　　十六进制可以简化为3位，所有#aabbcc的形式（2位2位一样的），能够简化为#abc;

常见：

000 黑

fff 白

f00 红

333 灰

222 深灰

ccc 浅灰

二、文字属性

1、text-align（文本匹配）

text-align 属性规定元素中的文本的水平对齐方式。

值 描述
left 左对齐，默认值
right 右对齐
center 居中对齐
justify 两端对齐

2、text-decoration（文字装饰）

值 描述
none 默认，定义标准的文本。
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本下的一条线
inherit 继承都元素的text-decoration属性的值 
/*设置线的颜色*/
text-decoration: underline blue;

使用最频繁的是消除a标签的默认样式

text-decoration: none;

3、line-height（行高）

p{
    /*行高*/
    line-height: 100px;
}

常用于文本垂直居中

（1）单行文本垂直居中

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 50px;
            border: 1px solid red;
            /*行高的意思：
            公式：行高=盒子的高度，让文本垂直居中，
            但是只适应于单行文本。
            */
            line-height: 50px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div>
        一行文字
    </div>
</body>

　公式：行高=盒子的高度，让文本垂直居中（只适用于单行）

（2）多行文本垂直居中

注意：line-height一定要大于font-size，否则所有字都会挤在一起，影响美观。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 300px;
            /*height: 200px;*/
            height: 160px;   /* padding加了40px,height一定要减40px */
            border: 1px solid red;
            /*运用padding居中*/
            padding-top: 40px;
            line-height: 30px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <!--一个行高30px,一共4列，那就是120px
    总的高度是200px,如果让整个行高垂直居中在当前的盒子中。
    （200-120)/2=40px，设置padding-top,height高度
    -->
    <div>
       第一行文字
       第二行文字
    </div>
</body>

一个行高（line-height）30px,一共4列，那就是120px，总的高度是200px,如果让整个行高垂直居中在当前的盒子中。(200-120)/2=40px，设置padding-top=40px, height高度-40px。

　　总之：利用padding和line-height实现多行垂直居中需要通过精确计算实现。

4、cursor（光标）

p{
    text-decoration: underline blue;
    color: blue;
    cursor: pointer;  /* point在鼠标移上去时，光标呈现为指示链接的指针（一只手） */
}

cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

5、text-indent（首行缩进）

text-indent 属性规定文本块中首行文本的缩进。

注意：允许使用负值。如果使用负值，那么首行会被缩进到左边。

p{
    /*text-indent:50px;*/
    /* 首行缩进以em为准 */
    text-indent: 2em;   /* 不论字体大小， 2格字*/
}

三、背景属性

常用背景相关属性：

属性 描述
background-color 规定要使用的背景颜色。
background-image 规定要使用的背景图像。
background-size 规定背景图片的尺寸。
background-repeat 规定如何重复背景图像。
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-position 规定背景图像的位置。
inherit 规定应该从父元素继承background属性的设置。

1、background-image（背景图片）和background-repeat（平铺）

网页设置背景图方法：

body{
    background-image: url("./images/bojie.jpg");
}

background-repeat取值范围：

值 描述
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承background-repeat属性的设置。

2、background-position（背景图像位置）

<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 1500px;
        height: 1600px;
        background-image: url(./images/bojie.jpg);
        background-repeat: no-repeat;

        /*第一个是水平位置，第二个是垂直位置
        正值的时候，第一个值往右偏移，第二个值表示往下偏移
        负值则相反
        */
        /*background-position: 100px 100px;*/
        background-position: 100px -100px;
    }
</style>

background-position:200px 100px——第一个是水平位置，第二个是垂直位置
正值的时候，第一个值往右偏移，第二个值表示往下偏移；负值则正好相反。

由于导入背景图片的时候，默认就会平铺。因此需要设置background-repeat: no-repeat;

3、雪碧图（精灵图）技术

　background-position除了移动位置，更重要的是用来定位切图，也叫css精灵图。用处：为了避免网站大量img，请求过多，把很多小图标合并到一张图上，然后通过css的background-position切出来需要的图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雪碧图</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        box1{
            width: 48px;
            height: 48px;
            background-image: url("./images/1.png");
            background-repeat: no-repeat;
            background-position: 0 -528px;/*在Photoshop上查看宽高*/
        }
        box2{
            width: 48px;
            height: 48px;
            background-image: url("./images/1.png");
            background-repeat: no-repeat;
            background-position: 0 -440px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

设置背景图位置方向：

　　水平方向： left center right

　　垂直方向： top center bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 1500px;
        height: 1600px;
        border: 1px solid red;
        background-image: url(./images/bojie.jpg);
        background-repeat: no-repeat;
        /*水平方向 left center right
          垂直方向 top center bottom
        */
        background-position: center top;
    }
</style>
</head>
<body>
    <div>
        一行文字
    </div>

</body>
</html>

常规写法

body{
    background-image: url("./images/banner.jpg");
    background-repeat: no-repeat;
    /*水平居中通天banner图*/
    background-position: center top;
}

综合属性写法：

body{
    /*设置综合属性*/
    background: red url("./images/banner.jpg") no-repeat center top;
}

4、background-attachment（固定背景图像）

div{
    /*综合属性*/
    width: 1200px;
    height: 1600px;
    background: url(./images/bojie.jpg) no-repeat 0 0;
    /*固定背景*/
    background-attachment: fixed;
    color: white;
}

把固定背景属性也加入综合属性：

div{
    width: 1200px;
    height: 1600px;
    /*综合属性*/
    background: url(./images/bojie.jpg) no-repeat 0 0 fixed;
    color: white;
}

设置了background-attachment后，下上滚动页面内容时，背景图片保持不变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-attach</title>
    <style type="text/css">
    div{
        /*综合属性*/
        width: 1200px;
        height: 1600px;
        background: url(./images/bojie.jpg) no-repeat 0 0 fixed;
        /*固定背景*/
        /*background-attachment: fixed;*/
        color: white;
    }
    </style>
</head>
<body>
    <div>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
    </div>
</body>
</html>

四、位置属性

position，定位有三种：1.相对定位——position:relative;2.绝对定位——position:absolute;3.固定定位——position:fixed;

标签：repeat,前端,height,字体,background,font,CSS,属性
来源： https://www.cnblogs.com/journeyer-xsh/p/13459984.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有