前端-CSS

css样式选择器

标签上设置style属性：

<body>
    <div style="height: 48px;">第一层</div>
    <div style="height: 48px;">第二层</div>
    <div style="height: 48px;">第三层</div>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: #2459a2;height: 48px;" >ff</div>
    <div>2</div>
    <div>2</div>

</body>
</html>

css引入

直接在div里写相对应的样式

rgb代码对照表，可查看各种颜色的代码

二、编写CSS样式：

1.标签的style属性

2.写在head里面写style标签，在其中编写样式：

　　-id 选择器

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#i1{

height: 48px;

}

</style>

</head>

<body>

<div id="i1">第一层</div>

</body>

把样式写到head里面，以#开头命名，调用对应样式在div里用id属性指定相应的id名　　

　　-class选择器（常用）

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.c1{

height: 48px;

}

</style>

</head>

<body>

<div class="c1">第一层</div>

<div class="c1">第二层</div>

<div class="c1">第三层</div>

</body>

把样式写到head里面，以.开头命名，调用对应样式在div里用class属性指定相应的类名，可以多个div调用　　

　　-标签选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
     <div >第一层</div>
     <div >第二层</div>
     <div >第三层</div>
</body>

标签选择器，设置div样式，则body里所有的div标签内的内容都会应用此内容

　　-关联选择器或层级选择器(空格)

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

span div{

height: 48px;

}

</style>

</head>

<body>

<div >第一层</div>

<span>

<div >span里的div</div>

</span>

<div >第三层</div>

</body>

只让span里面的div标签应用样式，可多层嵌　　

　　-组合选择器(逗号)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
     <div id="i1">第一层</div>
     <div id="i2">第一层</div>
     <div id="i3">第一层</div>
</body>

组合选择器，加,号，相同样式多命名

属性选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[name="James"]{ 20px;height: 20px;}
    </style>
</head>
<body>
    <input type="text" name="James">
    <input type="text">
    <input type="password">
</body>

对选择到的标签的属性再进行一次筛选。根据属性进行筛选匹配，只有第一个input标签匹配上对应的样式

3.注释

css注释用/*...*/

css样式引用

css样式优先级

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            color: white;
        }
        .c2{
            background-color:black;
        }
    </style>
</head>
<body>
    <div class="c2 c1" style="color:palegreen" >第一层</div>
</body>

如果样式不冲突，则样式都应用，如果样式有冲突，标签上的style样式优先级最大，其次其他的安装编写的顺序，就近原则。

文件方式引用样式

定义样式并保存到commons.css文件

.c1{
background-color: red;
color: white;
}
.c2{
background-color:black;
}

引用commons.css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="commons.css">
</head>
<body>
    <div class="c2 c1" style="color:palegreen" >第一层</div>
</body>
</html>

css样式边框

基本边框

<body>
    <div style="border: 1px dotted red;">
        第一层边框
    </div>
<!--border：边框宽度  solid：边框样式实线（dotted虚线）颜色：red-->
</body>

边框其他样式

<body>
    <div style="height: 48px;
     80%;
    border: 1px solid brown;
    font-size: 16px;
    text-align: center;
    line-height: 48px;
    ">第二层边框</div>
 
    <!--height: 48px 边框高度-->
    <!-- 80% 宽度页面的80%-->
    <!--border: 1px solid brown 边框宽度、样式、颜色-->
    <!--font-size: 16px;  字体大小-->
    <!--text-align: center; 水平居中-->
    <!--line-height: 48px; 垂直居中-->
</body>

边框

　　宽度，样式，颜色

　　boder-top,left

　　border:4px dotted red;

-》》点击显示效果

可以通过../..路径等形式查找文件

style="height: 48px; 80%;border: 1px solid red;font-size: 16px; text-align: center;line-height垂直方向居中: 48px;font-weight: bold">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="border: 1px solid red;">
        asdf
    </div>
    <div style="height: 48px; 80%;border: 1px solid red;font-size: 16px;
         text-align: center;line-height: 48px;font-weight: bold">asdf</div>
</body>
</html>

CSS样式浮动

初识float

<body>
    <div style=" 20%;background-color: red;float: left;">左边</div>
    <div style=" 60%;background-color: black;float: right;">右边</div>
</body>

-》》点击显示效果

