zoukankan      html  css  js  c++  java

  • CSS关键点

    写的位置：

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        css样式所在
    </style>

</head>

    注释：

    /*  注释内容 */

    id选择器：标签id对应样式

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1 {
            background-color: red;
            height: 48px;
        }
    </style>

</head>
<body>
    <div id="i1"></div>
</body>
</html>
    例子

    class选择器：.样式名称

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 48px;
        }
    </style>

</head>
<body>
    <div class="c1"></div>
</body>
</html>
    eg

    标签选择器：所有标签对应的应用样式

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: red;
            height: 48px;
        }
    </style>

</head>
<body>
    <div class="c1"></div>
</body>
</html>
    所有的dvi标签都使用该样式

    层级选择器（关联选择器）:空格分隔

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span div{
            background-color: red;
            height: 48px;
        }
    </style>

</head>
<body>
    <span>
        <div></div>
    </span>
</body>
</html>
    span标签下的div使用样式
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 div{
            background-color: red;
            height: 48px;
        }
    </style>

</head>
<body>
    <span class="c1">
        <div></div>
    </span>
</body>
</html>
    class为c1的标签下的div使用样式

    组合选择器，逗号分隔

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1,.c2,.c3 div{
            background-color: red;
            height: 48px;
        }
    </style>

</head>
<body>
    <span class="c1"></span>
    <div class="c2"></div>
    <div class="c3"></div>
</body>
</html>
    eg

    属性选择器:对选择到的标签再通过属性进行一次筛选

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       input[type='text']{
           width: 100px;
           height: 200px;
       }
    </style>

</head>
<body>
    <input type="text" />
</body>
</html>
    input标签type为text的才使用样式
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       input[n='alex']{
           width: 100px;
           height: 200px;
       }
    </style>

</head>
<body>
    <input type="text" n="alex"/>
</body>
</html>
    eg
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .c1[n='alex']{
           width: 100px;
           height: 200px;
       }
    </style>

</head>
<body>
    <input class="c1" type="text" n="alex"/>
</body>
</html>
    eg2

    css优先级：标签上style优先，编写顺序，就近原则

    标签上的style优先级最高，优先显示这个，stype标签里面的，越往下，优先级越高，这里c2在c1下方，所以c1相同样式不使用

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .c1{
           background-color: red;
           color: white;
       }
        .c2{
            font-size: 58px;
            color: black;
        }
    </style>

</head>
<body>
    <div class="c1 c2" style="color: #2b542c"></div>
</body>
</html>
    eg

    css样式引用

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
   

</head>
<body>
    
</body>
</html>
    link标签引用

    css属性

    边框：border，可以分上下左右

    <!-- 边框大小为1，实线，红色 -->
<div style="border: 1px solid red;"></div>
    width            宽度
