简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  html5タグcss3の一般的なスタイル

html5タグcss3の一般的なスタイル

WBOY
WBOYオリジナル
2016-10-20 10:09:241128ブラウズ

<メタ名=''>

name: 次の 6 つの値があります:
application-name: ドキュメント名またはアプリケーション名。ドキュメント全体に含めることができる値は 1 つだけです。
author: ドキュメントの作成者
description: ドキュメントの説明
generator: ドキュメントを生成するプログラム。
キーワード: 英語のカンマで区切られた Web ページのキーワード。

リーリー リーリー

ラベルの属性
枠線
セル間隔表の余白
セルパディング表の内側の余白
位置を揃える
Bgcolor:背景色
Background:背景 画像
ボーダーカラー:ボーダー色

のテーブル

colspan は 2 列にまたがります

行スパン 行全体

<入力タイプ="">

型値

テキストテキスト

パスワード パスワード

ラジオ単一選択

チェックボックスの複数の選択肢

リセットリセット

ファイルファイルのアップロード

送信 フォームを送信

イメージグラフィックの投稿

ボタン通常ボタン

グループドロップダウン

リーリー リーリー

フォント、フォントサイズ:
font (省略形)
font-weight (太さ) Normal (標準)、bold (太字)、italic (斜体)
font-size (サイズ)
font-family (フォントファミリー)
font-style (フォントスタイル)

リーリー

フォントの色:
色
不透明度(透明度css3)

リーリー

行間、配置など：
line-height（行の高さ）
text-align（配置）
letter-spacing（文字間隔）
text-decoration（文字装飾）
オーバーフロー 部分的に非表示
text-overflow

テキストオーバーフローのテキストクリッピングは、テキストのクリッピング時に追加されません...トリミング時に省略記号が追加されます...注: 改行とオーバーフロー制御はありません

テキストシャドウシャドウ
テキストインデント

背景属性:
background (略語)
background-color (背景色)
background-image (背景画像)
background-repeat (背景画像の繰り返し方法)
background-position ( 位置座標、オフセット)

よく使われるリスト

リストスタイル： なし スタイルなし ディスク 黒丸 丸 中空丸 四角 黒四角 10進数

Box属性:
margin(マージン/ボーダー)
border(ボーダー)
padding(内側のマージン/パディング)

の後に -top やその他の方向を追加できます

border-radius 境界線の丸い角

ボックスシャドウ

変換エフェクト: 変換

transform-origin は変換の開始点を指定します

なし、変身なし

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>

 

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：【読書メモ『ブートストラップ実戦』】 6. シングルページのマーケティングサイト次の記事：【読書メモ『ブートストラップ実戦』】 6. シングルページのマーケティングサイト

関連記事

続きを見る