前回の記事で、HTML5 を学ぶには CSS の知識が必要であると述べました。ページをデザインする際には、HTML5 ページのレイアウトと構造を知る必要があります。非常に豪華で美しいインターフェイスを実現するには、CSS を使用する必要があります。まずはCSS2の基本的な使い方を確認してから、CSS3との関係や違いを見ていきましょう。
1.CSSとは何ですか?
カスケード スタイルシート (カスケード スタイルシート) は、Web ページのプレゼンテーション形式を提供します。 W3Cの仕様によれば、Webページをデザインする際には、Webページのデータと構造をHTMLファイルに記述し、Webページの外観をCSSファイルに記述し、Webページの動作を.js ファイルに書き込まれます。この目的は、Web ページのデータ、外観、動作を分離して、コードのメンテナンスを容易にすることです。
2. CSS セレクター:
(1) タグ セレクター (単純なセレクター)
(2) クラス セレクター
.s1{ 属性名:属性 }
次のような名前付きクラス セレクターもあります:
div.s1{ font-size;120px; }
(3 ) ID セレクター
#d1{ font-size:italic; font-weight:900; }
(4) セレクターのグループ化
h1,h2,h3{ //用逗号隔开 <span style="white-space:pre"> </span>color:bllue; }
(5) セレクターの導出
#d2 p{ span style="white-space:pre"> </span>color:red; font-size:300; }
CSS 内のコメント
/* */
スタイルの優先順位:
外部スタイル、スタイルを
.css ファイルの内部スタイルに書きます。 .html ファイル内のスタイル
インライン スタイル、style=" "
競合が発生した場合: 外部スタイル
CSS の 2 つの主要な属性:
(1) 表示属性
には 3 つの値があります:
block マークをブロック マークとして表示する
inline マークをインライン マークとして表示する
none 表示しない
<html> <!--display属性--> <head> <style> #d1{ width:200px; height:100px; background-color:red; color:white; font-size:40px; display:inline; <!--改为行内标记--> } #d2{ width:200px; height:100px; background-color:blue; color:white; font-size:40px; display:inline; <!--改为行内标记--> } </style> </head> <body> <div id="d1">hello1</div> <!--标记d2会另起一行显示--> <div id="d2">hello2</div> </body> </html>
(2) 位置属性
には 3 つの値があります:
static: デフォルト値。ブラウザはタグをデフォルトの方法 (左から右、上から下) で配置します。
絶対: 親マーク (マークが配置されているマーク) を基準としたオフセット。
相対: 最初にデフォルトの方法で配置し、次にオフセットします。
一般的に使用される属性は次のとおりです:
(1)文本相关的属性 font-size:30px; //字体大小 font-style:normal(正常)/italic(斜体) font-weight:800; //100-900 (粗细) font-family:"宋体"; //字体 text-align:left/center/right; //文本水平对齐方式 line-height:30px; //行高 一般和容器的高值相同放在中间 cursor:pointer/wait; //光标的形状 (2)背景相关的属性 background-color:red; //背景颜色 background-color:#88eeff; //RGB格式颜色设置 background-color:rgb(100,100,100); //可以用这种格式输入十进制数的颜色值 background-image:url(images/t1.jpg); //背景图片 background-repeat:no-repeat/repeat-x/repeat-y; //平铺方式 background-position:30px 20px; //(水平和垂直)背景位置 background-attachment:scroll(默认)/fixed; //依附方式 也可以同时设置背景的多个特性: background:背景颜色 背景图片 平铺方式 依附方式 水平位置 垂直位置; (3)边框 border-left:1px solid red; border-right:2px dotted black; border-bottom: border-top: border:1px solid red; (4)定位 width:100px; height:200px; margin //外边距 margin-left:20px; margin-right:30px; margin-top:40px; margin-buttom:50px; 可以简化为:margin:top right bottom left; margin:40 30 50 20; padding //内边距 padding-left: padding-right: padding-top: padding-buttom: 可以简化为:padding:top right bottom left; 内边距会将父标记撑开 (5)浮动 取消标记独占一行的特性 float:left/right; //向左,向右浮动 clear:both; //清除浮动的影响 (6)其他 list-style-type:none;除掉列表选项的小圆点。 text-decoreation:underline; //给文本加下划线 (7)连接的伪样式 a:link{color:red} 没有访问时 a:visited{color:blue} 鼠标放上时 a:action{color:green} 鼠标点击时 a:hover{color:yellow} 鼠标离开时
上記は、これまでに学習した CSS の基本的な概要です。 まず、css3 のリファレンス マニュアルを開きます (ダウンロード アドレス: http://download.csdn.net /detail/lxq_xsyu/6784027)
まずは border-color 設定の border を見てみましょう
関連プロパティ: border-top-color、border-right-color、border-bottom-color、border -left-color
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="utf-8" /> <meta name="robots" content="all" /> <meta name="author" content="Tencent-ISRD" /> <meta name="Copyright" content="Tencent" /> <title>Border-color</title> <style> div{ border: 8px solid #000; -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; padding: 5px 5px 5px 15px; } </style> </head> <body> <div>在Firefox浏览器里能看到边框颜色渐变效果</div> </body> </html>
この設定は、Firefox ブラウザーでのみサポートされています。実行中の効果は、css3 で多くのスタイル属性を追加できることがわかります。このマニュアルを参照して、css2よりも豪華なインターフェイス効果を作成できます。jsと組み合わせると、ページアニメーションも実現できます。
次に、インターフェース要素の角丸効果の作成を見てみましょう
<html> <head> <style type="text/css"> a{ display:block; height:40px; float:left; font-size:1.2em; padding-right:0.8em; background:url(images/headerRight.png) no-repeat scroll top right; } a span{ background:url(images/headerLeft.png) no-repeat; display:block; line-height:40px; padding-left:0.8em; } </style> </head> <body> <a href="#"><span>Box Title</span></a> </body> </html>上記の方法で問題は解決しますが、冗長なタグが追加されます。css3 を使用して解決する方法を見てみましょう:
<html> <head> <style type="text/css"> a{ float:left; height:40px; line-height:40px; padding-left:0.8em; padding-right:0.8em; border-top-left-radius:8px; border-top-right-radius:8px; background-image:url(image/headerTiny.png); backgrount-repeat:repeat-x; } </style> </head> <body> <a href="#"><span>Box Title</span></a> </body> </html>上記は Xiaoqiang の HTML5 モバイル開発パス (4) - — CSS2 および CSS3 の内容 さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート:メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス:要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ:ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

クリーンで効率的なHTML5コードを書き込む方法は?答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 4.タグが閉じていないなどの一般的な間違いを避け、コードの有効性を確認してください。

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1)マルチメディアサポート:H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2)オフラインストレージ:WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3)パフォーマンスの最適化:ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

ホットトピック









