zoukankan      html  css  js  c++  java
  • CSS大全

    HTML
    <pre>预格式文本。它保留了空格和换行。
    <del>二十</del> <ins>十二</ins>删除文本和下划线文本
    <abbr>定义缩写或首字母缩略语。
    <address>定义文档作者或拥有者的联系信息。
    <bdo>定义文本方向。<bdo dir="rtl">abc</bdo> 从右往左
    <blockquote>定义从其他来源引用的节。使用<blockquote>元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。
    <dfn>定义项目或缩略词的定义。
    <q>定义短的行内引用。
    <cite>定义著作的标题。
    <a href="#lunbo">锚点定位lunbo</a> <div id="lunbo"> 可以定位任何ID;<a name="a1">可以定name
    <img align="middle"> 文字和图片居中
    <img align ="right"> 图像将浮动到文本的右侧
    <img alt="向左转" /> 如果无法显示图像,将显示 "alt" 属性中的文本:
    ------------------------------------------------------------------------------
    带有可点击区域的图像映射:
    <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
    <map name="planetmap" id="planetmap">
      <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
      <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
      <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
    </map>
    ------------------------------------------------------------------------------
    <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />您将在 5 秒内被重定向到新的地址。


    ------------------------------------------------------------------------------
    HTML5
    播放音频 多个source文件更好的支持更多的浏览器
    <audio controls="controls">
      <source src="song.ogg" type="audio/ogg">
      <source src="song.mp3" type="audio/mpeg">
    您的浏览器不支持HTML5音频。
    </audio>
    播放视频 多个source文件更好的支持更多的浏览器
    <video width="320" height="240" controls="controls">
      <source src="movie.ogg" type="video/ogg">
      <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持HTML5视频。
    </video>
    autoplay视频在就绪后马上播放
    controls向用户显示控件,比如播放按钮
    loop 循环播放
    preload 预加载
    src 视频的URL
    width 宽度
    height 高度
    ------------------------------------------------------------------------------
    CSS选择器
    *{}所有标签,统一样式
    p{}标签选择器:(所有标签统一样式)
    .c1{} class样式选择器:(所有名为c1的样式统一样式)
    #id1{} id选择器:(id名为id1的样式,只有一个)
    <p class="c1 c2"> 多重选择器:(可以从多个样式中组合选择样式,如果样式相同后面的样式会替换前面的样式)
    body .c1 (body‘空格’.cr 表示 body下面的c1的样式,可以有多个空格)
    .c1+p{} (+号:紧跟c1的村签的同级元素)
    .c1+p{} (~号:后面所有c1后面的同级元素)
    div>p{} (>:表示所有div下面的p标签)
    a[title]{} (设置了title属性的a标签)
    a[href='http://www.baidu.com']{} (设置了href属性='www.baidu.com'的a标签)
    a[href^='http']{} (设置了href属性以'http'的开头的a标签)
    a[href$='com']{} (设置了href属性以'com'的结尾的a标签)
    a[href*='com']{} (设置了href属性包括'com'的a标签)
    ------------------------------------------------------------------------------
    选择器权重
    选择器优先级:(id>class>标签>*)
    内联权重 A
    id选择器 B
    class    C
    标签     D
    * 选择器 F
    ------------------------------------------------------------------------------
    字体样式(字体相关css可以继承 * body div p)
    字体相关属性:(font)
    CSS文字属性:
    color : #999999; /*文字颜色*/
    font-family : 宋体,sans-serif; /*文字字体*/
    font-size : 9pt; /*文字大小*/
    font-style:itelic; /*文字斜体*/
    font-variant:small-caps; /*小字体*/
    letter-spacing : 1pt; /*字间距离*/
    line-height : 200%; /*设置行高*/
    font-weight:bold; /*文字粗体*/
    vertical-align:sub; /*下标字*/
    vertical-align:super; /*上标字*/
    text-decoration:line-through; /*加删除线*/
    text-decoration: overline; /*加顶线*/
    text-decoration:underline; /*加下划线*/
    text-decoration:none; /*删除链接下划线*/
    text-transform : capitalize; /*首字大写*/
    text-transform : uppercase; /*英文大写*/
    text-transform : lowercase; /*英文小写*/
    text-align:right; /*文字右对齐*/  
    text-align:left; /*文字左对齐*/
    text-align:center; /*文字居中对齐*/
    text-align:justify; /*文字分散对齐*/
    vertical-align属性
    vertical-align:top; /*垂直向上对齐*/
    vertical-align:bottom; /*垂直向下对齐*/
    vertical-align:middle; /*垂直居中对齐*/
    vertical-align:text-top; /*文字垂直向上对齐*/
    vertical-align:text-bottom; /*文字垂直向下对齐*/
    ------------------------------------------------------------------------------
    CSS边框空白
    padding-top:10px; /*上边框留空白*/
    padding-right:10px; /*右边框留空白*/
    padding-bottom:10px; /*下边框留空白*/
    padding-left:10px; /*左边框留空白
    ------------------------------------------------------------------------------
    边框属性: (Border)
    border-style: solid /*实线框*/
    dotted /*虚线框*/
    double /*双线框*/
    groove /*立体内凸框*/
    ridge /*立体浮雕框*/
    inset /*凹框*/
    outset /*凸框*/
    border-radius:20px 像素圆角
    border-; 边框宽度
    border-color:#;颜色
    简写方法border:style px color; /*简写*/
    border-top : 1px solid #6699cc; /*上框线*/
    border-bottom : 1px solid #6699cc; /*下框线*/
    border-left : 1px solid #6699cc; /*左框线*/  
    border-right : 1px solid #6699cc; /*右框线*/
    ------------------------------------------------------------------------------
    列表属性: (List-style)
    list-style-type:none; /*不编号*/
    list-style-type:decimal; /*阿拉伯数字*/
    list-style-type:lower-roman; /*小写罗马数字*/
    list-style-type:upper-roman; /*大写罗马数字*/
    list-style-type:lower-alpha; /*小写英文字母*/
    list-style-type:upper-alpha; /*大写英文字母*/
    list-style-type:disc; /*实心圆形符号*/
    list-style-type:circle; /*空心圆形符号*/
    list-style-type:square; /*实心方形符号*/
    list-style-image:url(/dot.gif); /*图片式符号*/
    list-style-position: outside; /*凸排*/
    list-style-position:inside; /*缩进*/
    ------------------------------------------------------------------------------
    定位属性: (Position)
    Position: absolute; relative; static;
    visibility: inherit; visible; hidden;
    overflow: visible; hidden; scroll; auto;
    clip: rect(12px,auto,12px,auto) (裁切)
    z-index:1 数字越大越在上面
    ------------------------------------------------------------------------------
    CSS背景样式:
    background-color:#F5E2EC; /*背景颜色*/
    background:transparent; /*透视背景*/
    background-image : url(/image/bg.gif); /*背景图片*/
    background-attachment : fixed; /*浮水印固定背景*/
    background-repeat : repeat; /*重复排列-网页默认*/
    background-repeat : no-repeat; /*不重复排列*/
    background-repeat : repeat-x; /*在x轴重复排列*/
    background-repeat : repeat-y; /*在y轴重复排列*/
    指定背景位置
    background-position : 90% 90%; /*背景图片x与y轴的位置*/
    background-position : top; /*向上对齐*/
    background-position : buttom; /*向下对齐*/
    background-position : left; /*向左对齐*/
    background-position : right; /*向右对齐*/
    background-position : center; /*居中对齐*/
    ------------------------------------------------------------------------------
    a标签属性:
    a /*所有超链接*/
    a:link /*超链接文字格式*/
    a:visited /*浏览过的链接文字格式*/
    a:active /*按下链接的格式*/
    a:hover /*鼠标转到链接*/
    text-decoration:none /*去掉下划线*/
    ------------------------------------------------------------------------------
    鼠标光标样式:
    链接手指 cursor: hand
    十字体 cursor:crosshair
    箭头朝下 cursor:s-resize
    十字箭头 cursor:move
    箭头朝右 cursor:move
    加一问号 cursor:help
    箭头朝左 cursor:w-resize
    箭头朝上 cursor:n-resize
    箭头朝右上 cursor:ne-resize
    箭头朝左上 cursor:nw-resize
    文字I型 cursor:text
    箭头斜右下 cursor:se-resize
    箭头斜左下 cursor:sw-resize
    漏斗 cursor:wait
    ------------------------------------------------------------------------------
    CSS边界样式:
    margin-top:10px; /*上边界*/
    margin-right:10px; /*右边界值*/
    margin-bottom:10px; /*下边界值*/
    margin-left:10px; /*左边界值*/
    ------------------------------------------------------------------------------
    opacity 透明度0.0-1.0
    text-shadow 文本加阴影 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; 
    text-shadow: 5px 5px 5px #FF0000;
    box-shadow 块元素加阴影 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;  
    box-shadow: 5px 5px 5px  5px #888888; 外阴影
    box-shadow:inset 10px 10px 5px #888888;内阴影
    4边不同的阴影
    box-shadow:-10px 0 10px red, /*左边阴影*/  
    10px 0 10px yellow, /*右边阴影*/  
    0 -10px 10px blue, /*顶部阴影*/  
    0 10px 10px green; /*底边阴影*/  

  • 相关阅读:
    酷睿i3/i5/i7到底有啥区别,该怎么选
    酷睿i3/i5/i7到底有啥区别,该怎么选
    感谢AMD,是它我们才用得上Intel的超性价比的智能处理器
    如何在ASP.NET2.0中通过Gmail发送邮件
    Asp.Net事务和异常处理:
    080414 雨
    080415 晴
    还有四天
    助けて
    今晚安排
  • 原文地址:https://www.cnblogs.com/cxd1008/p/6372413.html
Copyright © 2011-2022 走看看