SEO_html/css_WEB-ITnoseに有利なDIV+CSS仕様まとめ-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

SEO_html/css_WEB-ITnoseに有利なDIV+CSS仕様まとめ

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:27 PM

1. CSS ファイルとスタイルの命名規則

グローバルスタイル: global.css;

フォントスタイル: font.css;

リンクスタイル: link。 css;

印刷スタイル: print.css;

2. CSS スタイルの命名規則
は、文字、_ 記号、- 記号、および数字で始まる必要があります。。開発後のスタイル名の管理を容易にするために、同僚がスタイルのどの部分に属しているかを一目で理解できるように、意味のある単語または略語の組み合わせを使用して名前を付けてください。これにより、スタイルを検索する時間を節約できます。次に例を示します。

ヘッダーヘッダーの左側には、header_left または header_l を使用できます。box _1of3 (3 つの列のうちの最初の列)、box_2of3 ( 3 列の 2 列目)、ボックス _3of3 (3 列の 3 列目)、その他の例を 1 つずつ挙げるつもりはありません。上記のルールに従って名前を付けるだけです。
以下は、皆さんの利便性を考慮して、一般的に使用される名前付き単語のリストです: (将来、誰もが仕事中に蓄積した単語をゆっくりと共有すると、全員の生活がより統一され、意味や複数の単語はなくなります。 . . )

コンテナ: コンテナ/ボックス

ヘッダー: ヘッダー

メインナビゲーション: mainNav
サブナビゲーション: subNav

トップナビゲーション: topNav

ウェブサイトのロゴ: ロゴ
広告: バナー
ページの中央: mainBody
下部: フッター
メニュー:menu
メニュー内容:menuContent
サブメニュー:subMenu
サブメニュー内容:subMenuContent
検索:search
検索キーワード:キーワード
検索範囲:range
タグテキスト:tagTitle
tag内容:tagContent
現在のタグ:tagCurrent/currentTag
Title : タイトル
コンテンツ: content
リスト: list
現在の場所: currentPath
サイドバー: サイドバー
アイコン: icon
メモ: note
ログイン: login
登録: register
列定義: column_1of3 (3 つの列の最初の列)
column_2of3 (3 つの列の 2 番目の列)
column_3of3 (3 つの列の 3 番目の列)

2. id と class の使用法と違い

スタイルシートでスタイルを定義するときに、次のことができることはわかっています。 ID またはクラスを定義します。例:

ID メソッド: #test{color:#333333}、< div>Content

CLASS メソッド: .test{color:#333333}、call

Content

id はページ上で 1 回のみ使用でき、class は複数回引用できます。

同じIDを複数使用したところ、IEでは正常に表示されましたが、IDとクラスに違いはないようです。

ページ上に同一の ID が複数ある場合、W3 検証に失敗します。
ページ表示に関しては、現在のブラウザでは依然としてこの間違いが許容されており、複数の同一 ID を使用すると「通常は」正常に表示されます。ただし、JavaScript を使用して ID を通じてこの div を制御する必要がある場合、エラーが発生します。
id は、名前と同じように、異なる構造とコンテンツを区別するために使用されるタグです。ルーム内に同じ名前を持つ 2 人がいると、混乱が生じます。
class は、どの構造やコンテンツにも適用できるスタイルです。あなたの名前と同じように、
概念的に言えば、それは異なります。
id は最初に構造/コンテンツを見つけてから、そのスタイルを定義し、それを複数の構造に適用することを意味します。 /コンテンツ。
つまり、XHML CSS を記述するとき、それが 1 次元の構造的位置決めである場合は id を使用し、それ以外の場合は class を使用することをお勧めします (これにより、非構造的位置決め div ブロックの ID はプログラマが定義して使用できるようになります)自分で)
ウェブ標準誰もがコードを書く際に厳格な習慣を身につけることを願っています。

3. CSS の略語を使用します

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。常用的css缩写的主要规则：
颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;
盒尺寸
通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;
边框(border)
边框的属性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;
语法是border:width style color;
背景(Backgrounds)
背景的属性如下：
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字体(fonts)
字体的属性如下：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
列表(lists)
取消默认的圆点和序号可以这样写list-style:none;
list的属性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以缩写为一句：list-style:square inside url(image.gif);

四、明确定义单位，除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

五、区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

六、取消class和id前的元素限定

当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#id1{}可以写成#id1{}
这样可以节省一些字节。

七、默认值

通常padding和margin的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：
[*] {
padding:0;
margin:0
}
或者是针对某元素来定义：
ul,li,div,span {
padding:0;
margin:0
}

八、CSS的优先级

行内样式(inline style) > ID选择符 > 样式(class),伪类(pseudo-class)和属性(attribute)选择符 > 类别(type)，伪对象(pseudo-element)
解释:
[*]内联样式(inline style)：元素的style属性，比如

,其中的color:red;就是行内样式
[*]ID选择符：元素的id属性，比如

可以用ID选择符#content
[*]伪类(pseudo-class)：最常见的是锚(a)伪类，比如a:link,a:visited.
[*]属性选择符(attribute selectors)：比如div[class=demo],含有class为demo的div元素
[*]类别选择器(type selector)：HTML标签选择，比如div .demo,div元素下含有class为demo的元素
[*]伪对象选择器(pseudo-element selector)：比如div:first-letter,div元素下的第一个单词。

九、不需要重复定义可继承的值

CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义，除非是为了更变当前元素样式不使用父元素的属性值，但是要注意，浏览器可能用一些默认值覆盖你的定义。

十.多重CSS样式定义，属性追加重复最后优先原则