float测试页

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 38px;
            background-color: #dddddd;
            line-height: 38px;
        }
    </style>
</head>
<body style="margin: 0 auto;">
    <div class="pg-header">
        <div style="float: left;">*收藏本站</div>
        <div style="float: right;">
            <a>登录</a>
            <a>注册</a>
        </div>
    </div>
    <div style=" 300px;border: 1px solid red;">
        <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="clear: both"></div>
    </div>
</body>

-》》点击显示效果

父亲边框被孩子float覆盖，在最后加<div style="clear: both"></div>

注：<body style="margin: 0 auto;">消除与浏览器顶部之间的缝隙；<div style="clear: both"></div>子边框浮动后，显示父边框的边框线

CSS样式display

块级标签和行内标签相互转换

<body>
    <div style="display: inline">块级</div>
    <span style="display: block">行内</span>
</body>

-》》点击显示效果

注：display:inline 转换为行内标签；display：block转换为块级标签；另还有display：none不显示

行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin

<body>
    <span style="display: inline-block;height: 50px; 70px">行内</span>
    <div style="display: inline">块级</div>
</body>

-》》点击显示效果

注：display:inline-block 既有inline的属性（默认自己有多少占多少）又有block的属性（可以设置高度、宽度、padding、margin）

CSS样式边距

外边距margin

<body>
    <div style="border: 2px solid red;height: 70px;">
        <div style="height: 50px;
        margin-top: 25px;"></div>
    </div>
</body>

-》》点击显示效果

注：margin-top：25px表示外边距，子边框与父边框top之间的距离为25px

内边距padding

<body>
    <div style="border: 2px solid red;height: 70px;">
        <div style="height: 50px;
        padding-top: 25px;"></div>
    </div>
</body>

-》》点击显示效果

margin:外边距

padding:内边距

注：padding-top：25px表示内边距，子边框内自己与top之间的距离为25px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 38px;
            background-color: #dddddd;
            line-height: 38px;
        }
    </style>
</head>
<body style="margin:0 auto">
    <div class="pg-header">
        <div style="980px;margin: 0 auto">
            <div style="float: left;">收藏本站</div>
            <div style="float: right;">
                <a>登录</a>
                <a>注册</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div>
        <div style=" 980px;margin: 0 auto">
            <div style="float: left;text-align: center;line-height: 50px">logo</div>
            <div style="float: right">
                <div style="height: 50px; 100px;background-color: #dddddd;line-height: 50px;text-align: center">
                    购物车2件</div>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div style="background-color: red">
        <div style=" 980px;margin: 0 auto">aaaaa
            <div></div>
            <div>
                <div style="height: 50px; 100px;background-color: #dddddd;line-height: 50px;text-align: center"></div>
            </div>
        </div>
        <div style="clear: both"></div>
    </div>
    <div style=" 300px;border: 1px solid red">
        <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="clear: both;"></div>

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

View Code

答疑：

1、CSS重用

2、自适应和改变大小变形

　　左右滚动条的出现

　　宽度、百分比：用百分比就会变形，一般在页面最外层，设置像素的宽度，如果页面小于设置会自动出现滚动条。

CSS样式position

fixed固定到浏览器某个位置（相当于float）

返回顶部按钮

有个需求，好多页面都有返回顶部的按钮，随着你页面的下拉，按钮永远在页面的右下角，下面就来实现：

<body>
    <div style=" 50px;height: 50px;color: white;
    position: fixed;
    bottom: 20px;
    right: 20px;
    ">返回顶部</div>
    <div style="height: 5000px;>
    </div>
</body>

position:fixed固定该标签在某一位置。

实现动态效果，点击返回

<body style="margin: 0 auto">
    <div onclick="GoTop();"  style=" 50px;height: 50px;color: white;
    position: fixed;
    bottom: 20px;
    right: 20px;
    ">返回顶部</div>
    <div style="height: 5000px;margin: 0;">ddddddddddddd
    </div>
 
    <script>
        function GoTop() {
            document.body.scrollTop=0;
        }
    </script>
</body>

固定菜单栏：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            
            color: #dddddd;
            position: fixed;
            top:0;
            right: 0;
            left: 0;
        }
        .pg-body{
            
            height: 5000px;
            margin-top: 50px;
        }
    </style>
