検索

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">マウス起動リンク

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTML、CSS、およびJavaScriptの理解:初心者向けガイドHTML、CSS、およびJavaScriptの理解:初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTMLの役割:Webコンテンツの構造HTMLの役割:Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード:用語を詳しく見るHTMLとコード:用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript:Web開発者に不可欠なツールHTML、CSS、およびJavaScript:Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割:コアの責任HTML、CSS、およびJavaScriptの役割:コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか?HTMLは初心者のために簡単に学ぶことができますか?Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか?HTMLでの開始タグの例は何ですか?Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は?メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境