CSS类选择器 ·类选择器以一个点号显示 ..center {text-align:center} <h1 class="center">This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
• 类选择器以一个点号显示 • .center {text-align: center} <h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p> CSS 类选择器
id选择器Or类选择器 ·class和id看起来除了一个.和#的区别之外，别 无差异？？ ·同一id在一个页面内只能应用一次 ·class则是用于描述多次出现的元素
•class和id看起来除了一个.和#的区别之外，别 无差异？？ •同一id在一个页面内只能应用一次 •class则是用于描述多次出现的元素。 id选择器 or 类选择器
CSS派生选择器 。通过依据元素在其位置的上下文关系来定义样式。 listrong font-style:italic;font-weight:normal;} <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以 这个规则对我不起作用</strong><p><ol> <li><strong>:我是斜体字。这是因为strong元素位于i元素内。 </strong></li> <>我是正常的字体。<心 只要strong标签在Ii标签内部就会起作用， </ol> 不需要紧挨着。 ,id选择器和派生选择器结合 #sidebar p font-style:italic;text-align:right;margin-top:0.5em; div#sidebar border:1px dotted #000;padding:10px;
• 通过依据元素在其位置的上下文关系来定义样式。 • li strong { font-style: italic; font-weight: normal; } <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以 这个规则对我不起作用</strong></p> <ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。 </strong></li> <li>我是正常的字体。</li> </ol> CSS 派生选择器 只要strong标签在li标签内部就会起作用， 不需要紧挨着。 id 选择器和派生选择器 结合 #sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; } div#sidebar { border: 1px dotted #000; padding: 10px; }
CSS属性选择器 ·对带有指定属性的HTML元素设置样式 •格式 .[title]{color:red;} 单纯的属性选择 ·[title=FirstLevel]{border::5 ox solid blue;}属性值选择 .[title-=hello]{color:red; 属性多值选择空格分隔 [langl=en]{color:red; 属性多值选择连字符分隔 Demo
•对带有指定属性的 HTML 元素设置样式 •格式 • [title] { color:red; } 单纯的属性选择 • [title=FirstLevel] { border:5px solid blue; } 属性值选择 • [title~=hello] { color:red; } 属性多值选择-空格分隔 • [lang|=en] { color:red; } 属性多值选择-连字符分隔 CSS 属性选择器 Demo
CSS创建的三种方式 》外部样式表 HTML:<head><link rel="stylesheet"type="text/css"href="mystyle.css"/> </head> CSS:hr {color:sienna;} p[margin-left:2opx;} body [background-image: url("images/back40.gif"); 》内部样式表 <head><style type="text/css">hr [color:sienna;p{margin-left:2opx; body [background-image:url("images/back40.gif");}</style></head> 》内联样式 <p style="color:sienna;margin-left:2opx">This is a paragraph </p> 等级覆盖关系
外部样式表 HTML: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> CSS: hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} 内部样式表 <head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head> 内联样式 <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> CSS创建的三种方式 等级覆盖关系