zoukankan      html  css  js  c++  java
  • html CSS 学习总结

     

    HTML文件格式

    <!DOCTYPE HTML>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title></title>

    </head>

    <body>

    </body>

    </html>

    标签

    <b></b>粗标签

    <strong></strong>粗标签

    <mark></mark>高亮强调

    <em></em>斜体强调

    <i></i>斜体

    <p></p>文本,删除空格

    <pre></pre>保留原来的文本

    <form></form>表单

    文本框(可在尖括号里添加value对其进行初始化)

    <input type="text"/> 普通文本框

    <input type="password"/>密码框

    <input type="textarea"/>文本域

    <textarea ></textarea>文本域(属性:readonly(只读),disable(不可使用))

    按钮

    <input type="submit" value="按钮"/>(触发提交)

    <button></button>普通按钮

    <input type="reset" value="重置按钮">(重置按钮)

    下拉框

    <select>

    <option value="">""</option>

    ......

    </select>

    单选框

    <label>""</label><input type="radio" name=""/>

    <label>""</label><input type="radio" name=""/>

    复选框

    <label>""</label>

    <label></label><input type="checkbox"/>

    ......

    <span></span>包含文本的标签

    <fieldset></fieldset>定义一个框

    <legend>""</legend>在框上添加文字

    HTML框架

    iframe内联框架,用来嵌入另一个文档

    <iframe src="文件路径"></iframe>

    表格

    <table>

    <tr>

    <td></td>

    <td></td>

    </tr>

    </table>

    colspan单元格列合并

    rowspan单元格行合并

    <div></div>布局

    <table></table>布局

    <ol></ol>有序列表

    <ul></ul>无序列表

    <dl></dl>自定义列表

    css样式 h{第一个样式;第二个样式}

    背景

    background

    -color;颜色

    -image:url(图片路径);背景图片

    -repeat背景重复(no-repeat默认左上角,repeat-y纵坐标平铺,rapeat-x横坐标平铺)

    -position图片位置(center,right bottom...)

    文本

    text-indent缩进文本

    text-align水平对齐(left,right,center)

    word-spacing英文字符间隔

    letter-spacing单词或汉字间隔

    text-transform字符转换(uppercase大写,lowercase小写,none不改变,captialize首字母大写)

    text-decoration文本装饰(underline...)

    white-space处理空白符

    direction文本方向(rtl靠右显示)

    字体

    font-family字体样式

    font-style字体风格(italic 斜体,oblique文本斜体,normal正常)

    font-varaint字体变形(small-caps小型大写字母,normal,inherient继承)

    font-weight加粗

    font-size字体大小

    超链接

    a:link{}链接默认

    a:visited{}点完之后

    a:hover{}鼠标放上去

    a:active{}点击时  

    CSS列表

    无序列表前的标识

    p{list-style-square}正方形

    p{list-style-image:url("路径")}图片

    p{list-style-position}(inside将形状放于文本内,outside右偏移)

    CSS表格

    border-collapse边框合并

    text-align水平设置(center,left,right)

    vertical-align上下设置(middle,bottom,top)

    CSS样式表优先级

    内联>内部样式表>外部样式表

    CSS框模型

    padding内边距

    padding:x x x x(上)(右)(下)(左)

    padding:x x;(上下)(左右)

    padding:x x x(上)(左右)(下)

    pdding:x(上下左右)

    margin外边距(同内边距)

    border边框(left,right,top,bottom)

    min-""当品目缩放到""时,会产生滚动条

    定位 

    position:relative相对定位

    1.使用相对定位不会影响元素本身

    2.不会脱离文档流,只是发生了偏移

    3.如果没有设置偏移量,不会对元素造成影响

    4.还会占据原来的空间

    position:absolute绝对定位

    1.脱离文档流

    2.使用绝对定位会设置当前元素为inline-block(可以设置宽高)

    3.可以使坐标进行移动(

    1.绝对定位没有定位父级,默认以文档作为父级

    2.如果有定位父级,就以定位父级移动

    3.如果有多个定位父级,找最近的定位父级

    4.相对定位一定配合绝对定位使用)

    z-index:1/2/3...提升模块优先级,但其必须配合position使用

    !important可将其他权重设置为0

    position:static静态定位

    按照正常的文档流排版(默认属性)

    position:fixed固定定位(可做导航,不会随着滚动条运动而运动)

    浮动

    float:left/right/none

    1.使块元素在一行显示,为每个元素设置了inline-block

    2.使行元素支持高、宽

    3.不设置高宽,高宽由内容决定

    4.left从左往右开始,right从右往左开始

    浮动按照一定顺序排列,碰到父元素的边界就停止或者前一个兄弟元素也停止下来

    浮动会脱离文档流

    clear:(both消除两边的浮动,left,right)

     

  • 相关阅读:
    理解Golang包导入
    go语言执行windows下命令行的方法
    Go中使用动态库C/C++库
    MongoDB · 引擎特性 · MongoDB索引原理
    Linux中more和less命令用法
    修改Linux文件句柄限制
    MongoDB自动删除过期数据--TTL索引
    mongodb可以通过profile来监控数据 (mongodb性能优化)
    MongoDB学习笔记(索引)
    查看nginx cache命中率
  • 原文地址:https://www.cnblogs.com/fengxiaopiaoer/p/5513696.html
Copyright © 2011-2022 走看看