zoukankan html css js c++ java

选择器常用样式布局

今日内容:
　　css:重点  -选择器, 布局
　　　　　　　 -高级选择器   -伪类选择器
　　　　　　　 -常用样式
　　　　　　　 -三种布局方式

*form 提交方式:
　　get:不安全提交数据,高效;
　　post:安全的提交数据,低效;
　　前台都可以给后台提交数据,后台一定会给前台一个反馈结果

*****高级选择器: 
1.群组选择器:控制多个*/

　　h1, .p, .a {
   　　 color: red;
　　}

　　注：每一个选择器位，可以为id、class、标签、选择器组合
2.后代(子代)选择器:控制一个标签,前方都是修饰

　　body .div2 .p2 { /*后代空格，父子(孙)*/
　　color: orange;
　　}
　　.div2 > div > .p2 { /*子代 >，父子*/
　　color: pink;
　　}

3.兄弟(相邻)选择器:控制一个标签,前方都是修饰

　　.p3 ~ .i3 { /*兄弟 ~，可相邻也可不相邻，但必须通过上方修饰下方*/
　　color: greenyellow;
　　}
　　.div3 + .i3 { /*相邻 +，必须相邻，但必须通过上方修饰下方*/
　　color: green;
　　}

　小结:

　　高级选择器优先级:高级选择器通过权重(个数)区别优先级,前提多个选择器控制同一个标签;

　　id>class>标签 eg:一个id选择器高于 n和类与标签选择器的组合

　　种类相同:比个数 eg:先比较id个数,谁多睡优先级高,个数相同再比较类,以此类推

　　个数相同:比顺序 eg:所有类型所有个数(id,类,标签)都相同,在下方的起作用

　　高级选择器种类不影响优先级 eg：后代选择器、子代选择器、兄弟选择器...不会运行优先级

伪类选择器

 /*()内填的是编号，所以从1开始*/
 /*1.伪类选择器可以单独出现，相当于省略了统配*/
 /*2.:nth-child先匹配层级位置，再匹配标签*/
 /*3.:nth-of-type先匹配标签类型，再匹配层级位置*/

　　　　<style>
            i:nth-child(1) {
                 color: orange;
            }
            i:nth-child(4) {
                 color: red;
            }

            i:nth-of-type(1) {
                color: brown;
            }
            i:nth-of-type(2) {
                color: blue;
            }
        </style>

        <style>
            .box {
                 150px;
            }
            .pp {
                 50px;
                height: 50px;
                background-color: red;
                border-radius: 50%;
                float: left;
                text-align: center;
                line-height: 50px;
            }

            /* 2n偶数  2n-1|2n+1奇数  3n最后一列  3n+1|3n-2第一列 3n-1中间列*/
            .pp:nth-child(3n-1) {
                color: orange;
            }

            /*伪类选择器影响优先级，伪类就相当于class*/
            .a1.a2 {
                color: red;
            }
            .a1:nth-child(1) {
                color: orange;
            }
            /*id > class=:nth- > 标签*/
        </style>

        <style>
            /*属性选择器*/
            p[a] {
                color: crimson;
            }
        </style>
    </head>
    <body>

        <a class="a1 a2" href="">aaaaaaaaaaaaaa</a>

        <hr>
        <!--p.pp.p${p$}*9-->
        <div class="box">
            <p class="pp p1" a>p1</p>
            <p class="pp p2" b>p2</p>
            <p class="pp p3">p3</p>
            <p class="pp p4">p4</p>
            <p class="pp p5">p5</p>
            <p class="pp p6">p6</p>
            <p class="pp p7">p7</p>
            <p class="pp p8">p8</p>
            <p class="pp p9">p9</p>
        </div>

        <hr>

        <i class="i3">iiii1</i>
        <p class="p3">pppp</p>
        <div class="div3">dddd</div>
        <i class="i3">iiii2</i>
        <hr>
        <div>
            <i class="i3">iiii1</i>
            <p class="p3">pppp</p>
            <div class="div3">dddd</div>
            <i class="i3">iiii2</i>
        </div>
    </body>
</html>

a标签的四大伪类:

