CSSの実装方法とセレクターのサンプルコードを共有する方法

CSS の実装とセレクター

このレッスンの内容:

1. CSS を実装する 4 つの方法

1. 各 html タグ には style 属性 があり、この属性の値は css コードです。 (1つのタグの場合) 2、
styleタグを使用します。 通常は head タグで定義されます。 (複数の同一タグの場合) 3. 複数のページで同じスタイルを使用する場合、スタイルを
CSS ファイルImport 080b747a20f9163200dd0a7d304ba388@import url("1 . css”);531ac245ce3e4fe3d50054a55f265927
4、HTML ヘッダー タグの
link タグ を介して CSS ファイルをリンクします 9f2114ffc12d43cc92a5efe2aa47fb5a0f3eabac747cdf61a51589c5584ae6e8 b2386ffb911b14667cb8f0f91ea547a7无标题文档6e916e0f7d1e588d4f442bf645aedb2f513977f72c8b82327f1824abcf935081 46d5fe1c7617e3914f214aaf043f4ccf/*@import url(1.css); p{         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,p 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;}p:hover{         background-color:#F00;         color:#FFF;}input:focus{     background-color:#09F;}#qq{     float:left;}/*L  V  H  A*/531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d3e0bbf3d1134cd26a111abe10200bc543e0bbf3d1134cd26a111abe10200bc54     cdcaaee4c9b94464012808ae8e1b67a4e78e5c9c377b77d69dde185bfc3c8b9c伪元素选择器演示5db79b134e9f6b82c0b36e0489ee08edcdcaaee4c9b94464012808ae8e1b67a4     2fed77d005fcf32fa800c5b796f623ba         a1d1e34741b1023c91014f88114a0fce这是一个pa4b561c25d9afb9ac8dc4d70affff419区域0d36329ec37a2cc24d42c7229b69747a194b3e26ee717c64999d7867364b1b4a3         09cf2dde204ba4b4bc44bbca1e10d69a这是一个p区域294b3e26ee717c64999d7867364b1b4a3         45a2772a6b6107b401db3c9b82c049c2spana4b561c25d9afb9ac8dc4d70affff419区域0d36329ec37a2cc24d42c7229b69747a154bdf357c58b8a65c66d7c19c8e4d114         d93be627cf66ed4f811209a75bc3477fspan区域254bdf357c58b8a65c66d7c19c8e4d114         e388a4556c0f65e1904146cc1a846bee这是一个段落194b3e26ee717c64999d7867364b1b4a3         1c10a5d70aec9f56ea5abb290ee967f3这是一个段落294b3e26ee717c64999d7867364b1b4a336cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

 

以上がCSSの実装方法とセレクターのサンプルコードを共有する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。