CSS属性设置

2022-01-08 15:12:05

CSS属性设置

一 字体属性

-1. font-weight: 文字粗细

  • normal 默认值. 标准粗细
  • bold 粗体
  • bolder 更粗
  • lighter 更细
  • 100~900 设置具体粗细,400相当于normal,700等同于bold
  • inherit 继承父元素字体的粗细值

-2. font-style: 文字风格

  • normal 正常,默认就是正常
  • italic 倾斜

-3. font-size: 文字大小

  • 单位为px,em
  • fs: 一般是12px或13px或14px
  • 注意:
    1. 通过font-size设置文字大小一定要带单位
    2. 如果设置成inherit表示继承父元素的字体大小值

-4. font-family: 文字字体

  • font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif
  • 常见字体:
    • serif衬线字体
    • sans-serif非衬线字体
    • 中文有: 宋体,微软雅黑,黑体.
  • 注意:
    1. 设置的字体必须是用户电脑里已经安装的字体,浏览器会使用它识别第一个值.
    2. 如果取值为中文,需要用单或双引号括起来. 是不是中文都括起来就好.

-5. 文字属性简写

/*font-weight: bolder;*/
/*font-style: italic;*/
/*font-size: 50px;*/
/*font-family: ‘serif‘,‘微软雅黑‘;*/
简写为
font: bolder italic 50px ‘serif‘,‘微软雅黑‘;

-6. color: 文字颜色

取值 举例格式 描述
英文单词 color：red; 大多数颜色都有对应的英文单词描述，但英文单词终究有其局限性:无法表示所有颜色
rgb color：rgb(255,0,0) 什么是三原色？ red，green，blue 什么是像素px？ 对于光学显示器，一整个屏幕是有一个个点组成，每一个点称为一个像素 点，每个像素点都是由一个三元色的发光元件组成，该元件可以发出三种颜 色，red，green，blue。 发光元件协调三种颜色发光的明亮度可以调节出其他颜色 格式：rgb(255,0,0); 参数1控制红色显示的亮度 参数2控制绿色显示的亮度 参数3控制蓝色色显示的亮度数字的范围0-255，0代表不发光，255代表发光，值越大越亮红色：rgb(255,0,0) 绿色：rgb(0,255,0) 蓝色：rgb(0,0,255) 黑色：rgb(0,0,0) # 所有都不亮 白色：rgb(255,255,255) # 所有都最亮 灰色：只要让红色/绿色/蓝色的值都一样就是灰色，而且三个值越小，越偏 黑色，越大越偏白色
rgba color：rgba(255,0,0,0.1); rgba到css3中才推出，比起rgb多了一个a，a代表透明度 a取值0-1，取值越小，越透明
十六进制 color: #FF0000; #FFEE00 其中FF代表R，EE代表G，00代表B 只要十六进制的颜色每两位都是一样的，那么就可以简写为一个， 例如#F00 等同于#FF0000

-7. 举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        p {
            /*字体的大小*/
            font-size: 100px;
            /*字体的家族,当第一个值本机没有时,就会往下找,直到找到一个本机有的家族,都没有就使用浏览器默认家族*/
            font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
            /*设置字体的粗细*/
            font-weight: bold;
            /*设置字体的样式*/
            font-style: italic;
            
            /*可以统一写到font属性中*/
            font: bold italic 100px "Bitstream Vera Sans Mono";

            /*设置颜色的四种方式*/
            /*英文单词关键字赋值*/
            color: red;  
            /*十六进制赋值*/
            color: #8a8a8a;
            /*rgb 三原色 red;green;blue调色
            每个数值在0-255之间,也可以使用百分比(%)调色
            */
            color: rgb(255,255,12);
            /*rgba 三原色加透明度(透明度在0-1之间) */
            color: rgba(30%,20%,40%,0.1);
        }
    </style>
</head>
<body>
    <p>
        你好啊哈哈哈哈
    </p>
</body>
</html>

