ホームページ > 記事 > ウェブフロントエンド > CSSを実装する4つの方法とセレクターの紹介
CSSを実装する4つの方法とセレクターの紹介
- 零下一度オリジナル
- 2017-06-24 14:18:491345ブラウズ
CSS の実装とセレクター
このレッスンの内容:
1. CSS を実装する 4 つの方法
1. 各 html タグ には style スタイル属性 があり、この属性の値は CSS コードです。 (1つのタグの場合)
2、styleタグを使用します。 通常は head タグ内で定義されます。 (複数の同一タグの場合)
3. 複数のページで同じスタイルを使用する場合、スタイルを CSS ファイルImport
4、HTML ヘッダー タグの link タグ を介して CSS ファイルをリンクします
2. Selector
label selector div{}
class selector .haha
id selector #qq (この属性を使用しているため、id の値はページ内で一意ですCSSだけでなくJavaScriptでも)
クラスセレクターはIDセレクターと同じように使用されます優先順位が低いほど高くなります
3つ、CSSの注意点
css: Web ページのコンテンツと表示スタイルを分離し、表示機能を改善します。
CSS カスケード スタイル シート
は、Web ページ内のスタイルを分離し、CSS によって完全に制御され、スタイルの再利用性と拡張性を強化します。
形式: セレクター {属性名: 属性値; 属性名: 属性値;...}
CSS を HTML と組み合わせる 4 つの方法:
1. 各 HTML タグには style 属性があります
2.同じスタイルのページ上の複数のタグでは、同じスタイルを使用する場合、スタイルを再利用するためのスタイルをカプセル化するスタイルタグを定義できます。スタイルはCSSファイルとして個別にパッケージ化してインポートできます。ラベル
& lt; リンク rel = "styleSheet" href = "1.CSS" メディア属性はオプション、デフォルトのデバイス画面/& gt; 複数のスタイルを個別に定義して CSS ファイルにカプセル化 (p.css、div など) .css... 総合 CSS ファイルでは、import を使用してこれらの CSS ファイルをインポートし、HTML ページのリンク タグを使用してこれを追加します。総合 CSS ファイルをインポートするだけです。
優先度: 近接性の原則 タグに設定されたスタイル属性は他のスタイルをオーバーライドできます
セレクター:
1. タグセレクター: 各 HTML タグ名はセレクターです
2. クラス属性を指定します。 js
を参照するときは、className を使用して、タグを追加し、いくつかのポイントを追加します。3. ID セレクター: JavaScript が要素を取得できるように、一意であることを確認してください
4.
a. 関連する選択: 签 ラベル内のタグ
TABLE DIV はテーブル内の DIV 領域を表します B、組み合わせ
セレクター: 複数のセレクターのカンマ区切り C、要素セレクター: 要素のデフォルトの状態などハイパーリンクのデフォルト状態として、クリック状態、ホバー状態など。 :none : IE6 は sCSS フィルターをサポートしていません: いくつかのリッチなスタイルでデザインする場合Web ページのデザイン、DIV+CSS
DIV とP タグは行レベルの領域に属し、Enter 効果があり、SPAN タグはブロック レベルの領域であり、キャリッジ リターン効果はありません
P タグ内に DIV タグをネストしないでください4. コード 1
1 <!-- 2 本课内容： 3 一、实现CSS四种方式 4 1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签) 5 2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签) 6 3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入 7 <style type=”text/css”>@import url(“1.css”);</style> 8 4，通过HTML头标签中的link标签链接一个CSS文件 9 <link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>10 二、选择器11 标签选择器 div{}12 类选择器 .haha13 id选择器 #qq (id的取值在页面中是唯一的，因为该属性除了给CSS使用，还要给javascript使用)14 类选择器和id选择器用法一样，id选择器的优先级比类选择器高，优先级越少越高
15 -->16 <!DOCTYPE html>17 <html>18 <head>19 <meta charset="UTF-8">20 <title>Insert title here</title>21 <!-- type指定下面的css以什么方式解析 -->22 <!--指定这两个样式都作用与div，所以用div后的大括号括起来-->23 <!-- css一般放在头部，因为要预先加载，所以每个出现div的位置都已经被换了样式 -->24 <!--25 第二种方式：26 标签选择器27 div{28 background-color: #000;29 color: #FFF
30 }31 32 -->33 <!-- @IMPORT url("div.css?1.1.11");第三种方式 -->34 <!-- 第四种 link -->35 <link rel="stylesheet" href="div.css?1.1.11" type="text.css?1.1.11">36 <style type="text/css">37 /*38 @IMPORT url(1.css);39 @IMPORT url(div.css);40 @IMPORT url(span.css);41 */42 div.haha{43 background-color: #000;44 }45 </style>46 <!-- 类选择器div.haha 优先级比标签选择器高 约少数，优先级越高 -->47 <!-- 类选择器不仅可以相同标签的少部分做，还可以对不同的标签做 -->48 <!-- div.haha中的div可以不写，.haha，那就所有的有哈哈类的都变了 -->49 <!-- 按钮加多套这样的.haha实现动态样式 -->50 </head>51 <body>52 <!--53 css和html相结合的第一种方式54 1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签)55 2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签)56 3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入57 <style type=”text/css”>@import url(“1.css”);</style>58 4，通过HTML头标签中的link标签链接一个CSS文件59 <link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>60 61 -->62 <!-- -->63 64 65 <!-- 样式的重叠 重复样式一最后加载为主，不重复样式层叠，其实都是层叠 -->66 <!-- color: #F00 为颜色的缩写 -->67 <div style ="color: #F00">这是一个div区域1</div>68 <div class="haha">这是一个div区域2</div>69 <span>span区域1</span>70 <span>span区域2</span>71 <p>这是一个段落1</p>72 <p>这是一个段落2</p>73 74 75 </body>76 </html>
五、代码二
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><!--link rel="stylesheet" href="1.css?1.1.11" type="text/css" /--><style type="text/css">/*@import url(1.css);
div{
background-color:#09F;
color:#FFF;
}
.haha{
background-color:#FF3;
color:#0C0;
}*//*预定样式，实现动态的加载。.hehe{
background-color:#C93;
color:#00F;
}*//*#qq{通常ID的取值在页面中是唯一的，因为该属性除了给css使用，还可以被js使用。id通常都是为了去标示页面中一些特定区域使用的。
background-color:#000;
color:#FFF;
}*//*span b{关联选择器 选择器中的选择器background-color:#09F;
color:#FFF;
}*//*组合选择器*//*.haha,div b{对多种选择器进行相同样式定义background-color:#000;
color:#C00;
}*//*伪元素
超链接的状态。*//*未访问*/a:link{background-color:#06F;color:#FFF;text-decoration:none;font-size:18px;}/*鼠标悬停*/a:hover{background-color:#FFF;color:#F00;font-size:24px;}/*点击效果*/a:active{background-color:#000;color:#FFF;font-size:36px;}/*访问后效果*/a:visited{background-color:#FF9;color:#000;text-decoration:line-through;}p:first-letter{font-size:36px;color:#F00;}div:hover{background-color:#F00;color:#FFF;}input:focus{background-color:#09F;}#qq{float:left;}/*L V H A*/</style></head><body><input type="text" /><input type="text" /><hr /><a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a><hr /><!--css和html相结合的第一种方式。
1，每一个html标签中都有一个style样式属性。该属性的值就是css代码。
2，使用style标签的方式。 一般都定义在head标签中
优先级：标签选择器<类选择器<id选择器<style属性 --><div id="qq">这是一个div<b>区域</b>1</div><div class="haha" id="qq">这是一个div区域2</div><span>span<b>区域</b>1</span><span class="haha">span区域2</span><p>这是一个段落1</p><p class="haha">这是一个段落2</p></body></html>
以上がCSSを実装する4つの方法とセレクターの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。