CSS基础--常用样式

一、背景相关

背景颜色

background-color ：颜色名称/rgb值/十六进制值

背景图片

background-image　：url('')

背景图片平铺方式

background-repeat　：　repeat-x(仅水平重复) repeat-y(仅垂直重复) no-repeat(不重复)

设置背景图片位置

background-position　：　　数字+单位/center/top/bottom/left/right 同上。例如：50px 50px

背景图片是否滚动

background-attachment　：　　fixed(不滚动) scroll（滚动）

dmeo:

设置页面的body背景：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style>
    body{ background-color: aquamarine;
         background-image: url("cool.jpeg");
         background-repeat:repeat-y ;
         background-position: top;
         background-attachment: fixed;

    }
</style>
<body>
</body>
</html>

二、边框、边距

边框：border

用法：

border: 1px solid red; 表示边框宽度(border-width)为1px，边框样式(border-style)为实线，边框颜色(border-color)为红色
其中常用的边框样式有：solid 实线 dashed 虚线 dotted 点线

border表示全部设置，单独设置边框上/下/左/右边框将border替换为border-top、border-bottom、border-left、border-right。

外面距：margin

用法：

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：

使用margin:0px auto;可以将定宽的块元素设置为居中显示

h1 {margin : 0.25in;}

下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：

h1 {margin : 10px 0px 15px 5px;}

分别设置外边距，这些值的顺序是从上外边距 (top) 开始设置上、右、下、左：

margin: top right bottom left

单独设置外边距：

margin-top|margin-right|margin-bottom|margin-left：单位

另外，还可以为 margin 设置一个百分比数值：

p {margin : 10%;}

还可以单独设置上下、左右，例如设置上下边距0，左右编辑10px：

p {margin : 0 10px;}

百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。
margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。

内边距：padding （与外边距类似）

三、字体

字体大小 font-size：数字+单位

水平居中：text-align：center

垂直居中：line-height: 数字+单位（高度设置为和标签的高度一样）

字体样式：font-style：normal(正常) italic(斜体) oblique (粗体)

字体加粗：font-weight：数字+单位／normal(默认值。定义标准的字符)、bold(更粗的字体)、bolder(比bold粗)、lighter(更细的字体)

字体种类：font-family：字体名字("times"、"courier"、"arial"、"宋体")

demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wd</title>
</head>
<body>
<div style="font-family: 宋体 ;
            height: 40px;
            border:1px solid red;
            font-size: large;
            color: aquamarine;
            text-align:center;
            line-height: 40px">hello word
</div>
</body>
</html>

四、float浮动

效果：让多个元素堆叠在一起

left：元素向左浮动

right：元素向右浮动

none：默认值不浮动

inherit: 规定应该从父元素继承 float 属性的值

当子标签浮动起来将父标签遮盖时候，使用style="clear :both",将所有标签都显示。

五、position

positon:将标签分层，固定位置

值：

fixd：生成绝对定位的元素，相对于浏览器窗口进行定位（位置随浏览器窗口滚动而滚动）。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行定位。

应用场景：比如网页中的“返回顶部”按钮、或者菜单栏永远在顶部

demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="background-color: aqua;
            height: 38px;
            position: fixed ;top: 0;right: 0;left: 0;
            text-align: center;
            line-height: 38px">菜单</div>
<div style="background-color:#dddddd;height: 2000px">内容</div>
</body>
</html>

菜单栏永远在顶部demo

absolute：绝对定位，绝对于浏览器窗口定位（位置不会改变），元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行定位，通常与relative一起使用。

relative：相对定位，与absolute进行定位，relative为父标签，子标签absolute相对与relative进行定位

absolute+relative应用：是一个标签相对于另一个标签进行绝对定位。

demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style=" border:1px solid red;
             height: 300px;
             width: 300px;
             margin: 0 auto;
             position: relative">
    <div style="background-color: black;
                height: 50px;
                width: 50px;
                position: absolute;
                right: 0px;
                bottom: 10px;">
    </div>
</div>
</body>
</html>

relative+absolute应用

tips:通过opacity可设置div的透明度，值为0.0-1.0（透明-不透明）

Z-index：当有多层样式，可通过Z-index设置优先级，优先级（值越大）越高，层次越在最上面。

应用场景：网页遮罩层

其他常用标签

display：改变标签属性(块级/行内)

常用值：

block:使标签具有块级标签属性

inline:使标签具有行内标签属性

inline-block：使用标签既有行内标签属性又有块级标签属性

none：不显示标签

其他值如下：

tips：如果是行内标签无法设置高度、宽度、边距。

overflow：设置内容溢出时，出现滚动条或者隐藏

值：

hidden:隐藏溢出的内容

auto：溢出内容出现滚动条

demo：

<body>
<div style="width: 500px ; height:300px;overflow: auto">
    <img src="timg.jpeg">
</div>
</body>

溢出部分出现滚动条

hover：设置当鼠标指针浮动在元素上时显示样式

用法：

.pg-a:hover{
            background-color: cornflowerblue;
        }

demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .pg-menu{
            height: 48px;
            background-color: darkblue;
        }
        .pg-a{
            display: inline-block;
            color: white;
            font-family: "微软雅黑";
            line-height: 48px;
            height: 48px;
            width: 60px;
            padding: 0 10px;
        }
        .pg-a:hover{
            background-color: cornflowerblue;
        }
    </style>
    <title>Title</title>
