CSS（五）之 CSS的常见操作

最新推荐文章于 2022-04-24 17:43:41 发布

海边拾贝seebit

最新推荐文章于 2022-04-24 17:43:41 发布

阅读量357

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/Ada_yangyang/article/details/81142785

版权

Web前端专栏收录该内容

54 篇文章 1 订阅

订阅专栏

一、CSS中尺度单位的介绍

px：相对长度单位。像素。

em：相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

ex：相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如果当前行内文本的字体尺寸未被认为设置，则相对于浏览器的默认字体尺寸。

pt：绝对长度单位。点（point）

pc：绝对长度单位。派卡（pica）。相当于我国新四号铅字的尺寸。

in：绝对长度单位。英寸（Inch）

mm：绝对长度单位。毫米（millimeter）

cm：绝对长度单位。厘米（centimeter）

1in = 2.54cm = 25.4mm = 72pt = 6pc

二、字体设置

1. font依照顺序：

font:font-style||font-variant||font-weight||font-size||line-height||font-family

2. font-style

语法：

font-style:normal | italic | oblique

取值：

normal：默认值。正常的字体

italic：斜体。对于没有斜体变量的特殊字体，将应用oblique

oblique：倾斜的字体。

3. font-variant

语法：

font-variant : normal | small-caps

取值：

normal : 默认值。正常的字体。

small-caps : 小型的大写字母字体

4. font-weight

语法：

font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

取值：

normal	默认值。正常的字体。相当于 400 。声明此值将取消之前任何设置
bold	粗体。相当于 700 。也相当于 b 对象的作用
bolder	比 normal >粗
lighter	比 normal >细
100	字体至少像 200 那样细
200	字体至少像 100 那样粗，像 300 那样细
300	字体至少像 200 那样粗，像 400 那样细
400	相当于 normal
500	字体至少像 400 那样粗，像 600 那样细
600	字体至少像 500 那样粗，像 700 那样细
700	相当于 bold
800	字体至少像 700 那样粗，像 900 那样细
900	字体至少像 800 那样粗

5. font-size

语法：

取值：

xx-small	绝对字体尺寸。根据对象字体进行调整。最小
x-small	绝对字体尺寸。根据对象字体进行调整。较小
small	绝对字体尺寸。根据对象字体进行调整。小
medium	默认值。绝对字体尺寸。根据对象字体进行调整。正常
large	绝对字体尺寸。根据对象字体进行调整。大
x-large	绝对字体尺寸。根据对象字体进行调整。较大
xx-large	绝对字体尺寸。根据对象字体进行调整。最大
larger	相对字体尺寸。相对于父对像中字体尺寸进行相对增大。使用成比例的 em 单位计算
smaller	相对字体尺寸。相对于父对像中字体尺寸进行相对减小。使用成比例的 em 单位计算
length	百分数 \| 由浮点数字和单位标识符组成的长度值，不可为负值。其百分比取值是基于父对象中字体的尺寸。

6. font-height

语法：

font-height：normal | length

取值：

normal：默认值。默认行高。

length：百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。

7. font-family

语法：

font-family：name

font-family：ncursive | fantasy | monospace | serif | sans-serif

取值：

name：字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格，则应使用引号括起。

第二种声明方法使用所列出的字体序列名称。如果使用fantasy序列，将提供默认字体序列。

三、文本设置

1. text-indent

检索或设置对象中的文本的缩进。默认值为0。

语法：

text-indent : length

取值：

length：百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。

2. text-align

语法：

text-align：left | right | center | justify

取值：

left：默认值。左对齐

right：右对齐

center：居中对齐

justify：两端对齐

四、背景设置

1. background

语法：

background：background-color || background-image || background-repeat || background-attachement || background-position

取值：

默认值：transparent none repeat scroll 0% 0%

五、列表设置

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head>
    <title>列表</title>
    <style type="text/css">
        #nav{
            background:silver;
            width:260px;
            height:300px;
        }
        .title{
            font-size:25px;
            color:#FFFFFF;
            font-weight:bold;
            background-color:red;
            text-indent:30px;
            background-image:url('images/arrow-down.gif');
            background-position-x:200px;
            background-position-y:10px;
            background-repeat:no-repeat;
        }
        ul li{
            list-style:none;
            line-height:30px;
            background:url('images/arrow-icon.gif') no-repeat;
            text-indent:10px;
        }
        a{
            text-decoration:none;
            color:black;
        }
        a:hover{
            text-decoration:underline;
            color:red;
        }
    </style>
</head>
<body>
<div id="nav">
    <div class="title">全部商品分类</div>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">装修</a>&nbsp;&nbsp;<a href="#">厨房</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>
</body>
</html>

六、盒子模型（border margin padding）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head>
    <title>定位</title>
    <style type="text/css">
        div{
            width:150px;
            height:30px;
            border:1px dashed red;/*边框 宽度 虚线 边框颜色*/
            margin:2px;/*div与div之间的间距
            margin:2px 3px 5px 上2px 左右3px 下5px
            margin:2px 5px 上下2px 左右5px
            */
            padding:10px;/*边框与文字的距离*/
        }
        #div1{
            background:red;
            float:right;/*漂浮效果 left center right*/
        }
        #div2{
            background:yellow;
            float:right;
            clear:both;/*清除 left right both*/
        }
        #div3{
            background:blue;
            float:right;
            clear:both;
        }
    </style>
</head>
<body>
<div id="div1">AAAAAAAAAAA</div>
<div id="div2">BBBBBBBBBBB</div>
<div id="div3">CCCCCCCCCCC</div>
</body>
</html>

七、定位设置（position，float，clear，z-index）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <!--
    position:absolute绝对定位，后面的内容有变化
        它始终相对于body而言 top left
    position:relative相对定位，后面的内容不变
        它始终相对于自己之前的位置。
    z-index:调层次关系。值越大，越在最外层。
    -->
    <style type="text/css">
        div{
            border:1px dashed black;
            width:100px;
            height:30px;
            margin:10px;
            padding:20px;
        }
        #div1{
            background-color:red;
            position:absolute;
            top:20px;
            left:30px;
            z-index:2;
        }
        #div2{
            background-color:yellow;
            position:absolute;
            top:40px;
            left:50px;
            z-index:1;
        }
        #div3{
            background-color:green;
            position:absolute;
            top:60px;
            left:70px;
            z-index:0;
        }
    </style>
</head>
<body>
<div id="div1">AAAAAAA</div>
<div id="div2">BBBBBBB</div>
<div id="div3">CCCCCCC</div>
</body>
</html>

八、字体阴影效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head>
    <title>字体阴影效果</title>
    <style type="text/css">
        body{
            margin:20px;
            font-size:60px;
            font-weight:bold;
            font-family:"黑体";
        }
        #div2{
            color:#AAAAAA;
            position:relative;
            top:-1em;
            z-index:-1;
        }
    </style>
</head>
<body>
<div>CSS字体阴影</div>
<div id="div2">CSS字体阴影</div>
</body>
</html>

九、水印

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head>
    <title>图片签名</title>
    <style type="text/css">
        #picDiv{
            border:3px solid black;
            width:400px;
            height:360px;
            padding:5px;
        }
        #textDiv{
            position:absolute;
            top:300px;
            left:200px;
            color:#FFFFFF;
        }
    </style>
</head>
<body>
<div id="picDiv">
    <img src="0U6A3220.JPG" width="400px" height="360px"/>
</div>
<div id="textDiv">
    CreateBy YangYang
</div>
</body>
</html>