<style>
        /*链接的初始状态*/
        a:link {
            color: deepskyblue;
        }
        /*链接的悬浮状态*/
        a:hover {
            /*cursor: wait;*/
            /*cursor: col-resize;*/
            cursor: pointer;
            color: blue;
        }
        /*链接的激活状态*/
        a:active {
            color: deeppink;
        }

        /**链接的已访问状态*/
        a:visited {
            color: yellow;
        }

    </style>

    <style>
        body {
            /*文本不能选择*/
            user-select: none;
        }
        /*普通标签都可以去使用 :hover :active */
        .btn {
             80px;
            height: 38px;
            background-color: cornflowerblue;

            border-radius: 5px;
            text-align: center;
            line-height: 38px;
            color: white;
        }
        .btn:hover {
            cursor: pointer;
            background-color: deepskyblue;
        }
        .btn:active {
            background-color: blue;
        }
    </style>

常用样式:

文本样式:　　 /*字体大小: 最小12px，还需要更小就更换字体库*/
            font-size: 30px;

            /*字体库(字族)：字体, 备用1, ..., 备用n*/
            /*font-family: "STSong", "微软雅黑";*/

            /*字重: 100~900  bold normal lighter*/
            font-weight: lighter;

            /*字体颜色*/
            color: tomato;

            /*水平位置: left center right*/
            text-align: center;

            /*行高(垂直位置)：默认文本在所在行高中垂直居中，要实现文本的垂直居中，让行高 = 容器高*/
            line-height: 200px;

            /*文本划线: underline line-through overline none*/
            text-decoration: underline;

背景样式:　 /*背景颜色*/
　　　　　　background-color: red;
　　　　　　/*背景图片*/
　　　　　　background-image: url("img/001.png");
　　　　　　/*平铺: no-repeat repeat repeat-x repeat-y */
　　　　　　background-repeat: no-repeat;
　　　　　　/*背景定位: x轴(left center right) y轴(top center默认 bottom)*/
　　　　　　/*background-position: right top;*/
　　　　　　/*指定尺寸移动*/
　　　　　　/*background-position: 100px 100px;*/
　　　　　　/*反向移动*/
　　　　　　background-position: 10px -10px;

背景样式案例:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: cornflowerblue;
        }
        .h1 {
            /* 1300px;*/
            /*height: 900px;*/
             500px;
            height: 100px;
            background-color: tomato;
        }
        .h1 {
            background-image: url("img/bg.png");
            background-position: 0 -150px;
        }
        .h1:hover {
            background-position: 0 -250px;
        }
    </style>
    <style>
        .p1 {
             155px;
            height: 48px;
            background-color: green;
            background-image: url("img/bg.png");
        }
        .p2 {
             157px;
            height: 48px;
            background-color: green;
            background-image: url("img/bg.png");
            background-position-x: -155px;
        }
        .p1:hover, .p2:hover {
            background-position-y: -48px;
            cursor: pointer;
        }
        /*背景图片操作：就是更换背景图片的位置*/
    </style>
</head>
<body>
    <div class="h1">

    </div>

    <p class="p1"></p>

    <p class="p2"></p>
</body>
</html>