</head>
<body style="margin: 0">
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>

relative+absolute（相对与relative固定路径）

<body>
    <div style="position: relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position: absolute;left: 0;bottom: 0; 50px;height: 50px;"></div>
    </div>
</body>

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

</body>
</html>

多层模态

用了position样式实现三层页面；当页面整个浮动在上面的时候，如果想让页面整体覆盖底层页面，要用到top,right,left,bottom属性，而非margin-top、margin-left....

<body
    <div style="z-index:10;position: fixed;top: 50%;left: 50%;margin-left:-250px;margin-top:-250px;
    height: 500px; 500px"></div>
 
    <div style="z-index:9;position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0.5"></div>
 
    <div style="height: 5000px;</div>
</body>

当页面出现多层时，用z-index：10数值来确定浮动层的上下关系，哪层数值大，哪层在上面；opacity：0.5设置页面透明度（1表示完全遮住）；fixed;top: 50%;left: 50%;margin-left:-250px;margin-top:-250 px最顶层的div进行居中处理；

CSS样式overflow

有时会有这种情况出现，看示例

<body>
    <div style="height: 200px;140px;overflow: hidden ">
        <img src="i.png" />
    </div>
</body>

外层定义div高度和宽度后，最后显示的效果还是以图片的大小为准的，图片把外层div给撑开了，这时候可以用到下面俩个属性

overflow：auto 图片出现滚动条

<body>
    <div style="height: 200px;140px;overflow: auto">
        <img src="i.png" />
    </div>
</body>

overflow：auto 图片只显示div设置的大小，其他部分隐藏

<body>
    <div style="height: 200px;140px;overflow: hidden">
        <img src="i.png" />
    </div>
</body>

CSS样式hover

