パート 1----CSS の基礎 第 1 章、CSS に必要な HTML HTML がシンプルであればあるほど、検索エンジンにとってよりフレンドリーになります div はブロックレベル要素であり、span はインライン要素です には、書籍の章など、関連するコンテンツのグループが含まれます には、紙の雑誌のサイドバーなど、その周囲のコンテンツに関連するコンテンツが含まれます 通常、著作権記述、法的情報、一部の Web サイトのナビゲーション リンクなど、Web ページの下部に配置される一部の情報。 タグは、重要なナビゲーション リンクを含めるために使用されます 図を説明するために使用されます IE8 以前のバージョンで HTML5 をサポートするには、html5shiv を使用できます。ただし、HTML5 タグを受け入れ、そのタグを適用する CSS を実装するだけで、ブラウザは HTML5 タグの機能を「理解」できません。 Web ページを確認してください W3C Web サイト (http://validator.w3.org/) Firefox (http: //chrispederick.com /work/web-developer)、拡張機能 http://users.skynet.be/mgueury/mozilla/ Chrome (http://bit.ly/SCONRY) Safari (www.zappatic. net/safaritidy) 複数の関連項目を含むリストの場合は、順序なしリストを使用します プロセスのステップを表す場合、または一連の項目の順序を定義する場合は、順序付きリストを使用します 用語とその用語集を作成します定義または説明、リストを定義するには 、説明を定義するには を使用します。長い段落には を使用します。引用符 書籍、ニュースレポート、ウェブサイトのタイトルを引用します ページの作成者の連絡先情報を特定して提供するために を使用します 適切な HTML タグがない場合、要素を識別したい場合は、 と を使用できます 注: を乱用しないでください。忘れずにタグを閉じてください DOCTYPE ドキュメント タイプは、ブラウザにどのようなヒントを与えることができますかブラウザが正しく説明できるように、この Web ページでは HTML のバージョンが使用されています。 HTML5 を使用するドキュメントの場合、宣言は次のとおりです: ログイン後にコピー HTML 4.01 Transitional や XHTML など、HTML または XHTML の古いバージョンの場合1.0 移行期、ドキュメント宣言は複雑です ログイン後にコピー メタ タグを追加すると、IE8 の無意味な奇妙な動作 (奇妙なモード、IE7 モードに入る) を停止させ、IE8 に最も標準的な互換モードを使用して Web ページを表示させることができます ログイン後にコピー 注: これは head タグ内、できれば title タグの下に配置する必要があります 第 2 章、スタイルとスタイルシートの作成 単純なスタイルには、いくつかの要素も含まれます: セレクター、宣言ブロック、宣言、プロパティ、値 注: 各属性と値のペアの後に必ずセミコロン (;) を追加してください。セミコロンを省略すると、スタイル シートが無効になります。 内部スタイルシート タグで囲まれ、</head> の前に配置されます。js がある場合は、js の前に配置され、js は </head> の前に配置されます。内部スタイル シートの場合は、開始 <style> タグのみが必要です。 HTML と ; の初期バージョンでは、複数のスタイルシートを外部スタイルシートに添付することはできません。 </p> <p class="sycode"> CSS を検証する </p> <h2> W3C: http://jigsaw.w3.org/css-validator </h2> <p class="sycode"> HTML を使用して外部スタイルシートをリンクする</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><style type="text/css"></pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p class="sycode"> CSS を使用して外部スタイルシートをリンクする<p class="sycode"> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><!-- HTML5： --><link rel="stylesheet" href="css/style.css"><!-- HTML4.01，需要增加type属性： --><link rel="stylesheet" type="text/css" href="css/style.css"><!-- XHTML，要有关闭标签： --><link rel="stylesheet" type="text/css" href="css/style.css" /></pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p class="sycode"> 注：应该将所有@import行放在所有CSS规则之前，web浏览器会忽略任何在CSS规则之后引入的样式表 </p> <h3>行内样式</h3> <p class="sycode"> 将样式放在HTML元素的style属性里面定义，这是非常不好的。 </p> 第3章，选择器：明确设置哪些样式 <h3>标签选择器：整体控制</h3> <p class="sycode"> 标签选择器也叫类型选择器、元素选择器，作用于HTML的元素 </p> <h3>类选择器：精确控制</h3> <p class="sycode"> 样式表中类名称命名规范 </p> <p class="sycode"> 1、所有类选择器的名称必须以一个圆点开头 </p> <p class="sycode"> 2、CSS只允许类名使用字母、数字、连字符(-)、下划线(_) </p> <p class="sycode"> 3、在圆点之后必须以字母开头 </p> <p class="sycode"> 4、类名称区分大小写 </p> <p class="sycode"> 注：在HTML中，作为类属性的一部分，不需要在类名前加一个点 </p> <h3>ID选择器：控制特殊的网页元素</h3> <h3>群组选择器</h3> <p class="sycode"> 为了使多个选择器成为一个群，只需要创建一个用逗号分隔的选择器列表即可。 </p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">h1,h2,h3{ color:#333;}</pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <h3>通用选择器（*）</h3> <p class="sycode"> *号是选择每一个标签的通用选择器标志 </p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">1 <html>2 <head>3 <title>A Simple Document</title>4 </head>5 <body>6 <h1>Header</h1>7 <p>A paragraph of <strong>important</strong>text.</p>8 </body>9 </html></pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p class="sycode"> <html>涵盖<head>,<body>标签，使<html>成为两者的祖宗。同样地，在另一个标签里面的标签就是派生标签 </p> <p class="sycode"> 将上述HTML代码转换成一张图： </p> <p class="sycode"> </p> <p class="sycode"> <strong>祖先标签：</strong>当HTML标签涵盖另一个标签时，HTML就成了该标签的祖先。<html>就是所有其他标签的祖先标签，<body>就是<h1>,<p>,<strong>的祖先标签 </p> <p class="sycode"> <strong>派生标签：</strong>处在一个或多个标签内部的标签就是派生标签。<body>是<html>的派生标签，<title>是<head>及<html>的派生标签 </p> <p class="sycode"> <strong>父标签：</strong>父标签是离另一个标签最近的祖先 </p> <p class="sycode"> <strong>子标签：</strong>直接被另一个标签包围的标签 </p> <p class="sycode"> <strong>同胞标签：</strong>同一个标签的子标签 </p> <h3>创建派生选择器</h3> <p class="sycode"> 多个选择器以空格隔开，类似群组选择器以逗号分开 </p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">h1 strong{color:#666} /* 表示只要出现h1里面的strong标签，字体都改成红色，其他地方的strong不变 *//*如果之间没有空格，表示的意义将完全不同：*/p.intro; /*这意味着：这个intro类必须专用于p标签(<p class="intro">)才有效。*/</pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <h2>伪类和伪元素</h2> <h3>给链接定义样式</h3> <p class="sycode"> a:link：指访问者还没有访问到、鼠标也尚未滑到过或单击过的所有链接 </p> <p class="sycode"> a:visited：指依据Web浏览器历史记录，访问者之前已经单击过的链接 </p> <p class="sycode"> a:hover：在访问者鼠标滑过链接时改变链接的展现效果 </p> <p class="sycode"> a:active：当访问者单击链接时的展现效果 </p> <p class="sycode"> 伪元素：:first-letter，:first-line </p> <p class="sycode"> CSS3修改了这些伪元素的语法。在CSS2.1中，伪类用一个冒号开头，像这样 :first-letter，CSS3在此基础上又加了一个冒号，以便于从伪元素中辨别出项:hover这样的伪类。 </p> <p class="sycode"> :focus：访问者执行某些动作时起作用。类似访问者单击网页文本框，将焦点放在了文本框上。只对处于焦点的元素起作用 </p> <p class="sycode"> :before：能在指定的元素前添加内容。 </p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><p class="tip"></pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">p.tip:before{ content:"HOT TIP!"}/* 会在遇到<p>标签中的tip类时，在段落前插入文本"HOT TIP" */</pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p class="sycode"> 用这个选择器添加文本的技术术语叫做“创造内容” </p> <p class="sycode"> :after：与:before一样，也会创造内容，不过是添加在元素后面。 </p> <p class="sycode"> 注：IE8+及其他主流浏览器都支持:before和:after选择器 </p> <p class="sycode"> 注：:before、:after与:first-letter、:first-line一样，都是伪元素，在CSS3中都必须使用::before、::after，但浏览器都支持单冒号版本，为此可以继续使用:before、:after </p> <p class="sycode"> ::selection：针对访问者已经在网页上选中的项目。该选择器只能设置color，background-color属性。没有单冒号版本 </p> <p class="sycode"> 注：这个选择器在IE9、Opera、Chrome、Safari都是有效的，但在IE8及Firefox中不行，不过可以通过添加厂商前缀，使Firefox支持它，例： <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">::-moz-selection{ color:#fff; background-color:#999;}</pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <h2>属性选择器</h2> <p class="sycode"> 类似img[title]，input[type="text"]，a[href^="http://"]等 </p> <h3>子选择器</h3> <p class="sycode"> 使用尖括号（>）。与派生选择器类似，用子选择器可以给另一个标签的子标签设置样式 </p> <p class="sycode"> 与派生选择器应用于同一个标签的所有派生标签不同，子选择器可以让你指定要的是哪个父标签的哪个子标签，亦即只会影响直接子元素，而不影响间接子元素。 </p> <h3>相邻同胞选择器</h3> <p class="sycode"> 使用加号（+）。只选择相邻的第一个子元素，h2+p只会选择h2标签之后的一个p标签 </p> <h3>通用的同胞组合选择器</h3> <p class="sycode"> 使用波浪线（~）。选择所有同胞子元素，h2~p会选择所有与h2同级的所有同胞p标签 </p> <p class="sycode"> :first-child：只选择和格式化该元素的第一个子元素 </p> </p> <p></p> <p class="sycode"> 如果要选择上图所示的第一个h1标签，可以创建类似选择器：h1:first-child（写在子元素上），问题在于，如果将div底下的h2改成 </p> <p class="sycode"> h1，那么这个h1也会被选中 </p> <p class="sycode"> :last-child与:first-child类似，只不过选择的是最后一个 </p> <p class="sycode"> 以上几个属性可以查看链接： HTML5与CSS3基础教程第八版学习笔记7~10章中的第九章，定义选择器与本章进行对比、参照 </p> <p class="sycode"> nth-child() </p> <p class="sycode"> 可以轻松对表格隔行进行设置不同样式： <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">tr:nth-child(odd) { background-color:#333; /* 对奇数行设置 */}tr:nth-child(even) { background-color:#666; /* 对偶数行设置 */}</pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p>还可以在一个系列中，从它的第二个子元素开始，每个两个子元素选择一个子元素。例：想在一个行中，从第二个表格单元开始，每三个表格单元（<td>标签）就高亮一次：</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">tr td:nth-child(3n + 2) { background-color:#900;}</pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p class="sycode"> 注：3n表示每三个元素，4n表示每四个元素，加号后面表示从第几个元素开始 </p> <p class="sycode"> 注：所有现代浏览器包括IE9及以上版本，都支持:last-child,:first-child,:nth-child()，但IE8不支持 </p> <h3>子类型选择器</h3> <p class="sycode"> :first-of-type：与:first-child类似。 </p> <p class="sycode"> :last-of-type：与last-child类似 </p> <p class="sycode"> 注：这些类型选择器必须是一个特殊标签的子标签，因此：p:first-of-type表示“一个段落标签的第一个子标签” </p> <p class="sycode"> :nth-of-type：与nth-child类似 </p> <h3>:not选择器</h3> <p class="sycode"> :not选择器也被称作否定伪类，可以选择不是其他东西的某件东西。 </p> </p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">p:not(.classy){ color:red;} /* 选择除了类为classy之外的所有段落 */</pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p class="sycode"> 1、用:not选择器只能使用简单选择器，img:not(.portrait)，li:not(:first-child)等 </p> <p class="sycode"> 2、不能使用派生选择器 </p> <p class="sycode"> 3、不能使用多个not选择器 </p> 第4章，用样式继承节省时间 <p class="sycode"> 可以查看链接： HTML5与CSS3基础教程第八版学习笔记7~10章第七章，CSS构造块进行对比、参照 </p> <p class="sycode"> 1、一般来说，影响网页元素位置的属性，或者页边距、背景颜色、元素的边框线等，都不会被继承 </p> <p class="sycode"> 2、Web浏览器用它们自己固有的样式为各种标签设置样式，当给网页上定义一种字号，并将它应用于<body>标签时，标题还是会大于段落文字等等。即，继承不会影响浏览器对于某些元素的內建样式。 </p> <p class="sycode"> 3、当样式发生冲突时，更具体的样式会胜出 </p> 第5章，用层叠管理多样式 <p class="sycode"> 如果一个标签本身没有设置任何样式，那么当继承来的属性发生任何冲突，离它最近的那个祖先标签就会胜出 </p> <p class="sycode"> 任何直接应用于指定标签的样式，都将胜出 </p> <h2>用权重值决定哪种样式胜出</h2> <p class="sycode"> 1、一个标签选择器值1分 </p> <p class="sycode"> 2、一个类选择器值10分 </p> <p class="sycode"> 3、一个ID选择器值100分 </p> <p class="sycode"> 4、一个內建样式值1000分 </p> <p class="sycode"> 注：计算权重值所涉及的算术实际上比这要复杂一些，但这个公式在大多数情况下都使用，欲了解Web浏览器实际上如何计算权重值，可登录以下网站： www.w3.org/TR/css3-selectors/#specificity </p> <p class="sycode"> 注：伪元素（如::first-line）通常被当作标签选择器对待，值1分，伪类（如:link）则被当作类对待，值10分。 </p> <p class="sycode"> 由于派生选择器由几个选择器组成，所以算术上会复杂些，权值是所有选择器值的总和 </p> <p class="sycode"> 注：继承来的属性没有权值 </p> <h2>权重值相同时，最后一个样式胜出</h2> <p class="sycode"> 若内部样式表和外部样式表发生冲突时，两种样式表在HTML中所处的位置就非常重要，若<style>标签在<link>标签之前，外部样式表将胜出。 </p> <p class="sycode"> 建议：最好先列出所有的外部样式表，并且当绝对需要在某一个网页中应用一个或多个样式表时，最好只使用一个内部样式表 </p> <h2>忽略权重值</h2> <p class="sycode"> 当一定、必须要确保某一个特定的属性不能被另一个更具体的样式覆盖时，就可以使用在需要保护的属性后面插入!important，可以避免被权重值更大的属性覆盖。 </p> <p class="sycode"> 注意：是对个别属性应用，而不是对整个样式。最后，当两个都有!important的样式冲突时，更具体的样式会胜出。 </p> <h2>选择性覆盖</h2> <p class="sycode"> 1、使用内部样式表，定义要覆盖的样式 </p> <p class="sycode"> 2、使用另一个外部样式表，定义要覆盖的样式，并在最后面引入 </p> <h2>避免权重战争</h2> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><div id="article"> <p>A paragraph</p> <p>Another paragraph</p> <p class="special">A Special paragraph</p></div></pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p>首先定义：</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">#article p{ color:red;} </pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p>如果要更改<p class="special">段落，则必须定义如下规则</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">#article .special{ color:blue;}</pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p class="sycode"> 冗长而没啥大用，当直接将<p class="special">复制到别的地方时，样式并不会改变 </p> <p class="sycode"> 若用类代替： <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">.article p{ color:red;}p.special{ color:blue;}</pre><div class="contentsignin">ログイン後にコピー</div></div> <p class="sycode"> 减少了冗余，并且将<p class="special">剪切到其他的地方，样式依然生效 </p> <p class="sycode"> 建议：尽量使用类选择器，避免使用id选择器 </p> <p class="sycode"> 关于为什么避免使用ID选择器的详细讨论： http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class </p> <p class="sycode"> CSS reset： http://meyerweb.com/eric/tools/css/reset </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p>