边界圆角:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
             400px;
            height: 200px;
            background-color: red;
        }
        .box {
            /*border-radius: 50%;*/

            /*左上是第一个角，顺时针编号，不足找对角，只有一个值同时控制4个角*/
            /*border-radius: 10px 20px 30px 40px;*/
            /*border-radius: 10px 50px 100px;*/
            /*border-radius: 10px 100px;*/
            /*border-radius: 100px;*/

            /*横向 / 纵向*/
            /*border-radius: 50% / 50px;*/

            /*横向1,2,3,4 / 纵向13,24*/
            /*border-radius: 10px 30px 50px 100px / 50px 100px;*/

            border-radius: 200px 200px 0 0 / 200px 200px 0 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

显示方式:

显示方式 :
block：1.可以手动设置宽高 2.自带换行 3.支持所有css样式
inline：1.宽高只能由文本内容撑开，不能手动设置 2.不带换行 3.支持部分css样式
inline-block：1.可以手动设置宽高 2.不带换行 3.支持所有css样式

嵌套关系:

block：可以嵌套block、inline、inline-block
    div、li搭架构的，可以任意嵌套     h1~h6、p 建议只嵌套inline，就是用来转文本的
inline：只用来嵌套inline
    span、i、b、em、strong     a一般都会修改其display为block
inline-block：不建议嵌套任何
img input系统都设计成了单标签
none：没有显示方式，就会在页面中隐藏

开发是：修改display的情况 - 要支持宽高，要更改位置(水平排列还是垂直排列)
block 的显示规则:

不同的标签在页面中有不同的显示规则
如有些是自带换行、有些同行显示、有些同行显示还支持宽高，这些不是标签的特性，而是标签的display属性值决定的

完成复杂的布局和样式，标签的显示方式都采用 block
a {
    display: block;
}
a可以任意嵌套其他标签，还可以设置宽高，还支持所有css样式，但是a不再同行显示了(block自带换行)

如果解决block同行显示 => css布局

inline: 同行显示，不用去关宽高，不用额外操作
inline-block: 同行显示, 一般会主动设置宽或高、设置宽，高会等比缩放，反之亦然
有inline特性的标签，同行显示，但是有默认垂直对其方式vertical-align
block：默认显示规则
宽继承父级，高由内容撑开

overflow属性:

问题:
 1、规定了标签的宽高，标签的内容超出范围 
 2、规定了标签的宽高，标签内的子标签显示区域更大，超出范围
    如果让父级宽高限制内容和子集
方法:
　　内容超出，都会以 hidden 处理影藏，如果想显示全内容，采用子页面*/
 
    hidden：影藏超出内容  scroll：以滚动显示超出内容  auto：有超出内容才滚动显示*/

盒模型:
　　定义:页面中每一个标签都可称之为盒子,它由外边距、边框、内边距、内容四部分组成，每部分都有独立区域

　　外边距 - margin - 控制位置
　　边框 - border - 控制边框
　　内边距 - padding - 控制内容与边框的间距
　　内容 - content(width*height) - 文本内容或子标签显示的区域

　　当要保证显示区域不变，内容往里偏移，增加padding、相应减少content
　　border边框：宽度 、 样式 solid实线 dashed虚线 dotted点状线、 颜色

　　margin参考系：自身原有位置
　　margin的left和top控制自身位置
　　margin的right和bottom控制兄弟位置

　　盒模型布局的地位：盒模型用来完成超简单的布局要求，一般都是用来辅助其他布局，完成布局的微调

　　/*上右下左*/
　　/*margin: 10px 20px 30px 40px;*/
　　/*快速居右*/
　　/*margin-left: auto;*/
　　/*快速居中*/
　　/*margin-left: auto;*/
　　/*margin-right: auto;*/          margin: 0 auto;

浮动布局:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap {
             150px;
            background-color: cornflowerblue;
            /*height: 200px;*/
        }
        .d {
             50px;
            height: 50px;
            background-color: orange;
            border-radius: 50%;
        }
        /*浮动布局：不再撑开父级高度，但浮动受父级宽度影响*/
        .d {
            float: right;
        }
        /*如何让父级刚刚好包含所有子标签：清浮动 - 不是清除子标签的浮动效果，而是让父级获得一个刚好的高度*/
        .wrap:after {
            display: block;
            content: "";
            /*清浮动的关键*/
            clear: both;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="d d1">1</div>
        <div class="d d2">2</div>
        <div class="d d3">3</div>
        <div class="d d4"></div>
        <div class="d d5"></div>
        <div class="d d6"></div>
        <div class="d d7"></div>
        <div class="d d8"></div>
        <div class="d d9"></div>

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

查看全文

相关阅读:
PHP thinkPHP6.0 部署
 ch09 Sql导入语句
 自定义map 搜索
 MySql 语句
 自定义Mappter
三袋米的故事
 WPF中实现文件夹对话框（OpenFileDialog in WPF）
web通过Ajax与WCF交互
 项目管理之我见－程序员程序开发步骤
 存储过程

原文地址：https://www.cnblogs.com/wyf20190411-/p/11115969.html

选择器 常用样式 布局

选择器常用样式布局