ホームページ >ウェブフロントエンド >htmlチュートリアル >20、CSS_html/css_WEB-ITnose
20、CSS_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:38:151056ブラウズ
CSS
カスケード スタイル シート。
表示 HTML スタイルを定義するために使用されます。
DIV と SPAN
div はブロックレベルの要素です。
span は行レベルの要素です。
コンテンツをいくつかのページにラップし、スタイルを均一に設定します。
CSS構文
特徴: 値;
CSSをページに埋め込む3つの方法
インラインスタイル
すごい
ページ内スタイル
<div style="color:red;">这是红色的字。</div>
外部紹介スタイル シート ファイル
<style type="text/css"> Selector{property:value;}</div> 優先順位: 近接原則、インライン優先およびページ内優先、外部ファイルよりも優先。
CSS アノテーション
<!-- 方式1 --><link rel="stylesheet" type="text/css" href="css/style.css" ><!-- 方式2 --><style type="text/css">@import url(css/style.css);</style>
selector
class selector
.クラス名 { style 属性: value }
/* 这里是注释部分 */
IDセレクター
#idName{ スタイル属性: 値; }
<style> p.red{color:red} </style><!-- 使用时 --><p class="red">类选择器</p> タグセレクタータグ名 { スタイル属性: 値; }
<style> #id{color:red}</style><!-- 使用时 --> <p id="id">ID选择器</p> グループセレクター属性 1、属性 2、属性e 3 { スタイル属性 : 値 }
<style> body{color:red}</style><body>选择器</body> 子供セレクター
<style> h1,h2,h3,h5,p{color:#000;}</style><h1>选择器</h1> バックエンドセレクター
<style> ul>li{list-style:none}</style><ul><li>1</li><li>2</li></ul> ユニバーサルセレクター
<style> ul a{list-style:none}</style><ul><li><a href=''>123</a></li><li>2</li></ul> P seudo クラスセレクター
<style> *{color:#000;}</style><h1>选择器</h1> 疑似要素セレクター
:link默认样式:visited点击过样式:active点击时样式
セレクターの優先順位: !重要 > #id >.class > セレクター
単位と値継承: つまり、内側にラップされたラベルは外側を享受しますが、ボーダー、マージン、パディング、背景は継承されません。
5009c4839b1c39ddff43c83742453187Inherit907fae80ddef53131f3292ee4f81644bItalicd1c6776b927dc33c5d9114750b58633894b3e26ee717c64999d7867364b1b4a3 表示: Inherit Italic
em マークは p タグの赤色を継承します
display属性: none (非表示)、block (ブロック表示)、inline (行表示)、list-item (リスト表示)。
色属性: 前景色は rgb(100%,100%,100%);、rgb(255,255,255);、16 進値 #ffffff;、短い 16 進値 #fff; にすることができます
絶対長さの単位: インチ、cm センチメートル、mm ミリメートル、pt ポンド。
相対的な長さの単位: em テキスト サイズ、ex 1ex=0.5em ex の半分、px ピクセル。
パーセント値: % パーセント記号、150% は 1.5em に相当します
背景
:first-letter首字母:first-line首行Text
background-color：背景颜色，transparent 透明。background-image：url() 背景图片background-repeat：平铺 repeat-x 横向、repeat-y 纵向、 no-repeat 不平铺background-position：位置 top、bottom、left、right、centerbackground-attachment：背景固定 fixed固定 不随屏幕滚动background：[color | image | position | repeat | attachment] 简写Font
すごい
リスト
リスト- style-type: リストスタイル disc (実線ドット)、circle (中空ドット)、square (ブロック)、none (なし)
list-style-image: リスト画像 シンボルとして画像を使用
list-style-position: list内側、外側の位置
リストスタイル: [ type |position ]
ボックスとボーダー
rree
フローティング
との位置 りりー