一个标签可以同时定义多个class，也可以是同一个class中重复定义属性。例如：
我们先定义两个样式
.one{width:200px;background:url(1.jpg) no-repeat left top;}
.two{border:10px solid #000; background:url(2.jpg) no-repeat left top;}
在页面代码中，我们可以这样调用:

这样最终的显示效果是这个div样式是什么呢？？重复的是以哪一个为准呢？？

应用到的样式如下：
width:200px;
border:10px solid #000;
background:url(2.jpg) no-repeat left top;
因为，当应用两个或多个样式时，浏览器所应用的样式根据是属性追加重复最后优先原则
就是说两个或多个或重复的样式名定义，浏览器所应用的样式是按先后顺序的，如果定义了重复的属性值，以最后定义的为准，如果应用了两个或多个样式名，里面不重复定义的属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。

十一、使用子选择器(descendant selectors)

使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

Item 1

Item 1

Item 1

このコードの CSS 定義は次のとおりです:
div#subnav ul { }
div#subnav ul li.subnavitem { }
div#subnav ul li.subnavitem a.subnavitem { }
div#subnav ul li.subnavitemelected { }
div#subnav ul li.subnavitemselected a.subnavitemselected { }
次のメソッドを使用して上記のコードを置き換えることができます

/duote.com/#>" アイテム 1

margin:0 auto;
}
しかし、IE5/Win はこの定義を正しく表示できません。これを解決するために、非常に便利なトリックを使用します。text-align 属性を使用します。これ:
body {
text-align:center;
}
#wrap {
width:760px;
margin:0 auto;
text-align:left;
}
text-align:center; body IE5/Win の本文のすべての要素は中央に配置されます (他のブラウザではテキストが中央に配置されます)。 #warp でテキストを中央に配置します

13. CSS のインポートと非表示

古いブラウザは CSS をサポートしていないため、一般的なアプローチは @import 手法を使用して CSS を非表示にすることです。例:
@import url(main.css);
ただし、この方法は IE4 では機能しません。しばらく頭が痛かったので、次のように書きました:
@import main.css;
この方法で、IE4 で CSS を非表示にすることができます。@import 構文の詳細な説明については、こちらも参照してください。ここで「centricle の CSS フィルターチャート」を見ることができます

14. CSS ハック

場合によっては、IE ブラウザのバグに対していくつかの特別なルールを定義する必要があります。これも同様です CSS テクニック (ハック) はたくさんありますが、私だけが使用していますMicrosoft が今後の IE7 ベータ版で CSS をより適切にサポートするかどうかに関係なく、これら 2 つの方法が最も安全です。
(a) IE で CSS 定義を非表示にするには、子セレクターを使用します。 :
html>body p {
}
(b) 以下の書き方はIEブラウザのみ理解可能(他のブラウザはHide可能)
[*] html p {
}
(c) IE/Winが欲しい場合もあるアクティブにするが、IE/Mac を非表示にする場合は、バックスラッシュトリックを使用できます:
[*] html p {
declarations
}
(d) 次の記述方法は、IE7 ブラウザでのみ理解できます (他のブラウザからは非表示になります)。
[*] html p {
}
2. 条件付きコメントの方法

もう一つの方法、I CSS Hacks よりも耐久性が高いと思うのは、Microsoft のプライベート属性の条件付きコメント (条件付きコメント) を使用することです。この方法を使用すると、メインのスタイルシートの定義に影響を与えることなく、IE 用にいくつかのスタイルを個別に定義できます。このように:

オンラインで見つかる CSS ハックは他にもありますが、多くのハックは w3c 標準に準拠していないため、IE6、IE7、および IE6 を区別できるハックを書きました。 FF スタイルであり、w3c 標準に準拠できるため、コードは次のようになります:
.classname {width:90px! important;width:100px;}
[*] html .classname {width:95px! important;}
のように書いた後この幅は、IE6 では 100px、IE7 では 95px、Firefox では 90px です。

15. デバッグスキル: レイヤーの大きさはどれくらいですか?

CSS のデバッグ中にエラーが発生した場合、植字作業者のように CSS コードを 1 行ずつ分析する必要があります。通常、レイヤーがどれだけのスペースを占めるかが明らかになるように、問題のレイヤーに背景色を定義します。 border の使用を推奨する人もいますが、これは通常は問題ありませんが、問題は、border によって要素のサイズが大きくなる場合があり、border-top と boeder-bottom によって垂直マージンの値が破壊されるため、background を使用する方が安全です。
問題を引き起こすことが多いもう 1 つの属性は、アウトラインです。アウトラインはボーダーのように見えますが、要素のサイズや位置には影響しません。アウトライン属性をサポートしているブラウザはわずかで、私が知っているのは Safari、OmniWeb、Opera だけです。

16. CSS コードの書き方

CSS コードを書くとき、インデント、改行、スペースについては、誰もが独自の書き方の習慣を持っています。継続的な練習の結果、次の記述スタイルを採用することにしました:
.classname {
width:100px;
}
ジョイント定義を使用する場合、通常は各セレクターを別の行に記述します。これにより、CSS ファイルに含めやすくなります。それらを見つけます。最後のセレクターと中括弧 { の間にスペースを追加します。また、各定義を属性値の直後に記述します。スペースは追加しないでください。

私は各属性値の後にセミコロンを追加することに慣れていますが、ルールでは最後の属性値の後にセミコロンを記述しないことができますが、新しいスタイルを追加する場合はセミコロンを追加するのを忘れがちです。エラーになるので全部追加した方が良いです。
最後に、閉じ中括弧} が単独で行に記述されます。スペースと改行は読みやすくします。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

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

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7708

Java チュートリアル

1640

CakePHP チュートリアル

1394

Laravel チュートリアル

1288

PHP チュートリアル

1232

Related knowledge

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

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

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

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

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

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

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