ホームページ > 記事 > ウェブフロントエンド > フロントエンドの基本 CSS_html/css_WEB-ITnose
フロントエンドの基本 CSS_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:58:451011ブラウズ
CSS を学ぶ前に、HTML の基本を理解する必要があります。
CSSとは
CSSとはCascading style Sheetsの略で、中国語に訳すと「カスケードスタイルシート」と言うそうです。もう少しスムーズです。実際には、それはスタイルのセットです。 CSS という用語に馴染みがないかもしれません。実際、インターネットを閲覧するときに Internet Explorer を使用する場合も Netscape Navigator を使用する場合も、ほとんど常に CSS を使用しています。CSS を使用していない Web ページを見つけるのは難しいかもしれません。インターネット。 Web ページの作成にどのようなツール ソフトウェアを使用しても、意図的または非意図的に CSS を使用していることになります。 CSS を上手に活用すると、Web ページをより簡潔にすることができます。同じコンテンツを含む Web ページを作成する人が数十 KB いるのに、専門家は数十 KB しか作成しないのはなぜでしょうか。
CSS ページ最適化の 3 つの方法について説明します:
最初と 2 番目の方法:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <!-- <h2> 第二种方式，和下面第二种方式结合使用，其中 .c1 中 “.” 代表class选择器</h2> --> <style> .c1{ background-color: red;border: 10px solid green; } </style></head><body> <h2>css 第一种存在方式</h2> <div style="background-color: red;border: 10px solid green;">css 第一种方式 div</div> <div style="background-color: red;border: 10px solid green;">css 第一种方式 div</div> <h2>css 第二种存在方式 class = "c1名字"</h2> <div class="c1">css 第二种方式 div</div> <div class="c1">css 第二种方式 div</div> <div class="c1">css 第二种方式 div</div></body></html> 3 番目の方法: (CSS ファイルを直接引用)
繰り返されるコードは「.css」ファイルに記述できます
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <!-- <h2>css 第三种存在方式，下面直接引用</h2> --> <link rel="stylesheet" href="common.css" /></head><body> <h2>css 第三种存在方式</h2> <div class="c1">css 第三种方式 div</div> <div class="c1">css 第三种方式 div</div> <div class="c1">css 第三种方式 div</div></body></html>
common.css の内容:
.c1{ background-color: red;border: 10px solid green;} 3 番目の方法は、common を直接参照することです。 .css ファイルの内容のスクリーンショットは次のとおりです
デモンストレーションの効果は次のとおりです:
継続的に更新中...
さらに複数のリンク: http://www.w3school.com.cn/css/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。