可以看一下抽屉网的顶部条栏，当鼠标移动到选项栏时，背景颜色会出现变化；下面就来试试搞一下这个,伪类：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: 0;
            left: 0;
            right: 0;
            top: 0;
            height: 48px;
            background-color: #2459a2;
            line-height: 48px;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
             980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block; /*设置菜单单独设置*/
            padding: 0 10px; /*边距上下0，左右10*/
            color: white;
        }
        .pg-header .menu:hover{   /*表示鼠标一上去就应用此样式*/
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>

        </div>
    </div>
    <div class="pg-body">
        <div class="w">a</div>
    </div>
</body>
</html>

其中.pg-header .menu:hover{ padding: 0px;">

CSS样式background

之前一直在用backgroud样式基本上都是设置背景颜色什么，其实background还可以设置背景为图片

background-image

<body>
    <div style="background-image: url('i.png');height: 700px; 700px">
    </div>
</body>

默认div框架有多大，图片重复放置占的位置就有多大

background-repeat

<body>
    <div style="background-image: url('i.png');height: 700px; 700px;background-repeat: no-repeat">
    </div>
</body>

background-repeat有四个属性repeat（默认，重复占满）、no-repeat（不重复）、repeat-x（只横着重复放）、repeat-y（只竖着重复放）

background-position-x、background-position-y

显示图片中特定的位置图标

<body>
    <div style="background-image: url('icon.png');height: 20px; 20px;
    border: 1px solid red;background-position-x:20px;background-position-y: 40px"></div>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 100px"></div>
    <div style="background-image: url(icon_18_118.png);background-repeat: no-repeat;height: 20px; 20px;
    border: 1px solid red;
    background-position-x:0px ;background-position-y: -58px;
    "></div>
</body>
</html>

background-position-x表示看背景图片的窗口水平方向想右移动，background-position-y表示看背景图片的窗口垂直向下移动；两者可以简写成：

<body>
    <div style="background-image: url('icon.png');height: 20px; 20px;
    border: 1px solid red;background-position:20px 40px"></div>
</body>

针对background整体还有更加简单的写法：

element.style {
    background: #f8f8f8 url(image/5.png) -105px -212px no-repeat;
    background-image: url(file:///D:/BaiduYunDownload/s14day14/day14%E8%AF%BE%E4%B8%8A%E6%89%80%E6%9C%89/html/html/image/5.png);
    background-position-x: -105px;
    background-position-y: -212px;
    background-size: initial;
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    

background: #f8f8f8 url(image/5.png) -105px -212px no-repeat; 同时设定了颜色，图片，位置，是否repeat

input框放图标实例：

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

    <div style="height: 35px; 400px;position: relative">
        <input type="text" style="height: 35px; 370px;padding-right: 30px">
        <span style="position: absolute;top: 10px;right: 11px;background-image: url(icon_18_118.png);height: 16px; 16px;display: inline-block;"></span>
    </div>
</body>
</html>

CSS补充：
-position
-background
-hover
-overflow
-z-index
-opacity

页面布局：

　　主站:

　　　　　　内容自动居中

　　　　</div>

后台管理布局：

position:

fixed --永远固定在窗口的某个位置

relative--单独无意义

absolute--第一次定位可以在指定位置，滚轮　

a. 左侧菜单跟随滚动条

b.左侧以及上下不动....　

布局实例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
        }
        .pg-content .menu{
            position: fixed;
            top: 48px;
            left: 0px;
            bottom: 0px;
             200px;
            background-color: #dddddd;
        }
        .pg-content .content{
            position: fixed;
            top: 48px;
            right: 0px;
            bottom: 0px;
            left: 200px;
            background-color: purple;
            overflow: auto; /*滚动条*/
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }

    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-content">
        <div class="menu left">a</div>
        <div class="content right">

        </div>
    </div>
    <div class="pg-footer"></div>

</body>
</html>

a.左侧滚动条跟随滚动条

b.左侧以及上下不动　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
        }
        .pg-content .menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
             200px;
            background-color: #dddddd;
        }
        .pg-content .content{
            position: absolute;
            top: 48px;
            right: 0px;
            bottom: 0px;
            left: 200px;
            /*background-color: purple;*/
            overflow: auto; <!--两种不同布局，根据此配置的存在-->
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }

    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-content">
        <div class="menu left">a


        </div>
        <div class="content right">
            <!--<div style="position: fixed;bottom: 0px;right: 0px; 50px;height: 50px">返回顶部</div> --> <!--固定在右下角-->
            <!--<div style="position: absolute;bottom: 0px;right: 0px; 50px;height: 50px">返回顶部</div> --><!--随着滚轮上下移动-->
            <div style="background-color: purple;">
                <p style="margin: 0px">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            </div>
        </div>
    </div>
    <div class="pg-footer"></div>

</body>
</html>

min-width设置左右滚动条

后台布局实例:

鼠标移动例子：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            background-color: #dddddd;
        }
        .item:hover{
            color: red;
        }
        .item:hover .b{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="a">123</div>
        <div class="b">456</div>
    </div>
</body>
</html>

图标插件网站:

fontawesome.io

下载该网站插件，解压后放入程序目录中

在程序<head>中加入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="Font-Awesome-master/css/font-awesome.min.css">  <!--引入图标-->
    <style>
        .item{
            background-color: #dddddd;
        }
        .item:hover{
            color: red;
        }
        .item:hover .b{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="a">
            <i class="fa fa-superpowers" aria-hidden="true"></i> <!--在相应图标中加入相应的语句-->
        </div>
        <div class="b">456</div>
    </div>
</body>
</html>

已有图标使用参考：http://fontawesome.io/icons/　　

复制Font-Awesome-master至当前项目，在<head>标签中增加

<link rel="stylesheet" href="Font-Awesome-master/css/font-awesome.min.css">

引用见day16/s2.html　　

Python开发【前端】：HTML-》》http://www.cnblogs.com/lianzhilei/p/6038646.html

Python开发【前端】：JavaScript--》》http://www.cnblogs.com/lianzhilei/p/6071530.html

Python开发【前端】：DOM--》》http://www.cnblogs.com/lianzhilei/p/6072367.html

相关阅读:
LINUX 常用命令
 连接远程Linux的几类工具
 spring-boot导出excel
基于Vue2全家桶的移动端AppDEMO实现
 jdk+tomcat+mysql+war打包整合成exe文件，Windows下一键安装
 使用 Gogs 搭建自己的 Git 服务器
 db2 命令
 在shell脚本中调用另一个脚本的三种不同方法(fork, exec, source)
Linux shell break、continue、exit、return的用法及exit、return的区别
 redis 导入导出redis-load，redis-dump详解
原文地址：https://www.cnblogs.com/ld1977/p/6519057.html