ホームページ  >  記事  >  ウェブフロントエンド  >  CSS+DIV 1 日目_html/css_WEB-ITnose

CSS+DIV 1 日目_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:33:34861ブラウズ

CSS基础

 引用方法:

   基本语句结构:选择符{属性1:属性值1;属性2:属性值2}


   选择符:可以是HTML中任何的标识符,比如TR、TD、P、DIV、IMG甚至BODY都可以作为选


         择符。 选择符中的内容将会以大括号内属性值定义的格式来显示。


  除了选择符外,css还提供了几种选择器来让html调用css:


   群选择器:当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:


          p, td, li { font-size : 12px ; }


   id选择器:用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。


           例如我们首先定义一个层


          

B メニューバーは、スタイル テーブルで定義されている、使用するスタイルです。



カテゴリ セレクター: class="" を使用してスタイルを参照したい場合は、定義内のセレクターの前に「.」を追加する必要があります。

using 電話しに来ました。


-------------------------------------- -----------------------


基本的な CSS 呼び出しを見直しました。 CSS の書き方を学び、これらの呼び出しメソッドを使用する限り、Web ページで遊ぶことができます。

CSS には無数の属性がありますが、他の言語と同様に、共通の属性の 1/3 をマスターすれば、機能の 90% を実現できます

まずはよく使われる属性を学びましょう。

CSS の共通属性:


フォント属性:


これは最も基本的な属性であり、主に次の属性が含まれます:



font属性はよく使うのでTuotuoには馴染みがあるので、とりあえずスライドしてみます。



色と背景の属性




使い方はこんな感じです


属性:背景プロパティ値: ||||

||||


使い方がわかれば、ここで言うことはあまりありません。使用できます 時間が来たらすぐに取り出してください



これには、上記のフォント属性: 行間隔、文字間隔が含まれます。 、テキストの装飾など、これは非常に重要であることを認めなければなりません





これはより一般的な CSS アプリケーションです。はい、常にあります。ページ上の多くのハイパーリンクの変更は常に非常に重要です。

今日までこの部分を注意深く見たことがありませんでしたが、今では非常に簡単に思えます



CSS で 4 つの疑似クラスを使用して定義しています。リンクのスタイル: それぞれ: a:link、a:visited、a:hover、a: active。例:


a:link{font-weight : 太字 ;text-decoration : none ;color : #c00 ;}

a:visited {フォントの太さ : 太字 ;テキスト装飾 : なし ;カラー : #c30 ;}
a:hover {フォントの太さ : 太字 ;テキスト装飾 : 下線 ;カラー : #f60 ; }

a:active { font-weight : ball ;text-decoration : none ;color : #F90 ;}


上記のステートメントは、それぞれ「リンク、訪問済みリンク、マウスオーバー時のスタイル」を定義します。マウスをクリックしたとき」。

上記の順序で書かないと、表示が予想と異なる場合がありますのでご注意ください。 「LVHA」の順序であることに注意してください。


以下のコードは非常に興味深いので、ここをクリックしてその効果を確認できます



link css
前景色属性とテキスト装飾属性、
マウスがリンクをアクティブにしたときにフォントを変更することを目的としています*//
a: link{color: green; text-decoration: none}
//*未 アクセス時の状態、色はgreen(緑)、text-decoration属性(text-decoration)の値はnone(none) )*//
a: 訪問済み{color: red; text-decoration: none}
//*訪問済みの状態、色は赤(赤)、テキスト装飾属性値はnoです*//
a: hover {color: blue; text-decoration: overline; font-size: 20pt}
//* マウス起動状態、色は青、文字装飾属性値はオーバーライン、フォントサイズは20ptです*// -->
;

http://www.hongen.com">未訪問のリンク< ;/p>
//*リンクを追加し、3 つの異なる状態を表示し、リンク テキストのフォントとサイズを定義します*//

アクセスしたリンク

hongen.com">マウス起動リンク< /p>







この例はHong En Onlineからコピーしたものです。Tutuoはこの種のことを行っています以前にバンバンを作成し、jsコードの大部分をコピーしました。
これは特殊効果であり、その原理はとても簡単です。Tutuo がリンク CSS の使い方を知らなかったわけではありませんが、私が思いつかなかっただけです。
したがって、創造性と想像力は多くの場合非常に重要です。
RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE
RREE RREE RREE RREE RREE

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。