• HTML基础之CSS

    HTM的衣服

    CSS选择器

    css 9大选择器：

    1、id选择器

    #i1{

    　　height: 48px;　　

    　　background-color: red;

    }

    <body>

    <div id="i1"><?div>

    </body>

    2、class选择器

    /*class选择器*/
    /*.c1{*/
        /*height: 100px;*/
        /* 100px;*/
        /**/
    /*}*/

    3、标签选择器

    /*div {*/
        /*height: 100px;*/
        /* 100px;*/
        /**/
    /*}*/

    4、id层级选择器 层级通过空格

    #i2 div{

    background-color: black;
    height: 48px;
    }
    <!--层级选择器 id选择器下的div标签-->
    <div id="i2">
    <div></div>
    </div>

    5、class层级选择器 

    /* class 层级选择器 层级通过空格*/

    .c1 div{
    background-color: #336699;
    height: 48px;
    }

    6、标签层级选择器 

    /*div span {*/
        /*height: 100px;*/
        /* 100px;*/
        /**/
    /*}*/

    7、id组合选择器

    <!-- id组合选择器 -->

    id z1 z2 z3 共用一套css样式 组合 通过逗号分隔*/
    #z1,#z2,#z3{
    background-color: chocolate;
    height: 48px;
    }
    <div id="z1"></div>
    <div id="z2"></div>
    <div id="z3"></div>

    8、class组合选择器

    /* 组合选择器 class s1 s2 s3 共用一套css样式 组合 通过逗号*/ 

    .s1,.s2,.s3{
    background-color: darkmagenta;
    height:48px;
    }
    <!-- css class引用-->
    <div id="s1"></div>
    <div class="s2"></div>
    <div class="s3"></div>

    9、属性选择器

    /* 属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用*/

    div[s='dsx']{
    background-color: darkred;
    height: 48px;
    }
    <div s="dsx"></div>
    <div name="nn"></div>
     
    css优先级
    <!--css样式优先级1、标签中的属性最高其他的从下往上找-->
    !--行内标签不能显示宽高只能加数字或者转成块级标签-->
    引入方式：
    1、body中任意标签中加style属性
    2、header中的<style>#i1{   }</style>中配合选择器使用
    3、header中<link rel="stylesheet" href="a.css">
    <div class="a c b"></div>可以一次引用多个class

    CSS属性

     height、width、font-size、font-weight、text-align、line-height、float、display、margin、padding

      <!DOCTYPE html>

    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body style="margin: 0;">
    <!-- 边框 border：宽度 实线还是虚线 颜色-->
    <div style="height: 48px;border: 1px solid red"></div>
    <!-- 边框 border 上下左右边框 都可单独配置 -->
    <div style="height: 48px;border-left: 1px dotted red"></div>
    <!-- height：高 width：宽 -->
    <div style="height: 48px; 48px;border: 1px solid red"></div>
    <!-- 宽高的设定可以是指定的像素 也可以百分比 -->
    <div style="height: 48px; 80%;border: 1px solid red"></div>
    <!-- 字体大小 font-size: 14px font-weight: 字体加粗 bold-->
    <div style="height: 48px; 80%;border: 1px solid red;font-size: 14px;font-weight: bold"></div>
    <!-- 平行方向左右居中 text-align: center -->
    <div style="height: 48px; 80%;border: 1px solid red;font-size: 14px;text-align: center">大师兄</div>
    <!-- 垂直方向居中 line-height：垂直方向要根据标签高度-->
    <div style="height: 48px; 80%;border: 1px solid red;font-size: 14px;text-align: center;line-height: 48px">大师兄</div>
    <!-- float 浮动 块级标签浮动后 相当于分层 都像左浮动 块级标签会便在一行 如果超过宽度超过100则会换行-->
    <div style=" 20%;float: left">1</div>
    <div style=" 20%;float:left;">2</div>
    <div style=" 20%;float:right;">3</div>
    <!-- 块及标签的占满100%是相对来说，相对与他外层的div -->
    <div style=" 400px;height: 400px;border: 1px solid black;">
    <div style=" 100px;height: 40px;float:left;"></div>
    <div style=" 100px;height: 40px;float:left;"></div>
    <div style=" 100px;height: 40px;float:left;"></div>
    <div style=" 100px;height: 40px;float:left;"></div>
    <div style=" 100px;height: 40px;float:left;"></div>
    </div>
    <!-- display 属性 展示属性 块级标签和行内标签之间切换的属性 display:inline 块级标签转换为行内标签-->
    <div style="height: 100px;display: inline">外联标签</div>
    <!-- display：block 内联标签转换为块及标签-->
    <span style="height: 100px;display: block;">内联标签</span>
    <!-- 行内标签：无法设置高度、宽度、padding、margin-->
    <!-- 块级标签：无法设置高度、宽度、padding、margin-->
    <span style=" 100px;height: 100px;">大师兄</span>
    <!-- 通过display:inline-block 可以完美的解决这个问题 &nbsp;他既有行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性-->
    <span style=" 100px;height: 100px;display: inline-block;">大师兄</span>
    <!-- 让标签消失 &nbsp;display：none-->
    <span style="display: none">我不显示的</span>
    <!-- 外边距 margin 内边距 padding-->
    <!-- margin 外边距 自己针对外围的div产生变化 外边距撑大外层 -->
    <div style="border: 1px solid red;height: 100px">
    <div style="height: 70px;margin-top: 30px"></div>
    </div>
    <!-- padding 内边距 自身的边距增加 从上到下增加 内边距扩大自身 -->
    <div style="border: 1px solid red;height: 100px">
    <div style="height: 70px;padding: 10px">内边距增加</div>
    </div>
    </body>
    </html>
     

    HTML

    <p></p> 段落标签

    </ br> 换行

    年轻,就是拿来折腾的。让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，无数寂寞时光的堆积而成的。

    别在最该拼搏的年纪选择稳定，世界上最大的不变是改变，只有每天进步，才能拥抱生命的无限可能！

    你以为你给对方留了电话存了微信，应该彼此也能互相帮忙，却忘记了一件很重要的事情，只有关系平等，才能互相帮助。

    不要为了户口丢掉生活，为了稳定丢掉青春，为了平淡丢掉梦想，因为你所谓的稳定，不过实在浪费生命。

    真正的勇者不是狼狈的逃脱，而是用闲暇时间，磨练自己。

    只有等现实的日子富足了，能力够强了，才可以去追求那些美好的生活状态，才该去追求那些伟大的梦。否则那些梦幻般的生活，都只是空中阁楼，不堪一击。

    生活是自己的，自己都不求进取，凭什么让别人给你美好的未来？

    <h1></h1> 标题标签h1

    <h2></h2> 标题标签h2

    <h3></h3> 标题标签h3

    <h4></h4> 标题标签h4

    <h5></h5> 标题标签h5
    <h6></h6> 标题标签h6

    <div> </div>

    块级标签，整满整行 div是HTML中出场率的标签，特点是没有任何属性，可以通过css进行装饰后成为任何一种标签

     

    <span> </span>

    行内标签的代表，什么属性都不带，可以通过css进行装饰后成为任何一种标签

    污冰你写作业了吗？

    <input />

    文本框标签，包含多个属性，text、password、button、checkbox、radio、file、submit、reset

      

    污冰女朋友的选择标准

    男的 1米4 36C 男 女

    上传文件

      

    <form> </form>

    表单标签可以理解为载体，承载着所有要像后端提交的数据，通常与input连用,表单提交数据分为get提交和post提交，get提交在url上挂参数，post提交在body中

        

    <label> </label>

    label 标题标签 与input联合运用，增加input的点击范围 可直接点击文字就输入 for：映射到input的id

     

    <textarea> </textarea>

    多行文本 textarea 默认值在标签之间

    <select></select> <option></option>

    select option 下拉框标签 默认选择在option上增加selected size属性显示多少个 多选属性：multiple

    单选
      
    多选
      
    超过4个就出滚动条
     

    <select></select> <optgroup></optgroup>

    对下拉选项进行分组optgroup 分组，label属性是组的名字，不可选择

    <a> </a>

    超链接 href属性为跳转的地址，target属性为以什么方式跳转"_blank"新tab跳转，a标签还可以做锚点，通过id进行对应关系的映射 去掉a标签的下划线通过属性text-decoration:none

    <img />

    img 图片标签 src：图片的位置 图片跳转通过a标签 alt：当图片加载失败时显示alt的文案 title：鼠标悬浮在图片上显示的文字

    大师兄

    <ul></ul>

    列表 ul li · 形式的列表

    • 第一列
    • 第二列
     

    列表 ol li 数字形式的列表

    1. 第一列
    2. 第二列

    分层列表 dl dd内层 dt外层

    黑龙江
    哈尔滨
    牡丹江
    北京
    北京

    <table> </table>

    table 表格标签 thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列

    ID用例名称执行人编辑
    1 table表格测试 大师兄 详情 编辑
    1 table表格测试 详情 编辑
    1 table表格测试 大师兄 详情 编辑
    1 大师兄 详情 编辑

    CSS

    CSS

    css style: 里面的写的就叫做css 每一个样式的间隔用； 全部相同的时候引用class

    style="height: 48px; margin-top: 5px; font-family: "Microsoft YaHei"; font-size: medium;">

    ID选择器

    # 代表通过id选择器查找

    #i1{height: 48px;}

    class选择器

    . 代表通过class选择器查找

    .menu{height: 48px;}

    标签选择器

    标签名 代表通过标签选择器查找

    span {color: red;}

    标签层级选择器

    标签内的标签 通过标签+空格+标签 代表通过标签选择器查找 例：span标签下面所有div标签颜色改变

    span div{color: aqua;}

    CLASS层级选择器

    通过CLASS标签选择器定位第一层，在通过层级选择器定位第二层

    .c1 div{height: 48px;}

    ID层级选择器

    通过ID标签选择器定位第一层，在通过层级选择器定位第二层

    #i2 div{height: 48px;}

    ID组合选择器

    ID组合选择器，应用于以id选择器进行css样式设置的，可以通过id z1 z2 z3 共用一套css样式 组合 通过逗号间隔

    #z1,#z2,#z3{height: 48px;}

    CLASS组合选择器

    CLASS组合选择器，应用于以CLASS选择器进行css样式设置的，可以通过CLASS s1 s2 s3 共用一套css样式 组合 通过逗号间隔

    .s1,.s2,.s3{height:48px;}

    属性选择器

    属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用

    div[s='dsx']{height: 48px;}

    CSS优先级

    标签中style优先级最高，其次在代码中就近找，也就是重下往上找

     

    引入CSS样式表

    CSS可以写在三个地方，分别是1、标签中增加属性style，2、header中添加标签style标签，在标签中添加CSS，3、引入CSS样式表，实际就是将header中的style标签复制到一个以css为结尾的文件中，通过在header中添加link标签，引入css样式表<link rel="stylesheet" href="tmp.css">

     

    height

    高度

    width

    宽度

    font-size font-weight

    font-size:字体大小 px font-weight:字体加粗

    font-weight:字体加粗 bold:粗体 700 bolder:更粗字体 lighter:更细字体 normal:默认值 400 inherit:从父类继承字体粗细

    字体大 字体粗

    text-align

    text-align 水平文本对齐方式

    left:文本左对齐 right:文本右对齐 center:中间对齐 inherit:父类继承

    1

    line-height

    line-height 垂直文本对齐方式

    line-height的属性直接对应外层div的宽度就可以

    1

    float

    float 浮动 块级标签浮动后 相当于分层

    通过浮动可以将块及标签放到一行，相当于不同层，但是超过100%的宽度就会换行，超过100%的宽度，是相对于外层div来判断的。 none:默认不浮动、inherit:父类继承

    左边
    并列左边
    最右边
     

    display

    display 展示属性

    块级标签和行内标签之间切换的属性 display:inline，块级标签转换为行内标签 display:block 行内标签转换为块级标签 行内标签无法设置无法设置高度、宽度、padding、margin，可以通过display的display:inline-block，行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性

    外联标签
    内联标签大师兄 大师兄

    margin

    margin 外边距

    外边距 自己针对外围的div产生变化 外边距撑大外层 top left right bottom

     

    padding

    padding 内边距

    内边距 自身的边距增加 top：从上到下增加 内边距扩大自身 bottom：从下增加 left：从左增加 right：从右增加

    内边距增加

    position 分层

    position：fixed 固定在窗口的某个位置 top：距离顶部多少像素 left right bottom

    eg：

    <!--<body  style="margin: 0">-->
        <!--&lt;!&ndash;position 分层111&ndash;&gt;-->
    <!--&lt;!&ndash;position：fixed 固定在窗口的某个位置&ndash;&gt;-->
        <!--<div style="height:48px;position: fixed;top: 0;left: 0;right: 0"></div>-->
        <!--<div style="height: 1000px;margin-top:48px">44444</div>-->
    <!--</body>-->
    <!--relative 与 position：absolute(绝对定位，单用没什么作用 结合relative
    才牛逼) absolute的定位针对于于relative的定位 单独relative没有任何意义 见body.html-->
    <!--<div style="height: 500px;500px;border: 1px solid;position: relative">-->
        <!--<div style="height: 50px; 50px;position: absolute;right: 0;bottom: 0"></div>-->
        <!--<div style="height: 50px; 50px;position: absolute;right: 0;top: 0"></div>-->
        <!--<div style="height: 50px; 50px;position: absolute;left: 0;top: 0"></div>-->
        <!--<div style="height: 50px; 50px;position: absolute;left: 0;bottom: 0"></div>-->

    <!--</div>-->
    <!--<div style="height: 100px; 100px;position: absolute;top: 100px;left: 100px"></div>-->
    <!--<div style="height: 1000px;margin-top:48px">44444</div>-->

    <!--z-index 层级关系
    分层后通过z-index来记录层级关系 数值越大越在前面-->
    <div style="height: 100px;100px;position: relative">
        <div style="height: 100px; 100px;background-color: blue;position: absolute;z-index:2"></div>
        <div style="height: 100px; 100px;background-color: red;position: absolute;z-index: 1"></div>
    </div>
    <!--cursor
    cursor 一些不同的光标 cursor:pointer 鼠标的小手 cursor:pointer小手，cursor:move (移动)，
    cursor:crosshair(截图)有很多种样式 知道干嘛的就行了-->
    <!--<input type="buttom"value="登陆"style="cursor: pointer">-->

    <!--overflow:auto当内容超出后自动出现滚动条，hidden溢出的部分自动截取掉
     scroll强制添加滚动条-->
    <!--<div style="height: 100px; 100px;overflow: auto">-->
        <!--<img src="dsx.jpg">-->
    <!--</div>-->
    背景图：
    <style>
        .c1{
            height: 20px;
             20px;
            border: 1px solid;
            background-image: url('http://ui.imdsx.cn/static/image/icon.png');
            /*讲div看做一个窗户，图片在窗户外移动用于切图*/
            /*background-position-y: 10px 纵向移动图片 background-position-x: 10px 横向移动图片。也可以不写x或y，默认第一个为x的值 第二个位y的值，background-position:10px 10px。
            可以通过background直接简写，background 简写 参数分别为 颜色 背景图 postion横向 纵向 是否堆叠*/
            background-position-x: 10px;
            background-position-y: 10px;
        }
    </style>

    </head>
    <body>
    <!--background-image背景图是堆叠的;background-repeat: no-repeat不堆叠,repeat-x横轴堆叠-y纵轴堆叠-->
    <!--<div style="height: 1000px;100%;background-image: url('dsx.jpg');background-repeat: repeat-x"></div>-->
  • 相关阅读:
    软件架构师如何工作（即架构漫谈读后感）
    寒假学习记录22
    寒假学习记录21
    寒假学习记录20
    实验四 LL(1)语法分析
    大学生熬夜情况调查结果分析
    大学生熬夜情况调查计划
    实验三 递归下降分析分析法
    实验一 根据状态转换图手工构造词法扫描器
    《软件需求工程》阅读笔记06
  • 原文地址：https://www.cnblogs.com/lingxia/p/8963510.html
Copyright © 2020-2023  润新知