</head>
<body style="margin: 0 auto">
<div class="pg-menu">
    <a class="pg-a">全部</a>
    <a class="pg-a">操作</a>
    <a class="pg-a">仪表盘</a>
    <a class="pg-a">资产</a>
</div>
</body>
</html>

菜单按钮变色

CSS样式应用案例

1、background-image应用之显示各种小图标

通过固定div大小然后调整background-position来显示一张图片上的不同的图标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .w {
            background-image: url(icon_18_118.png);
            width: 19px;
            height: 20px;
            background-repeat: no-repeat;
            border: 1px solid red;
            background-position-y: -39px;
        }
    </style>
</head>
<body>
<div class="w">
</div>
</body>
</html>

2、登录框图标应用

通过position分层将登录框和登录图片分两层实现

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-username{
            width: 150px;
            height: 30px;
            position: relative;
            background: darkgray;
            padding-left: 25px;

        }
        .username-image{
            display: inline-block;
            width: 26px;
            height: 27px;
            position: absolute;
            background-image: url(images/username_wev8.png);
            background-repeat: no-repeat;
            top: 5px;
        }
        .passwd-image{
            display: inline-block;
            width: 26px;
            height: 27px;
            position: absolute;
            background-image: url(images/password_wev8.png);
            background-repeat: no-repeat;
            top: 5px;
        }
    </style>
</head>
<body>
    <div style="position: relative ;width: 100px;height: 40px">
        <input type="text" class="pg-username">
        <span class="username-image"></span>
    </div>
    <div style="position: relative ;width: 100px;height: 40px">
        <input type="text" class="pg-username">
        <span class="passwd-image"></span>
    </div>
</body>
</html>

后台页面布局

1.float模型布局（不推荐）

顶部菜单在上面，菜单栏float在左边，内容float在右边，通过设置最小宽度来固定页面，缺点当出现滚动条时候，左侧菜单和上面菜单将会逐渐消失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            background-color: aqua;
            height: 48px;
            min-width: 500px;
        }
        .pg-menue{
            background-color: darkblue;
            width: 5%;
            height: 700px;
        }
        .pg-contetx{
            background-color:#dddddd ;
            width: 95%;
            overflow: auto;
        }
    </style>
</head>
<body style="margin: 0 auto">
    <div class="pg-header"></div>
    <div>
        <div class="pg-menue left"></div>
        <div class="pg-contetx right">
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
        </div>
    </div>
</body>
</html>

View Code

2.position布局（推荐）

使用position固定位置，弥补float菜单消失缺点，内容多使用overflow。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
           background-color: #1c5a9c;
            height: 48px;
        }
        .pg-menu{
            position: absolute;
            top:48px;
            left: 0;

            background-color: #3388ff;
            width: 80px;
            bottom: 0;
        }
        .pg-context{
            position: absolute;
            left: 81px;
            background-color: #dddddd;
            bottom: 0;
            right: 0;
            top:48px;
            overflow: auto;
        }
    </style>
</head>
<body style="margin: 0 auto">
    <div class="pg-header"></div>
    <div class="pg-menu"></div>
    <div class="pg-context"></div>
</body>
</html>

View Code

3.布局应用之头像菜单,图标菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        .left {
            float: left;
        }

        .right {
            float: right
        }

        .pg-header {
            background-color: cornflowerblue;
            height: 48px;
            min-width: 500px;

        }

        .pg-menue {
            background-color: blue;
            width: 100px;
            height: 700px;
            position: absolute;
            top: 48px;
            left: 0;

        }

        .pg-contetx {
            background-color: #dddddd;
            position: absolute;
            top: 48px;
            right: 0;
            left: 100px;
            overflow: auto;
        }

        .header-img {
            height: 40px;
            width: 40px;
            border-radius: 50%;
            margin-top:4px;
            margin-left:16px;

        }

        .header-logo {
            color: white;
            font-size: large;
            line-height: 48px;
        }

        .img-outer {
            height: 48px;
            width: 200px;
        }

        .img-inner {
            height: 48px;
            width: 150px;

        }

        .img-inner:hover .img-a{
            background-color: darkblue;
        }

        .my-munue {
            position: absolute;
            top: 45px;
            z-index: 100;
            display: none;
            color: white;
        }

        .img-inner:hover .my-munue {
            display: block;
        }
        .img-a{
            position: relative;
            width: 80px;
            height: 48px;
        }
        .fa:hover {

            color: #DDDDDD;
            text-shadow: 0px 0px 5px #dddddd,
            0px 0px 10px #dddddd,
            0px 0px 15px #dddddd;
            transition-duration: 1s;}

    </style>
</head>
<body style="margin: 0 auto ;background-color: #dddddd">
<div class="pg-header">
    <div class="img-outer right">
        <div class="img-inner">
            <div class="img-a">
                <img src="images/1111.jpg" class="header-img">
                <div class="my-munue">
                    <div>我的资料</div>
                    <div>设置</div>
                    <div>修改密码</div>
                </div>
            </div>
        </div>
    </div>
    <div>
    <div class="right">
        <div style="margin-top: 16px ">
            <i class="fa fa-user-o" aria-hidden="true"></i>
            <span>5</span>
        </div>
    </div>

        <span class="header-logo left">logo</span>
    </div>
    <div>
        <div class="pg-menue "></div>
        <div class="pg-contetx ">
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
        </div>
    </div>
</div>
</body>
</html>

View Code

tps：图标网站:http://fontawesome.io/icons/

来源：https://www.cnblogs.com/wdliu/p/7237152.html

标签

margin

background

绝对定位

border