字体属性

CSS没有默认单位。

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

in：英寸Inches (1 英寸 = 2.54 厘米)

cm：厘米Centimeters

mm：毫米Millimeters

pt：点Points，或者叫英镑 (1点 = 1/72英寸)

pc：皮卡Picas (1 皮卡 = 12 点)

px：像素 em：印刷单位相当于12个点 %：百分比，相对周围的文字的大小，不同分辨率单个像素长度不一样。

font-size:200%

font字体属性

css中每行都有行高，line-height，行高、字号，一般都是偶数，这样可以保证文字在行中央。

技巧：如果一段文本只有一行，如果此时设置行高 = 盒子高，就可以保证单行文本垂直居中。

多行情况下：

vertical-align

可用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式，主要是用于图片、表格、文本的对齐。

//字号+行高+字体：
font-size:14px;
line-height:24px;
font-family:"宋体";
==>font: 加粗 字号/行高/ 字体
==>font: 400 14px/24px "宋体";
PS：400是nomal，700是bold。

上面这几个属性可以连写，但是有一个要求，font属性连写至少要有字号和字体，否则连写是不生效的（相当于没有这一行代码）。

font-family: "微软雅黑","宋体";表示如果用户没有微软雅黑就使用宋体
font-family: "Times New Roman","微软雅黑","宋体";所有的中文不能匹配英语字体，就自动的变为后面的中文字体
所有的中文字体，都有英语别名font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
行高可以用百分比，表示字号的百分之多少。
- font:12px/200% "SimSun"==font:12px/24px "SimSun"
- font:16px/48px "SimSun"==font:12px/300% "SimSun"

文本属性

列表属性

ul li{
    list-style-image:url(images/大老婆.png);
    margin-left:80px;
}
/*第二行代码表示在列表项前面放一个图片
第二个是为了让图片完整显示出来*/

overflow属性

overflow属性的属性值可以是：

visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
hidden：不显示超过对象尺寸的内容。
auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
scroll：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 auto 属性相同。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Overflow</title>
        <style type="text/css">
            div{
                width:100px;
                height: 100px;
                background-color: #00cc66;
                margin-right: 100px;
                float: left;
            }
            #div1{
                overflow: auto;
            }
            #div2{
                overflow: visible;
            }
            #div3{
                overflow: hidden;
            }
            </style>
</head>
<body>
    <div id="div1">颠狂柳絮随风去，轻薄桃花逐水流   何方可化身千亿，一树梅花一放翁。   芙蓉不及美人妆，水殿风来珠翠香。</div>
    <div id="div2">颠狂柳絮随风去，轻薄桃花逐水流   何方可化身千亿，一树梅花一放翁。   芙蓉不及美人妆，水殿风来珠翠香。</div>
    <div id="div3">颠狂柳絮随风去，轻薄桃花逐水流   何方可化身千亿，一树梅花一放翁。   芙蓉不及美人妆，水殿风来珠翠香。</div>
</body>
</html>

cursor属性

鼠标的属性cursor有以下几个属性值：

auto：默认值。浏览器根据当前情况自动确定鼠标光标类型。
pointer：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
hand：和pointer的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

滤镜

div img.blur {filter: blur(4px);}
<div><img class="blur" src="./tulip.jpg" alt="tulip"><span>blur(4px)</span></div>

导航栏的制作

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>导航栏</title>
    <style type="text/css">
        ul{
            list-style: none;
            width: 420px;
            height: 60px;
            background-color:mediumslateblue;
        }
        li{
            float: left;
            margin-right: 30px;
            margin-top: 16px;
        }
        a{
            text-decoration: none;
            font-size: 20px;
            color: #BBBBBB;
            font-family: 微软雅黑，SimSun;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="">web</li>
        <li><a href="">pwn</li>
        <li><a href="">reverse</li>
        <li><a href="">misc</li>
        <li><a href="">Crypto</li>
    </ul>
</body>
</html>

背景属性

background属性

常用

background-color
background-image
- 线性渐变：沿着某条直线朝一个方向产生渐变效果。
- ```
background-image: linear-gradient(方向, 起始颜色, 终止颜色);
```
- 方向可以是：to left、to right、to top、to bottom、角度30deg（指的是顺时针方向30°）。
- 径向渐变：从一个中心点开始沿着四周产生渐变效果。
- ```
background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
```
- 中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。
- 重复渐变。
background-repeat
- no-repeat
- repeat-x
- repeat-y
background-position
- background-position:向右偏移量向下偏移量;
- background-position: 描述左右的词描述上下的词;
- left、center、right
- top 、center、bottom
backattachment
- scroll
- fixed
background-size
- ```
background-size:500px 500px;
background-size:50% 50%;
background-size:100% auto;
background-size:cover;
background-size:contain;
```
- cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。
- contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域留白。

background-origin

background-origin: padding-box; 
background-origin: border-box;
background-origin: content-box;

background-clip
- border-box 超出 border-box 的部分，将裁剪掉
- padding-box 超出 padding-box 的部分，将裁剪掉
- content-box 超出 content-box 的部分，将裁剪掉

也可以直接使用background直接将多个属性写在一个声明中。

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于：

background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

常规颜色表示：

background-color:rgb(255,0,0);
background-color:rgb(0,0,0);
background-color:red;
background-color:rgba(255,255,0,0.3)
RGBA 即：Red 红、Green 绿、Blue 蓝、Alpha 透明度。
R、G、B 的取值范围是：0~255；透明度的取值范围是 0~1。
background-color: #ff0000;/*16进制表示*/
==>background-color:#f00;
background-color:#112233;
==>background-color:#123;
    #000   黑
    #fff   白
    #f00   红
    #222   深灰
    #333   灰
    #ccc   浅灰
/*PS:只有三对数字都一样才可以简写，任何一组不一样都不行！！！*/

HSLA表示法：

background-color: hsla(240,50%,50%,0.4);

H 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
S 饱和度，取值范围 0%~100%。值越大，越鲜艳。
L 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
A 透明度，取值范围 0~1。

H的取值可以参考色盘：

设置透明度的其他方式：

opacity: 0.3; 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。
background: transparent; 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。

通栏banner

超大型图片设置成背景容易出现左右滚动条

<img src="XXX" alt="">

正确做法：

div{
    height: 465px;
    background-image: url(http://img.smyhvae.com/20170813_1053.jpg);
    background-position: center top;
    background-repeat: no-repeat;
}

将banner图作为div的背景图，这样的话，背景图超出div的部分，会自动移溢出。

同时适配多个背景

可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            height: 416px;
            border: 1px solid #000;
            margin: 100px auto;
            /* 给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 */
            background: url(images/bg1.png) no-repeat left top,
            url(images/bg2.png) no-repeat right top,
            url(images/bg3.png) no-repeat right bottom,
            url(images/bg4.png) no-repeat left bottom,
            url(images/bg5.png) no-repeat center;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

clip-path

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。

虽然clip-path不是背景属性，但这个属性非常强大，但往往会结合背景属性一起使用，达到一些效果。

clip-path: circle(40%);

clip-path: ellipse(130px 140px at 10% 20%);

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');

clip-path属性的好处是，即使做了任何裁剪，容器的占位大小是不变的。比如上方代码中，容器的占位大小一直都是 320px * 320px。这样的话，也方便我们做一些动画效果。

字体属性

font字体属性

vertical-align

文本属性

文本属性

列表属性

overflow属性

cursor属性

滤镜

导航栏的制作

背景属性

background属性

通栏banner

同时适配多个背景

clip-path

发送评论 编辑评论

推荐文章

发送评论编辑评论