提示: 一般字体的配置都是在开发前统一设置好的.

二 文本属性

-1. text-align: 规定元素中的文本的水平对齐方式.

  • text-aliign:left; 表示左边对齐,默认值
  • text-align:right; 表示右对齐
  • text-align:center; 表示居中对齐
  • text-align:justify; 俩端对齐

-2. text-decoration: 文本装饰

  • text-decoration=none; 默认.定义标准的文本,通常用来去掉a标签的下划线
  • text-decoration=unerline; 定义文本下的一条线.
  • text-decoration=overline; 定义文本上的一条线.
  • text-decoration=line-through;定义穿过文本下的一条线.
  • text-decoration=inherit; 继承父元素的text-decoration属性的值.

-3. text-indent: 首行缩进

  • 将段落的第一行缩进 32像素.

  • p {

    ? text-indent: 32px;

    }

-4.line-height: 行高

行高介绍图:

CSS属性设置

-5. 举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS属性之文本</title>
    <style>
        div {
            width: 600px;
            height: 600px;
            /*字体的大小*/
            font-size: 24px;
            /*字体的颜色*/
            color: rgba(10%,20%,30%,0.5);
            /*文本水平对齐*/
            text-align: center;
            /*文本垂直方向对齐方式
            注意: 设置成和盒子一样高就可以实现文本垂直居中
            */
            line-height: 600px;
            /*文本装饰 可以是关键字也可以是颜色*/
            text-decoration: none;
            /*文本的首行缩进 
            2em就是俩倍的文本px大小
            */
            /*text-indent: 2em;*/
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <span>你好啊,嘿嘿....</span>
    </div>
</body>
</html>

三 背景属性

注意: 没有宽高的标签,即便设置了背景也无法显示

属性介绍

  • background-color:颜色; 设置标签的背景颜色的
  • background-image:url(""); 设置标签的背景图片
  • background-size: widthpx hrightpx; 设置标签的图片背景的宽高.
  • background-repeat: ;设置背景图片的平铺方式
  • background-attachment: ; 设置标签的背景图片在标签中固定或随着页面滚动而滚动
  • background-position: ; 前端的坐标轴x轴为宽,y轴为高,左上角为起始点.
  • inherit: ;设置从父元素继承background数值值;
  • 背景缩写 可以将上面的所以属性放到background:;内

-1. 背景属性缩写

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css属性之图片背景</title>
    <style>

        .box1 {
            width: 600px;
            height: 600px;
            /* 背景颜色为黄色 */
            background-color: yellow;
            /* 背景图片为0.jpg */
            background-image: url("0.jpg");
            /* 背景图片大小宽为600px 高度自适应 */
            background-size: 600px;
            /* 图片平铺关闭 */
            background-repeat: no-repeat;
            /* 图片的位置在水平和垂直居中 */
            background-position: center center;
            /* 随着滚动条滚动 在盒子内都可以显示,不会随着滚动条的滚动固定消失
            但需要注意的是 用了position再用fixed会出现页面布局的混乱 
            */
            /*background-attachment: fixed;*/
        } 
        .box1 {
            width: 600px;
            height: 600px;
            /* 属性的位置放的也是有讲解的  */
            background: yellow url("0.jpg") no-repeat center center/600px;
        }

        .box2 {
            width: 600px;
            height: 1000px;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">

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

-2. 背景图片和插入图片的区别

  1. 背景图片仅仅只是一个装饰,不会占位置.

    插入图片会占用位置.

  2. 背景图片有定位属性,可以很方便的控制图片的位置.

    而插入图片不可以

  3. 插入图片语义比背景图片的语义要强,所以在企业开发中如果你的图片想被搜索引擎收录

    那么推荐使用插入图片.

  4. 背景图片的盒子内容,即宽高得自己设置,而插入图片是有盒子大小的.

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插入图片和背景图片的区别</title>
    <style>
        .box1 {
            width: 500px;
            height: 324px;
            background-image: url("0.jpg");
            background-position: center center;
            text-align: center;
            line-height: 324px;
            font-size: 24px;
        }
        .box2 {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div class="box1">
        你好啊,我的图片是背景图片,我可以在上面显示
    </div>
    <div class="box2">
        <img src="0.jpg" >
        我不太好,我的图片是插入图片,我只能被放在下面显示.
    </div>
</body>
</html>

-3. 背景图片练习

背景图居中显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片属性练习</title>
    <style>
        .box1 {
            width: 800px;
            height: 800px;
            background-image: url("img/bg2.jpg");
            background-size: 800px;
            background-repeat: no-repeat;
            background-position: center center;
            margin-left: 25%;
        }
    </style>
</head>
<body>
    <div class="box1">

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

背景图片和背景图片拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景拼接练习</title>
    <style>
        .box1 {
            margin:0;
            width: 1280px;
            height: 720px;
            background-image: url("img/bg1.jpg");
            background-size: 100% 100%;
        }
        .box2 {
            width: 1280px;
            height: 720px;
            background-image: url("img/ksyx.png");
            background-repeat: no-repeat;
            background-position: center bottom;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">

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

背景图片和插入图片拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片拼接</title>
    <style>
        .box1 {
            width: 1280px;
            height: 720px;
            background-image: url("img/bg1.jpg");
        }

        .img1 {
            display: block;
            padding-top: 611px;
            padding-left: 495px;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="box1">
        <a href="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3397664853,2770170984&fm=26&gp=0.jpg">
            <img class="img1" src="img/ksyx.png" >
        </a>
    </div>
</body>
</html>

导航条案例

是为了发送的背景图片太大了,可以先将图片在服务器那个压缩,然后到客户端再平铺成原来像素的大小.即加快了上网效率.

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

    <style type="text/css">
         .navbar {
             margin: 0 auto;
             width: 920px;
             height: 50px;
             background-image: url("dht.png");
             background-repeat: repeat-x;

        }

    </style>
</head>
<body>

<div class="navbar">
</div>
</body>
</html>

-4. rgba与opacity

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rgba和opacity的区别</title>
    <style>
        .box1 {
            width: 800px;
            height: 800px;
            font-size: 24px;
            color: red;
            background-color: rgba(4,4,44,0.6);
            /* 可以设置整个标签内的透明度 */
            opacity: 0.6;
        }
    </style>
</head>
<body>
    <div class="box1">
        我的透明度如果被background-color属性配置rgba是不会变哦
    </div>
</body>
</html>

-5. 精灵图

  1. 什么是CSS精灵图(可以通过浏览器抓包分析: 微博,京东,淘宝都有精灵图)

    CSS精灵图是一种图像合成技术

  2. CSS精灵图的作用

    一个电商网址可能有很多图片,比如有10张,这就要求客户端发10此请求给服务端

    但其实一次请求的宽带就足够容纳10张图片的大小

    精灵图的作用就是用来减少请求次数,以及降低服务器处理压力.

  3. 如何使用CSS精灵图

    CSS的精灵图需要配合背景图片和背景定位来使用

  4. 强调: 切图需要用到framewords软件,可以知道每个图片具体宽多少个像素,高多少个像素,该软件与ps属于一个家族

    在右边,图层-->位图-->出一把锁固定住图片

    然后左侧,有一个切片工具,框住图片

CSS属性设置

练习:如何拿到对应的小图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>取精灵图中的小图案</title>
    <style>
        .box1 {
            width: 86px;
            height: 28px;
            background-image: url(img/jlt.png);
            background-repeat: no-repeat;
            background-position: -425px -100px;
        }
    </style>
</head>
<body>
    <div class="box1">

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

---- 以下每天讲解----

四 盒子模型

五 盒子模型各部分详解

CSS属性设置

上一篇：apache 给个人网站设置密码


下一篇：Git 上传文件超出限制 100M解决 [remote rejected] (hook declined)