CSS高级语法

2017/7/3 20:39:35admin0 阅读0 评论

<h2><span style=“color: #00ccff;”><strong>css引入方式</strong></span></h2>
内嵌式：(<span style=“color: #ff0000;”>写在标签里</span>)

<pre class=“line-numbers language-css”><code class=“language-css”>
<div style=“width: 100px; height: 100px; background: #ccc;”></div>
</code></pre>
内联式：(<span style=“color: #ff0000;”>写在style标签里</span>)

<pre class=“line-numbers language-css”><code class=“language-css”>
<style>
body{ background: #000; }
</style>
</code></pre>
外联式：(<span style=“color: #ff0000;”>常用</span>)

导入式：(<span style=“color: #ff0000;”>做了解</span>)

<pre class=“line-numbers language-css”><code class=“language-css”>
<style>
@import url();
</style>
</code></pre>

<h2><span style=“color: #00ccff;”><strong>选择器的分组</strong></span></h2>

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

<pre class=“line-numbers language-css”><code class=“language-css”>
h1,h2,h3,h4,h5,h6 {
color: green;
}
</code></pre>

<h2><span style=“color: #00ccff;”><strong>CSS 子对象选择符 Child Selectors</strong></span></h2>
语法：<span style=“color: #00ccff;”><strong>E1 > E2</strong></span>
<h2></h2>
<span style=“color: #ff0000;”>说明：</span>
选择所有作为E1子对象的E2。
目前IE5.5+尚不支持此种选择符。
<h3></h3>
示例：

<pre class=“line-numbers language-css”><code class=“language-css”>
body > p { font-size:14px; }
/* 所有作为body的子对象的p对象字体尺寸为14px */
div ul>li p { font-size:14px; }

</code></pre>

根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：

<pre class=“line-numbers language-css”><code class=“language-css”>
body {
font-family: Verdana, sans-serif;
}
</code></pre>

根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。

通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。
<h2><span style=“color: #00ccff;”><strong>CSS 层叠次序</strong></span></h2>
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中第四条规则（内联样式）拥有最高的优先权。
<ul>
<li style=“list-style: circle;”>浏览器缺省设置</li>
<li style=“list-style: circle;”> 外部样式表</li>
<li style=“list-style: circle;”>内部样式表（位于 <head> 标签内部）</li>
<li style=“list-style: circle;”>内联样式（在 HTML 元素内部）</li>

</ul>
<h2><span style=“color: #00ccff;”><strong>css选择器</strong></span></h2>
<ol>
<li>id类选择器 #name（<span style=“color: #ff0000;”>不常用</span>）</li>
<li>class类选择器 .name（<span style=“color: #ff0000;”>不常用</span>）</li>
<li>标签选择器（<span style=“color: #ff0000;”>不常用</span>）</li>
<li>混合类选择器（越详细优先级越高）（<span style=“color: #ff0000;”>常用</span>）</li>
</ol>

<div>
<h2><strong><span style=“color: #00ccff;”>css选择器权重与优先级规则</span></strong></h2>
<ol>
<li>第一等：代表内联样式，如: style=””，权值为1000。</li>
<li>第二等：代表ID选择器，如：#content，权值为100。</li>
<li>第三等：代表类，伪类和属性选择器，如.content，权值为10。</li>
<li>第四等：代表类型选择器和伪元素选择器，如div p，权值为1。</li>
</ol>