あなたが幸せであることを願っています、あなたが健康であることを願っています、あなたが幸せであることを願っています、あなたがそれを気に入ってくれることを願っています！
最後に、ニャーをフォローして、ニャーをフォローして、ニャーをフォローすると、もっと面白いブログが表示されます。 ！ ！
ニャーニャーニャー、あなたは私にとって本当に大切なものです！
目次
外部スタイルシートへのリンクと外部スタイルシートのインポートの違い
序文
・CSSの概念と特徴を理解する。●CSSの基本構文、セレクター分類、宣言構造をマスターします。• CSS の定義とその参照方法をマスターします。• CSS の継承とカスケードの意味を理解する。
CSS 概念
CSS（Cアスケーディング S tyle Sheet) カスケード スタイル シート (カスケード スタイル シートとも呼ばれます) は、デザインに使用されます。ウェブページのスタイル。
传统HTML的缺点
l (1) メンテナンスの困難 。特殊なマークアップ形式を修正するには、特にWebサイト全体に多大な時間がかかり、その後の修正やメンテナンスコストも高くつきます。l (2) ページが肥大化しすぎています 。さまざまなスタイルを統一的に制御できないため、 HTML ページは多くの場合大きすぎて、貴重な帯域幅を多く占有します。l (3) 位置決めが難しい 。ページ全体をレイアウトする場合、 HTML は各モジュールの位置を調整するのに苦労しているようで、< a i=6>table タグによりページが複雑になり、後のメンテナンスが困難になります。
CSS的优势
1.パフォーマンスとコンテンツの分離
CSS は、HTML タグのスタイルを定義することでページのコンテンツと表示を分離し、Web ページの形式を簡素化します。また、このデザインにより、Web ページの形式を簡単に変更できるようになります。
2.Web ページの表現力の強化
CSS スタイル属性は、HTML よりも多くの書式設定機能を提供します。
3.ウェブサイトのスタイルの一貫性を強化
CSS スタイルはスタイル シート ファイルで定義され、スタイル シート ファイルのスタイルは複数の Web ページに同時に適用されるため、複数の Web ページの一貫性が確保されます。フォーマット。スタイル シート ファイルをいつでも更新して、Web サイトのスタイルを変更できます。 Webサイトの開発・保守作業を大幅に軽減します。
浏览器与CSS 3
l CSS 3 の完成後、多くの新しい機能、つまり新しいスタイルが追加されました。ただし、これらの 新しいスタイルはブラウザでは完全にはサポートされていません 。主な理由は、CSS 3 の多くの詳細の処理がブラウザによって異なるためです。たとえば、あるブラウザはタグの特定の属性をサポートしているが、別のブラウザはそれをサポートしていない、または両方のブラウザがサポートしていないなどです。もサポートしていますが、表示効果が異なります。
CSS编辑方法
1.写在HTML文件里；
2.写在独立的*.CSS文件里。
使用CSS控制Web页面
CSSコントロール ページはCSSルールによって実装されます。 、CSS ルールはセレクターと宣言で構成され、宣言は属性と属性値のペアで構成されます。
CSS は、セレクター タイプの豊富なセットを提供します。タグセレクター、クラスセレクター、id セレクター、疑似クラスセレクターなど。
HTMLページ適用CSS ルールも、:インライン(インライン)スタイル シート、内部スタイル シート、外部スタイル シートへのリンク、および外部スタイル シートのインポート。
CSS基本语法
l CSS 定义CSS は、1 つ以上のルールを含むテキスト ファイルです。
l 规则： 选择符 (selector) 、属性 (properties) 和属性值 (value)
セレクタは通常、 HTML スタイルを設定する必要があるタグです。宣言は、1 つ以上のプロパティ名とプロパティ値のペアで構成されます。
p{font-size:12px; color:blue; font-weight:bold;}
<style type="text/css">
/* 定义body样式 */
body{background:black;color:red;}
.div{padding:50px;}
.pic{float:right; padding:20px;}
</style>
CSS注释方法 /* 此标记应用在文档中 */
注释不能嵌套。
注意与HTML注释方法不同。
CSS定义与引用
CSS样式表类型：4种
インラインスタイルシート（インラインスタイルシート）内部スタイルシート外部スタイルシートをリンクする外部スタイルシートをインポートする
インライン スタイル シート (インライン スタイル)
基本的な構文:
<标记 style="属性: 属性值; 属性: 属性值;…">
構文の説明:
さまざまな HTML<に スタイル 属性 を使用することで、 /span> 要素内のみです。 HTML 要素タグはスタイルを追加します。その範囲は、指定されたstyle の複数の属性はセミコロンで区切ります ;タグ自体で定義されたスタイル は、他のすべてのスタイル定義よりも優先されます。インライン スタイル シートは単一の要素 (マーカー) にのみ影響します。
<p style="color:red;font-size:28px;">この段落は有効になります</p> ;
内部スタイルシート
l 语法格式如下：<スタイル>
选择器{ 属性名称1:属性值1; 属性名称2:属性值2; ... 属性名称N:属性值N }
</スタイル>
栗をあげます：
基本的な構文:
<頭>
<style type="text/css">
.div1,.div3{背景:#99ffff;幅:200px;
高さ:100ピクセル;}
#div2{背景:#00cc00;幅:200px;
高さ:100ピクセル;}
p,h1{ font-size:18px;カラー:#003366;}
</style>
</head>style タグは、type 属性 、先頭に配置する必要があります。
内部スタイルシートは単一のファイルにのみ影響します
内部スタイルシートの特徴
l 内部スタイルでは、 CSS スタイル コードを <head> と </head> を使用し、 <style> タグと </style> タグを宣言用に使用します。この書き方により ページ全体のスタイルを統一 することができます。l 単一のページにスタイルを適用する必要がある場合は、内部スタイル シートを使用できます。l ファイルが少なく、 CSS コードもあまりない状況に適しています。l Web サイトに多数のページがある場合、内部スタイル シートを適用すると各ページのファイルが大きくなり、後のメンテナンスが困難になります。
リンク外部スタイル シート
基本的な構文:
<link rel="スタイルシート" href="外部スタイル シートのファイル名"/ >
構文の説明:
Ø <link> タグは単一のタグであり、ヘッダーに配置されます。Ø 外部样式表的文件名称必须带 后缀名 . css 。Ø CSS ファイルはプレーン テキスト形式である必要があります。Ø 外部スタイル シートが変更されると 参照されているすべてのページ スタイルが自動的に更新されますØ 外部スタイル シート は 内部スタイル シートよりも優先されます。複数の外部スタイル シートを同時にリンクする場合は、「最新のものから原則」に従ってください。
インポート外部スタイル シート
基本的な構文:
<スタイル>
@import url("外部スタイル シートのファイル名");
p,p1{font-size:18px; カラー: ブルー}
</スタイル>
構文の説明:
import 语句后的 “ ; ” 号，一定要加上！「 外部スタイル シートのファイル名 」 はスタイル シート ファイルの名前ですパスを含め、 という接尾辞を付けて埋め込みます。 css ;@import は、 style 要素の前に配置する必要があります。
外部スタイルシートへのリンクと外部スタイルシートのインポートの違い
l インポート メソッドは、ブラウザがダウンロードするときに、スタイル ファイル HTML のコンテンツ全体をダウンロードします。それ a> @importキーワードの位置にコピーして、キーワードを置き換えます< /a >l リンク メソッドは HTML ファイル スタイル ファイル内の特定のスタイルが指定されている場合、ブラウザはそのスタイル ファイルにリンクし、必要なコンテンツを読み取ります
宿題
CSSインラインスタイルシートを適用する
- Webページタイトル：CSSインラインスタイルシートの適用
- Web ページのすべてのコンテンツは <div> コンテナ タグ内に配置されます
- タイトルにはそれぞれ第 1 レベルの見出しと第 5 レベルの見出しが使用されます。
- 使用インライン スタイルで、第 1 レベルのタイトルのスタイルを設定します: フォントの色は赤、フォント サイズは 26 ピクセル
- 使用インライン スタイルを使用して、水平分割線のスタイルを設定します:太2 ピクセル点線 青
- 使用インライン スタイルを使用して、5 レベルの見出しのスタイルを設定します。背景色は黄色、フォント色は青色、フォント サイズは 14 ピクセルです。< /span>
- インライン スタイルを使用して段落のスタイルを設定します: フォント サイズ 12 ピクセル
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS行内样式表的应用</title>
</head>
<body>
<div>
<h1 style="color:#F00; font-size:26px;">服务向导</h1>
<hr style="border:2px dashed blue"/>
<h5 style="background-color:yellow; color:blue; font-size:14px;">商城的支付方式有哪些？</h5>
<p>网上银行支付和货到付款</p>
<h5 style="background-color:yellow; color:blue; font-size:14px;">商城上买东西一般几天可以收到货？</h5>
<p style="font-size:12px">一般情况下，若运送方式为快递，同城交易，如果当天发货，当天可以收到；省外的通过空运3小时内可以送达。</p>
<h5 style="background-color:yellow; color:blue; font-size:14px;">卖家发货后一直没有收到货怎么办?</h5>
<p style="font-size:12px">在卖家已经操作发货后，一直未收到货的，可能由于活动量大造成物流延误，建议您进入“我的订单”页面找到对应交易点击“查看物流”，关注您商品的运输流转记录。</p>
<p style="font-size:12px">如交易即将超时打款前您还未收到商品，避免出现钱货都不在您手中的情况，建议及时进入“我的订单”页面找到对应交易点击“退货/退款”。</p>
<h5 style="background-color:yellow; color:blue; font-size:14px;">拍下的商品想要退货退款怎么办?</h5>
<p style="font-size:12px">活动期间成功付款的所有活动商品，不支持7天无理由退换货。如果消费者有退换货需求，在符合《商城处理规范》的相关规定的情况下，所有活动商品只支持退货，不支持换货，交易双方另有约定的从其约定。</p>
<p>非活动期间成功付款的所有交易，按照正常退货退款流程处理，查看如何申请退款。</p>
<h5 style="background-color:yellow; color:blue; font-size:14px;">申请退款后，钱款多久可以退回？</h5>
<p style="font-size:12px">申请退款后，钱款退回的时间取决于双方的协商及卖家对退款处理的快慢。只要退款状态显示为“退款成功”，即说明钱款已退回。</p>
<h5 style="background-color:yellow; color:blue; font-size:14px;">如何举报钓鱼网站/中奖信息网站？</h5>
<p style="font-size:12px">如果您遇到或者收到了非法分子发来的钓鱼网站、中奖信息网站，可以进入“我的账号”—“举报管理”中，进行举报。</p>
</div>
</body>
</html>CSS内部スタイルシートを適用する
- Webページタイトル：CSS内部スタイルシートの適用
- Web ページのすべてのコンテンツは <div> コンテナ タグ内に配置されます
- タイトルにはそれぞれ第 1 レベルの見出しと第 5 レベルの見出しが使用されます。
- 内部スタイル シートを使用して、第 1 レベルのタイトルのスタイルを設定します: フォントの色は赤、フォント サイズは 26 ピクセル
- 使用内部スタイル シートで水平分割線のスタイルを設定します: 太い 2 ピクセルの点線青
- 内部スタイル シートを使用して、5 レベルの見出しのスタイルを設定します: 背景色は黄色、フォント色は青色、フォント サイズは 14 ピクセル< /span>
- 内部スタイル シートを使用して段落のスタイルを設定します: フォント サイズ 12 ピクセル
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>样式表的应用</title>
</head>
<body>
<div>
<h1>服务向导</h1>
<hr/>
<h5>商城的支付方式有哪些？</h5>
<p>网上银行支付和货到付款</p>
<h5>商城上买东西一般几天可以收到货？</h5>
<p>一般情况下，若运送方式为快递，同城交易，如果当天发货，当天可以收到；省外的通过空运3小时内可以送达。</p>
<h5>卖家发货后一直没有收到货怎么办?</h5>
<p>在卖家已经操作发货后，一直未收到货的，可能由于活动量大造成物流延误，建议您进入“我的订单”页面找到对应交易点击“查看物流”，关注您商品的运输流转记录。</p>
<p>如交易即将超时打款前您还未收到商品，避免出现钱货都不在您手中的情况，建议及时进入“我的订单”页面找到对应交易点击“退货/退款”。</p>
<h5>拍下的商品想要退货退款怎么办?</h5>
<p>活动期间成功付款的所有活动商品，不支持7天无理由退换货。如果消费者有退换货需求，在符合《商城处理规范》的相关规定的情况下，所有活动商品只支持退货，不支持换货，交易双方另有约定的从其约定。</p>
<p>非活动期间成功付款的所有交易，按照正常退货退款流程处理，查看如何申请退款。</p>
<h5>申请退款后，钱款多久可以退回？</h5>
<p>申请退款后，钱款退回的时间取决于双方的协商及卖家对退款处理的快慢。只要退款状态显示为“退款成功”，即说明钱款已退回。</p>
<h5>如何举报钓鱼网站/中奖信息网站？</h5>
<p>如果您遇到或者收到了非法分子发来的钓鱼网站、中奖信息网站，可以进入“我的账号”—“举报管理”中，进行举报。</p>
</div>
</body>
</html>
要約する
CSS ルールはセレクターと宣言で構成されます 。セレクター には id セレクター、クラス セレクター、タグ セレクター、疑似クラス セレクターが含まれます。 デバイス など。CSS は、インライン スタイル シート、内部スタイル シート、リンクされた外部スタイル シート、インポートされた外部スタイル シート に分かれています。インライン スタイル シート はタグ内で style 属性が設定されており、このタグに対してのみ有効です。内部スタイル シート は、ページの head タグに追加されます style タグ。ページ全体で有効です。 外部スタイル シート は CSS ルールは別のファイルに記述され、ファイルのサフィックスは です。 css< /span> CSS< /span> と呼ばれ、後者は 。 外部スタイルシートをインポートしますリンク外部スタイル シート ファイルがページに導入されます。前者は ステートメントは独立します」@importリンク ファイルと呼ばれ、CSS 、
この章は少し長いので、2 つのセクションに分けました。
あなたが幸せであることを願っています、あなたが健康であることを願っています、あなたが幸せであることを願っています、あなたがそれを気に入ってくれることを願っています！
最後に、ニャーをフォローして、ニャーをフォローして、ニャーをフォローすると、もっと面白いブログが表示されます。 ！ ！
ニャーニャーニャー、あなたは私にとって本当に大切なものです！
