html5標籤css3的常用樣式-html教學-PHP中文網

name:有以下6個值：
application-name：文檔名稱或應用名，整個文檔只能包含一個值。
author：文檔作者
description:文檔描述
generator：產生文檔的程式。
keywords：網頁關鍵字，以英文逗號分隔。

<a href="http://www.baidu.com">百度一下</a><br><br><span style="background-color: #00ccff">href:路径</span>

登入後複製

<img src="../img/a.jpg" alt="此图无法显示" border="1px solid red" width="400" height="250"/><br><span style="background-color: #00ccff">src：图片路径<br><br></span>

登入後複製

標籤的屬性
Border 邊框
Cellspacing 表格外邊距
Cellpadding 表格內邊距
Bordercolor：邊框顏色
table中
colspan 跨2列
rowspan

跨行

type值

text 文本

password 密碼

radio 單選

checkbox 多選

reset 重置

file 檔案上傳

submit 提交表單

image 圖形提交

button 普通按鈕

分組下拉

<<span style="background-color: #00ccff">select</span> name="city" id="city"><br>    <<span style="background-color: #00ccff">optgroup</span> label="山东"><br>        <<span style="background-color: #00ccff">option</span> value="yt">烟台</option><br>        <option value="qd">青岛</option><br>        <option value="wh">威海</option><br>    </optgroup><br>    <optgroup label="北京"><br>        <option value="bj">bj</option><br>        <option value="tam">tam</option><br>        <option value="zong">zong</option><br>    </optgroup><br></select><br><br>文字区域<span style="background-color: #00ccff">textarea</span>

登入後複製

<textarea name="textarea" id="textarea" <span style="background-color: #00ccff">cols="30" rows="10"</span> readonly="readonly"<br>        disabled="disabled"><br>    1</textarea><br>cols 宽度 rows 高度  readonly 只读<br><br><span style="background-color: #800080">css样式</span>

登入後複製

字體、字號：

font（縮寫形式）

font-weight（粗細）正常(normal) 粗體(bold) 斜體(italic)

font-size（大小）
🜎字體系列）
font-style（字體樣式）

登入後複製

字體顏色：color
opacity (透明度 css3)

登入後複製

行距、對齊等：

line-height （行高）
text-align （對齊）
letter-spacing （字符間距）

部分隱藏
text-overflow
text-overflow文字裁切 clip裁切文字時不加... ellipsis 裁切時加... 注意：不換行和over-flow控制
text-shadow 陰影
text-indent
背景屬性：

background （縮寫形式）

background-color（背景色）

background-image（背景圖）
-background-repeat（背景圖重複方式）位置座標、偏移）

列表常用
list-style： none無風格 disc實心圓 circle空心圓 square 實心正方形 decimal 數字

盒子屬性：margin（外邊距/邊界）上方為主可寫1、2、4個值

border（邊框）

距padding（內邊邊距/填充/填充）

後可加 -top 等方向

border-radius 邊框圓角

box-shadow 陰影

變形效果：transform

transform-origin 指定變換的起點

none無變換

translate（长度值或百分比） translateX translateY 在水平、垂直方向平移

scale（数值）scaleX scaleY 在水平方向、垂直方向或两个方向上缩放

rotate（角度）旋转元素

skew（角度）skewX skewY 在水平方向、垂直方向或两个方向上使元素倾斜一定的角度

matrix 自定义

过渡效果：transition

transition-property 指定过渡的css属性默认值 all

transition-duration 完成过渡的时间

transition-timing-function 指定过渡函数缓动效果默认值ease 等同于（0.25， 0.1， 0.25， 1.0）

transition-delay 指定过渡开始出现的延迟时间

@keyframes：定义一个动画

animation

<span style="color: #0000ff"><</span><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">          
  .t5</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
            transition</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 5s ease-out all</span><span style="background-color: #f5f5f5; color: #000000">;</span>   <span style="background-color: #f5f5f5; color: #008000">/*</span><span style="background-color: #f5f5f5; color: #008000">过渡   ease    in 加速   out减速</span><span style="background-color: #f5f5f5; color: #008000">*/</span>
        <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #008000">/*</span><span style="background-color: #f5f5f5; color: #008000">transition-delay延迟</span><span style="background-color: #f5f5f5; color: #008000">*/</span><span style="background-color: #f5f5f5; color: #800000">
        .t5:hover</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">

            transform</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> skew(45deg,45deg)
        </span><span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
        @keyframes key </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
            0%{
                background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> red</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span>
            <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
            25%</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
                background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> orange</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 100px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 100px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">transform</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> rotate(-90deg)</span><span style="background-color: #f5f5f5; color: #000000">;</span>
            <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
            50%</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
                background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> yellow</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 60px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 60px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">transform</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> none</span><span style="background-color: #f5f5f5; color: #000000">;</span>
            <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
            75%</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
                background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> green</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 120px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 120px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">transform</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> none</span><span style="background-color: #f5f5f5; color: #000000">;</span>
            <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
            100%</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
                background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> blue</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">transform</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> rotate(360deg)</span><span style="background-color: #f5f5f5; color: #000000">;</span>
            <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
        }
        .kt</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
            animation</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">key 1s</span><span style="background-color: #f5f5f5; color: #000000">;</span>
           <span style="background-color: #f5f5f5; color: #008000">/*</span><span style="background-color: #f5f5f5; color: #008000"> animation-iteration-count: infinite;</span><span style="background-color: #f5f5f5; color: #008000">*//*</span><span style="background-color: #f5f5f5; color: #008000">无限循环</span><span style="background-color: #f5f5f5; color: #008000">*/</span><span style="background-color: #f5f5f5; color: #ff0000">
            background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> yellow</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
            width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span>

        <span style="background-color: #f5f5f5; color: #000000">}<br><br></span> <span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="kt t5"</span><span style="color: #0000ff">></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

登入後複製

<span style="background-color: #00ccff"><br><br><br><br></span>

登入後複製