height:48px;        标签高度48px
font-size:16px;　　    字体大小
text-align:center; 　　 水平居中
line-height:48px;    根据高度填写数值，这里会垂直居中
font-weight:blod    字体加粗

    float　　让标签浪起来，块级标签页可以堆叠

        <!-- 将两个div标签放到同一行-->
    <div style=" 20%;background-color: red;float: left">1</div>
    <div style=" 80%;background-color: black;float: left">2</div>

    管不住子标签的时候，可以用下面的语句将标签弄出来

    <div style="clear: both;"></div>

    display 

    display:inline;         变成行内标签
    display:block;          变成块级标签
    display:none; 　　　　　　让标签消失

      display:inline-block;
      1.具有inline，默认自己又多少占多少
      2.具有block，可以设置高度，宽度

     
        <div style="background-color: red;display: inline">变成行内标签</div>
    <span style="background-color: red;display: block">变成块级标签</span>

    position

    position:fixed 固定页面某个位置（相对位置）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{#位置固定，相对路径，bottom离底部20px，right离右侧20px#}
<div onclick="GoTop()" style=" 50px;height: 50px;background-color: black;color: white;
position: fixed;
bottom: 20px;
right: 20px;
">返回顶部</div>
    <div style="height: :5000px;background-color: #DDDDDD"></div>

    <script>
        function GoTop() {
            document.body.scrollTop = 0;
        }
    </script>
</body>
</html>
    右下角返回顶部操作
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: black;
            color: #DDDDDD;
            position: fixed;/* 固定位置，下方三个组合，成为顶部菜单*/
            top: 0;
            left: 0;
            right: 0;
        }
        .pg-body{
            background-color: #DDDDDD;
            height: 5000px;
            margin-top: 48px;/* 离开头部48px*/
        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>
</html>
    顶部菜单

    position:absolute 固定页面某个位置（绝对位置）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 绝对位置的固定-->
    <div style=" 50px;height: 50px;background-color: black;position: absolute;bottom: 0;right: 0">头部</div>
    <div style="height: 5000px;background-color: #DDDDDD">内容</div>
</body>
</html>
    固定某个位置，不变了

    一般是relative + absolute使用（单独relative 没作用）

    <!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;left: 0;bottom: 0; 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;right: 0;bottom: 0; 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;right: 0;top: 0; 50px;height: 50px;background-color: black"></div>

    </div>
</body>
</html>
    某个div里面的绝对位置


    opacity: 0.5; 透明度，0为没有，1是完全遮盖

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div style="position: fixed;background-color: black;top: 0;left: 0;right: 0;bottom: 0;
    opacity: 0.5;"></div>
    <div style="height: 5000px;background-color: #DDDDDD"></div>
</body>
</html>
    遮罩层

    z-index:10 层级顺序 哪个值大，就在上面显示

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div style="z-index: 10; position: fixed;background-color:white; 400px;height: 500px;
   top: 50%;left: 50%;margin-left: -250px;margin-top: 200px /*组合成为居中*/
"></div>
   <div style="z-index: 9; position: fixed;background-color: black;top: 0;left: 0;right: 0;bottom: 0;
    opacity: 0.5;"></div>
    <div style="height: 5000px;background-color: #DDDDDD"></div>
</body>
</html>
    三层分层

     overflow:hidden 图片或者其他超出div大小则隐藏

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 200px; 300px;overflow: hidden">
        <img src="1.jpg" />
    </div>
</body>
</html>
    eg

    overflow:auto 图片或者其他超出div大小则出现滚动条

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 200px; 300px;overflow: auto">
        <img src="1.jpg" />
    </div>
</body>
</html>
    eg

    padding:10px; 标签上下左右均为10px
    padding:0 10px; 上下为0，左右为10px;
    padding:0 10px 0 10px; 上右下左

    hower:鼠标移动到这里，css样式生效

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div  style="height: 200px; 300px;overflow: auto;">
            <a class="menu">鼠标移动到这里背景颜色变更</a>
    </div>
</body>
</html>
    eg

    background-image:url('image/1.jpg'); # 默
    认，div大，图片会重复访问，无论是水平还是垂
    直（这个可以小图片，制作出页面的渐变色）
    background-repeat(no-repeat) # 无叠加
    background-repeat(repeat-x) # 只水平叠加
    background-repeat(repeat-y) # 只垂直叠加

    一张图片有多个图标使用的情况
    background-position 10px 10px；　　
    background-position-x 图片显示左右移动
    background-position-y 图片显示上下移动

    background:url('image/1.jpg' 10px; 20px; no-repeat)

    # 相当于：
background-image:url('image/1.jpg');
background-position-x 10px；
background-position-y 20px
background-position-y

    bxslider插件，可以做到循环播放

    注意：

    行内标签：无法设置高度，宽度，边距
  • 相关阅读:
    SignalR客户端和服务端编写，winfrom端
    SQL 发送邮件msdb.dbo.sp_send_dbmail
    Stimulsoft打印内容横向，变成竖向，解决方法
    Chrome浏览器所有页面崩溃
    SQL存储过程直接传表
    c#SignalR一次发送最大数据量
    c#USB扫描枪，防止输入框手动输入
    SQLPrompt_9.5.5.9830破解版含注册机_永久激活不掉线
    SQL快捷键设置
    USB HDI 通信
  • 原文地址：https://www.cnblogs.com/cheng662540/p/9813217.html
Copyright © 2011-2022 走看看