CSS笔记

布满荆棘的人生 2022-06-10 07:36 195阅读 0赞

# CSS笔记 #

## 用法 ##

### 外部样式表 ###

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

### 内部样式表 ###

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过`<style>`标签定义内部样式表。

<head>
        <style type="text/css"> body { background-color: red} p { margin-left: 20px} </style>
    </head>

### 内联样式 ###

当特殊的样式需要应用到个别元素时，就可以使用内联样式。

使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
    This is a paragraph
    </p>

## 长度单位 ##

### **相对长度单位** ###

<table> 
 <thead> 
  <tr> 
   <th>单位</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>em</td> 
   <td>元素字体的高度，相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。</td> 
  </tr> 
  <tr> 
   <td>ex</td> 
   <td>字母“x”的高度。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。</td> 
  </tr> 
  <tr> 
   <td>rem</td> 
   <td>根元素（html）的字体大小。</td> 
  </tr> 
  <tr> 
   <td>px</td> 
   <td>像素(1px = 1/96th of 1in)。像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。</td> 
  </tr> 
  <tr> 
   <td>%</td> 
   <td>百分比。</td> 
  </tr> 
  <tr> 
   <td>vw</td> 
   <td>CSS3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话，那1 vw = 1200px/100 = 12 px</td> 
  </tr> 
  <tr> 
   <td>vh</td> 
   <td>css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话，那1 vh = 1200px/100 = 12 px</td> 
  </tr> 
  <tr> 
   <td>vmin</td> 
   <td>css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm。如浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。</td> 
  </tr> 
  <tr> 
   <td>vmax</td> 
   <td>css3新单位，相对于视口的宽度或高度中较大的那个。</td> 
  </tr> 
 </tbody> 
</table>

### **绝对长度单位** ###

<table> 
 <thead> 
  <tr> 
   <th>单位</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>in</td> 
   <td>英寸(1 英寸 = 2.54 厘米)</td> 
  </tr> 
  <tr> 
   <td>cm</td> 
   <td>厘米</td> 
  </tr> 
  <tr> 
   <td>mm</td> 
   <td>毫米</td> 
  </tr> 
  <tr> 
   <td>pt</td> 
   <td>磅(1 磅 = 1/72 英寸)。点（Point）</td> 
  </tr> 
  <tr> 
   <td>pc</td> 
   <td>皮卡(1 皮卡 = 12 磅)</td> 
  </tr> 
 </tbody> 
</table>

*注： 1in = 2.54cm = 25.4 mm = 72pt = 6pc*

### **px、em、rem区别** ###

*  px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

特点：

1.  IE无法调整那些使用px作为单位的字体大小；
2.  国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3.  Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

*  em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

特点：

1.  em的值并不是固定的；
2.  em会继承父级元素的字体大小。

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px\*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

所以我们在写CSS的时候，需要注意三点：

1.  body选择器中声明Font-size=62.5%；
2.  将你的原来的px数值除以10，然后换上em作为单位；
3.  重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 \* 1.2= 1.44的现象。比如说你在\#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承\#content的字体高而变为了1em=12px。

*  rem

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

`p {font-size:14px; font-size:.875rem;}`

rem的计算:

1rem=屏幕宽度\*屏幕分辨率/10=屏幕宽度的10%

或

1rem=屏幕宽度/设计稿屏幕宽度\*10

注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

**px 与 rem 的选择**

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。  
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

### **vw、vh 与 % 百分比的区别** ###

（1）**%** 是相对于父元素的大小设定的比率，**vw**、**vh** 是视窗大小决定的。

（2）**vw**、**vh** 优势在于能够直接获取高度，而用 **%** 在没有设置 **body** 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

### **vmin、vmax 用处** ###

做移动页面开发时，如果使用 **vw**、**vh** 设置字体大小（比如 **5vw**），在竖屏和横屏状态下显示的字体大小是不一样的。

由于 **vmin** 和 **vmax** 是当前较小的 **vw** 和 **vh** 和当前较大的 **vw** 和 **vh**。这里就可以用到 **vmin** 和 **vmax**。使得文字大小在横竖屏下保持一致。

## CSS 选择器 ##

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>示例</th> 
   <th>示例说明</th> 
   <th>CSS</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-class.html" rel="nofollow">.<em>class</em></a></td> 
   <td>.intro</td> 
   <td>选择所有class="intro"的元素</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-id.html" rel="nofollow">#<em>id</em></a></td> 
   <td>#firstname</td> 
   <td>选择所有id="firstname"的元素</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-all.html" rel="nofollow">*</a></td> 
   <td>*</td> 
   <td>选择所有元素</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><em><a href="http://www.runoob.com/cssref/sel-element.html" rel="nofollow">element</a></em></td> 
   <td>p</td> 
   <td>选择所有<code>&lt;p&gt;</code>元素</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><em><a href="http://www.runoob.com/cssref/sel-element-comma.html" rel="nofollow">element,element</a></em></td> 
   <td>div,p</td> 
   <td>选择所有<code>&lt;div&gt;</code>元素和<code>&lt;p&gt;</code>元素</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-element-element.html" rel="nofollow"><em>element</em> <em>element</em></a></td> 
   <td>div p</td> 
   <td>选择<code>&lt;div&gt;</code>元素内的所有<code>&lt;p&gt;</code>元素</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-element-gt.html" rel="nofollow"><em>element</em>&gt;<em>element</em></a></td> 
   <td>div&gt;p</td> 
   <td>选择所有父级是 <code>&lt;div&gt;</code> 元素的 <code>&lt;p&gt;</code> 元素</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-element-pluss.html" rel="nofollow"><em>element</em>+<em>element</em></a></td> 
   <td>div+p</td> 
   <td>选择所有紧接着<code>&lt;div&gt;</code>元素之后的<code>&lt;p&gt;</code>元素</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-attribute.html" rel="nofollow">[<em>attribute</em>]</a></td> 
   <td>[target]</td> 
   <td>选择所有带有target属性元素</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-attribute-value.html" rel="nofollow">[<em>attribute</em>=<em>value</em>]</a></td> 
   <td>[target=-blank]</td> 
   <td>选择所有使用target="-blank"的元素</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-attribute-value-contains.html" rel="nofollow">[<em>attribute</em>~=<em>value</em>]</a></td> 
   <td>[title~=flower]</td> 
   <td>选择标题属性包含单词"flower"的所有元素</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-attribute-value-lang.html" rel="nofollow">[<em>attribute</em>|=<em>language</em>]</a></td> 
   <td>[lang|=en]</td> 
   <td>选择一个lang属性的起始值="EN"的所有元素</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-link.html" rel="nofollow">:link</a></td> 
   <td>a:link</td> 
   <td>选择所有未访问链接</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-visited.html" rel="nofollow">:visited</a></td> 
   <td>a:visited</td> 
   <td>选择所有访问过的链接</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-active.html" rel="nofollow">:active</a></td> 
   <td>a:active</td> 
   <td>选择活动链接</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-hover.html" rel="nofollow">:hover</a></td> 
   <td>a:hover</td> 
   <td>选择鼠标在链接上面时</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-focus.html" rel="nofollow">:focus</a></td> 
   <td>input:focus</td> 
   <td>选择具有焦点的输入元素</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-firstletter.html" rel="nofollow">:first-letter</a></td> 
   <td>p:first-letter</td> 
   <td>选择每一个<code>&lt;p&gt;</code>元素的第一个字母</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-firstline.html" rel="nofollow">:first-line</a></td> 
   <td>p:first-line</td> 
   <td>选择每一个<code>&lt;p&gt;</code>元素的第一行</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-firstchild.html" rel="nofollow">:first-child</a></td> 
   <td>p:first-child</td> 
   <td>指定只有当<code>&lt;p&gt;</code>元素是其父级的第一个子级的样式。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-before.html" rel="nofollow">:before</a></td> 
   <td>p:before</td> 
   <td>在每个<code>&lt;p&gt;</code>元素之前插入内容</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-after.html" rel="nofollow">:after</a></td> 
   <td>p:after</td> 
   <td>在每个<code>&lt;p&gt;</code>元素之后插入内容</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-lang.html" rel="nofollow">:lang(<em>language</em>)</a></td> 
   <td>p:lang(it)</td> 
   <td>选择一个lang属性的起始值="it"的所有<code>&lt;p&gt;</code>元素</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-gen-sibling.html" rel="nofollow"><em>element1</em> ~ <em>element2</em></a></td> 
   <td>p~ul</td> 
   <td>选择p元素之后的每一个ul元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-attr-begin.html" rel="nofollow">[<em>attribute</em>^=<em>value</em>]</a></td> 
   <td>a[src^=“https”]</td> 
   <td>选择每一个src属性的值以"https"开头的元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-attr-end.html" rel="nofollow">[<em>attribute</em>$=<em>value</em>]</a></td> 
   <td>a[src$=".pdf"]</td> 
   <td>选择每一个src属性的值以".pdf"结尾的元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-attr-contain.html" rel="nofollow">[<em>attribute</em>*=<em>value</em>]</a></td> 
   <td>a[src*=“runoob”]</td> 
   <td>选择每一个src属性的值包含子字符串"runoob"的元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-first-of-type.html" rel="nofollow">:first-of-type</a></td> 
   <td>p:first-of-type</td> 
   <td>选择每个p元素是其父级的第一个p元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-last-of-type.html" rel="nofollow">:last-of-type</a></td> 
   <td>p:last-of-type</td> 
   <td>选择每个p元素是其父级的最后一个p元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-only-of-type.html" rel="nofollow">:only-of-type</a></td> 
   <td>p:only-of-type</td> 
   <td>选择每个p元素是其父级的唯一p元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-only-child.html" rel="nofollow">:only-child</a></td> 
   <td>p:only-child</td> 
   <td>选择每个p元素是其父级的唯一子元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-nth-child.html" rel="nofollow">:nth-child(<em>n</em>)</a></td> 
   <td>p:nth-child(2)</td> 
   <td>选择每个p元素是其父级的第二个子元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-nth-last-child.html" rel="nofollow">:nth-last-child(<em>n</em>)</a></td> 
   <td>p:nth-last-child(2)</td> 
   <td>选择每个p元素的是其父级的第二个子元素，从最后一个子项计数</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-nth-of-type.html" rel="nofollow">:nth-of-type(<em>n</em>)</a></td> 
   <td>p:nth-of-type(2)</td> 
   <td>选择每个p元素是其父级的第二个p元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-nth-last-of-type.html" rel="nofollow">:nth-last-of-type(<em>n</em>)</a></td> 
   <td>p:nth-last-of-type(2)</td> 
   <td>选择每个p元素的是其父级的第二个p元素，从最后一个子项计数</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-last-child.html" rel="nofollow">:last-child</a></td> 
   <td>p:last-child</td> 
   <td>选择每个p元素是其父级的最后一个子级。</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-root.html" rel="nofollow">:root</a></td> 
   <td>:root</td> 
   <td>选择文档的根元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-empty.html" rel="nofollow">:empty</a></td> 
   <td>p:empty</td> 
   <td>选择每个没有任何子级的p元素（包括文本节点）</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-target.html" rel="nofollow">:target</a></td> 
   <td>#news:target</td> 
   <td>选择当前活动的#news元素（包含该锚名称的点击的URL）</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-enabled.html" rel="nofollow">:enabled</a></td> 
   <td>input:enabled</td> 
   <td>选择每一个已启用的输入元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-disabled.html" rel="nofollow">:disabled</a></td> 
   <td>input:disabled</td> 
   <td>选择每一个禁用的输入元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-checked.html" rel="nofollow">:checked</a></td> 
   <td>input:checked</td> 
   <td>选择每个选中的输入元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-not.html" rel="nofollow">:not(<em>selector</em>)</a></td> 
   <td>:not§</td> 
   <td>选择每个并非p元素的元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-selection.html" rel="nofollow">::selection</a></td> 
   <td>::selection</td> 
   <td>匹配元素中被用户选中或处于高亮状态的部分</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-out-of-range.html" rel="nofollow">:out-of-range</a></td> 
   <td>:out-of-range</td> 
   <td>匹配值在指定区间之外的input元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-in-range.html" rel="nofollow">:in-range</a></td> 
   <td>:in-range</td> 
   <td>匹配值在指定区间之内的input元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-read-write.html" rel="nofollow">:read-write</a></td> 
   <td>:read-write</td> 
   <td>用于匹配可读及可写的元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-read-only.html" rel="nofollow">:read-only</a></td> 
   <td>:read-only</td> 
   <td>用于匹配设置 “readonly”（只读） 属性的元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-optional.html" rel="nofollow">:optional</a></td> 
   <td>:optional</td> 
   <td>用于匹配可选的输入元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-required.html" rel="nofollow">:required</a></td> 
   <td>:required</td> 
   <td>用于匹配设置了 “required” 属性的元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-valid.html" rel="nofollow">:valid</a></td> 
   <td>:valid</td> 
   <td>用于匹配输入值为合法的元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/sel-invalid.html" rel="nofollow">:invalid</a></td> 
   <td>:invalid</td> 
   <td>用于匹配输入值为非法的元素</td> 
   <td>3</td> 
  </tr> 
 </tbody> 
</table>

### 伪类和伪元素 ###

伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。

伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。

**伪类或伪元素规则的形式如：**

*  选择符:伪类 \{ 属性: 值 \}
 *  选择符:伪元素 \{ 属性: 值 \}

伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下:

`选择符.类: 伪类 { 属性: 值 }` 或 `选择符.类: 伪元素 { 属性: 值 }`

**常用伪类**

a:link { color: #FF0000; text-decoration: none}      /* 未访问的链接 */
    a:visited { color: #00FF00; text-decoration: none}   /* 已访问的链接 */
    a:hover { color: #FF00FF; text-decoration: underline}  /* 鼠标在链接上 */
    a:active { color: #0000FF; text-decoration: underline}  /* 激活链接 */

当为链接的不同状态设置样式时，请按照以下次序规则：

*  a:hover 必须位于 a:link 和 a:visited 之后
 *  a:active 必须位于 a:hover 之后

**首行伪元素**

通常在报纸上的文章，例如Wall Street Journal中的，文本的首行都会以粗印体而且全部大写地展示。

`P:first-line { font-weight: bold }`

**首个字母伪元素**

首个字母伪元素用于加大(drop caps)和其他效果。含有已指定值选择符的文本的首个字母会按照指定的值展示。一个首个字母伪元素可以用于任何块级元素。例如:

`P:first-letter { font-size: 300%; float: left }`

### CSS选择器优先级及!important属性 ###

参考自 [CSS选择器优先级及!important属性][CSS_important]

*选择器优先级：ID>class>元素选择器*

1.  id选择器默认优先级最高，其权值为100
2.  class选择器、属性选择器和伪类选择器的权值为10
3.  标签选择器的优先级较低，其权值为1

在比较样式的优先级时，只需统计选择符中的id、class、标签名个数，然后把对应的权值相加即可。根据结果便可得出优先级高低。

1.  结果较大的优先级较高
2.  结果相同，则后定义的样式优先级较高
3.  如果样式值中含有!important，则该值优先级最高

!important是用来使IE6和IE7、IE8、火狐(Firefox)、google等浏览器做兼容的，但IE6不能执行!important。当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪个位置. 尽管如此, !important规则还是与优先级毫无关系.使用 !important不是一个好习惯，因为它改变了你样式表本来的级联规则，从而难以调试。

在使用!important时需要注意：

*  Never 永远不要在全站范围的 css 上使用 !important
 *  Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者YUI ）的特定页面中使用 !important
 *  Never 永远不要在你的插件中使用 !important
 *  Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important

## CSS 样式 ##

### 列表(List) 属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>功能</th> 
   <th>属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>list-style</td> 
   <td>在一个声明中设置所有的列表属性。</td> 
   <td><em>initial</em> : 将这个属性设置为默认值。<br> <em>inherit</em> : 规定应该从父元素继承 list-style 属性的值。</td> 
  </tr> 
  <tr> 
   <td>list-style-image</td> 
   <td>将图象设置为列表项标记</td> 
   <td><em>URL</em> ： 图像的路径。<br> none : 默认。无图形被显示。</td> 
  </tr> 
  <tr> 
   <td>list-style-position</td> 
   <td>设置列表项标记的放置位置</td> 
   <td>inside : 列表项目标记放置在文本以内，且环绕文本根据标记对齐。<br> outside : 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。</td> 
  </tr> 
  <tr> 
   <td>list-style-type</td> 
   <td>设置列表项标记的类型</td> 
   <td>none : 无标记。<br> disc : 默认。标记是实心圆。 <br> circle : 标记是空心圆。 <br> square : 标记是实心方块。 <br> decimal : 标记是数字。 <br> decimal-leading-zero : 0开头的数字标记。(01, 02, 03, 等) <br> lower-roman : 小写罗马数字(i, ii, iii, iv, v, 等) <br> upper-roman : 大写罗马数字(I, II, III, IV, V, 等) <br> lower-alpha : 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等) <br> upper-alpha : 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等) <br> lower-greek : 小写希腊字母(alpha, beta, gamma, 等) <br> lower-latin : 小写拉丁字母(a, b, c, d, e, 等) <br> upper-latin : 大写拉丁字母(A, B, C, D, E, 等)</td> 
  </tr> 
 </tbody> 
</table>

### 定位（Positioning） 属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/pr-class-display.html" rel="nofollow">display</a></td> 
   <td>规定元素应该生成的框的类型</td> 
   <td>none : 此元素不会被显示。<br> block : 此元素将显示为块级元素，此元素前后会带有换行符。 <br> inline : 默认。此元素会被显示为内联元素，元素前后没有换行符。<br> inline-block : 行内块元素。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/pr-pos-overflow.html" rel="nofollow">overflow</a></td> 
   <td>规定当内容溢出元素框时发生的事情</td> 
   <td>visible : 默认值。内容不会被修剪，会呈现在元素框之外。<br> hidden : 内容会被修剪，并且其余内容是不可见的。 <br> scroll : 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。<br> auto : 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/pr-class-position.html" rel="nofollow">position</a></td> 
   <td>规定元素的定位类型</td> 
   <td>absolute : 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。<br> fixed : 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。<br> relative : 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。<br> static : 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/pr-class-visibility.html" rel="nofollow">visibility</a></td> 
   <td>规定元素是否可见</td> 
   <td>visible : 默认值。元素是可见的。<br> hidden : 元素是不可见的。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/pr-pos-z-index.html" rel="nofollow">z-index</a></td> 
   <td>设置元素的堆叠顺序</td> 
   <td>auto : 默认。堆叠顺序与父元素相等。 <br> <em>number</em> : 设置元素的堆叠顺序。</td> 
  </tr> 
 </tbody> 
</table>

position 属性值的含义：

*  static  
    元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
 *  relative  
    元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
 *  absolute  
    元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
 *  fixed  
    元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

### 文本（Text） 属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>letter-spacing</td> 
   <td>设置字符间距</td> 
   <td><em>length</em></td> 
  </tr> 
  <tr> 
   <td>text-decoration</td> 
   <td>规定添加到文本的装饰效果</td> 
   <td>underline : 定义文本下的一条线。 <br> overline : 定义文本上的一条线。<br> line-through : 定义穿过文本下的一条线。 <br> blink : 定义闪烁的文本。</td> 
  </tr> 
  <tr> 
   <td>text-indent</td> 
   <td>规定文本块首行的缩进</td> 
   <td><em>length</em></td> 
  </tr> 
  <tr> 
   <td>text-transform</td> 
   <td>控制文本的大小写</td> 
   <td>capitalize : 文本中的每个单词以大写字母开头。<br> uppercase : 定义仅有大写字母。<br> lowercase : 定义无大写字母，仅有小写字母。</td> 
  </tr> 
  <tr> 
   <td>vertical-align</td> 
   <td>设置元素的垂直对齐方式</td> 
   <td>baseline : 默认。元素放置在父元素的基线上。<br> sub : 垂直对齐文本的下标。<br> super : 垂直对齐文本的上标 <br> top : 把元素的顶端与行中最高元素的顶端对齐 <br> text-top : 把元素的顶端与父元素字体的顶端对齐 <br> middle : 把此元素放置在父元素的中部。 <br> bottom : 把元素的顶端与行中最低的元素的顶端对齐。<br> text-bottom : 把元素的底端与父元素字体的底端对齐。 <br> <em>length</em> <br> % : 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。</td> 
  </tr> 
  <tr> 
   <td>white-space</td> 
   <td>设置元素中空白的处理方式</td> 
   <td>normal : 默认。空白会被浏览器忽略。<br> pre : 空白会被浏览器保留。其行为方式类似 HTML 中的 <code>&lt;pre&gt;</code> 标签。<br> nowrap : 文本不会换行，文本会在在同一行上继续，直到遇到 <code>&lt;br&gt;</code> 标签为止。<br> pre-wrap : 保留空白符序列，但是正常地进行换行。<br> pre-line : 合并空白符序列，但是保留换行符。</td> 
  </tr> 
  <tr> 
   <td>word-spacing</td> 
   <td>设置单词间距</td> 
   <td><em>length</em></td> 
  </tr> 
  <tr> 
   <td>text-overflow</td> 
   <td>指定当文本溢出包含的元素，应该发生什么</td> 
   <td>clip : 修剪文本。<br> ellipsis : 显示省略符号来代表被修剪的文本。<br> string : 使用给定的字符串来代表被修剪的文本。</td> 
  </tr> 
  <tr> 
   <td>word-break</td> 
   <td>指定非CJK（中日韩）文字的断行规则</td> 
   <td>normal : 使用浏览器默认的换行规则。 <br> break-all : 允许在单词内换行。<br> keep-all : 只能在半角空格或连字符处换行。<br> word-wrap : 设置浏览器是否对过长的单词进行换行。<br> normal : 只在允许的断字点换行（浏览器保持默认处理）。<br> break-word : 在长单词或 URL 地址内部进行换行。</td> 
  </tr> 
 </tbody> 
</table>

下面的表格总结了 white-space 属性的行为：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>空白符</th> 
   <th>换行符</th> 
   <th>自动换行</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pre-line</td> 
   <td>合并</td> 
   <td>保留</td> 
   <td>允许</td> 
  </tr> 
  <tr> 
   <td>normal</td> 
   <td>合并</td> 
   <td>忽略</td> 
   <td>允许</td> 
  </tr> 
  <tr> 
   <td>nowrap</td> 
   <td>合并</td> 
   <td>忽略</td> 
   <td>不允许</td> 
  </tr> 
  <tr> 
   <td>pre</td> 
   <td>保留</td> 
   <td>保留</td> 
   <td>不允许</td> 
  </tr> 
  <tr> 
   <td>pre-wrap</td> 
   <td>保留</td> 
   <td>保留</td> 
   <td>允许</td> 
  </tr> 
 </tbody> 
</table>

实现文本内容超过div宽度的部分用省略号显示的css设置：

{ 
        overflow:hidden;//溢出隐藏
        white-space:nowrap;//不换行
        text-overflow: ellipsis;//当文本溢出包含的元素，显示省略符号来代表被修剪的文本。
    }

### 背景（Background） 属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/pr-background-attachment.html" rel="nofollow">background-attachment</a></td> 
   <td>设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。</td> 
   <td>scroll : 背景图片随页面的其余部分滚动。这是默认 <br> fixed : 背景图像是固定的</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/pr-background-color.html" rel="nofollow">background-color</a></td> 
   <td>设置或检索对象的背景颜色。</td> 
   <td><em>color</em> : 指定背景颜色。<br> transparent : 指定背景颜色应该是透明的。这是默认</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/pr-background-image.html" rel="nofollow">background-image</a></td> 
   <td>设置或检索对象的背景图像。<br> 元素的背景是元素的总大小，包括填充和边界（但不包括边距）。<br> 默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。</td> 
   <td>url(<em>‘URL’</em>) : 图像的URL <br> none : 无图像背景会显示。这是默认</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/pr-background-position.html" rel="nofollow">background-position</a></td> 
   <td>设置或检索对象的背景图像位置。必须先指定background-image属性。</td> 
   <td><em>x% y%</em> : 第一个值是水平位置，第二个值是垂直。左上角是0％ 0％。右下角是100％ 100％。如果仅指定了一个值，其他值将是50％。默认值为：0％0％ <br> <em>xpos ypos</em> : 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions <br> left|center|right top|center|bottom : 如果仅指定一个关键字，其他值将会是"center"</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/pr-background-repeat.html" rel="nofollow">background-repeat</a></td> 
   <td>设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。</td> 
   <td>repeat : 背景图像将向垂直和水平方向重复。这是默认 <br> repeat-x : 只有水平位置会重复背景图像 <br> repeat-y : 只有垂直位置会重复背景图像 <br> no-repeat : background-image不会重复</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/css3-pr-background-size.html" rel="nofollow">background-size</a></td> 
   <td>检索或设置对象的背景图像的尺寸大小。</td> 
   <td>length : 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"atuo(自动)" <br> percentage : 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)" <br> cover : 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 <br> contain : 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。</td> 
  </tr> 
 </tbody> 
</table>

### 透明度 ###

语法：

`{FILTER：ALPHA (opacity=opacity，finishopacity=finishopacity，style=style，startx=startx，starty=starty，finishx=finishx，finishy=finishy)}`

参数：

*  opacity：代表图像的起始透明度，其默认的数值是从0到100，0代表完全透明，100代表完全不透明；
 *  finishOpacity：是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度，作用范围也是0到100；
 *  style：表示透明区域的形状特征，其中“0”代表统一形状，“1”代表线形。“2”代表放射状，“3”代表矩形；
 *  startx：表示渐变透明效果开始处的X坐标，
 *  starty：代表渐变透明效果开始处的Y坐标，
 *  finishx：代表渐变透明效果结束处的X坐标，
 *  finishy：表示渐变透明效果结束处的Y坐标。

img { 
      opacity:0.4;
      filter:alpha(opacity=40); /* IE8 及其更早版本 */
    }

IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。

IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。

### 多列(Multi-column) 属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/css3-pr-column-count.html" rel="nofollow">column-count</a></td> 
   <td>指定元素应该分为的列数</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/css3-pr-column-fill.html" rel="nofollow">column-fill</a></td> 
   <td>指定如何填充列</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/css3-pr-column-gap.html" rel="nofollow">column-gap</a></td> 
   <td>指定列之间的差距</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/css3-pr-column-rule.html" rel="nofollow">column-rule</a></td> 
   <td>对于设置所有column-rule-*属性的简写属性</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/css3-pr-column-rule-color.html" rel="nofollow">column-rule-color</a></td> 
   <td>指定列之间的颜色规则</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/css3-pr-column-rule-style.html" rel="nofollow">column-rule-style</a></td> 
   <td>指定列之间的样式规则</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/css3-pr-column-rule-width.html" rel="nofollow">column-rule-width</a></td> 
   <td>指定列之间的宽度规则</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/css3-pr-column-span.html" rel="nofollow">column-span</a></td> 
   <td>指定元素应该跨越多少列</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/css3-pr-column-width.html" rel="nofollow">column-width</a></td> 
   <td>指定列的宽度</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/cssref/css3-pr-columns.html" rel="nofollow">columns</a></td> 
   <td>缩写属性设置列宽和列数</td> 
  </tr> 
 </tbody> 
</table>

### transform ###

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

2D 转换方法：

*  translate()  
    通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

div
    { 
    transform: translate(50px,100px);
    -ms-transform: translate(50px,100px);    /* IE 9 */
    -webkit-transform: translate(50px,100px);    /* Safari and Chrome */
    -o-transform: translate(50px,100px);    /* Opera */
    -moz-transform: translate(50px,100px);    /* Firefox */
    }

*  rotate()  
    通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

div
    { 
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);    /* IE 9 */
    -webkit-transform: rotate(30deg);    /* Safari and Chrome */
    -o-transform: rotate(30deg);    /* Opera */
    -moz-transform: rotate(30deg);    /* Firefox */
    }

*  scale()  
    通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：`transform: scale(2,4);`
 *  skew()  
    通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：transform: `skew(30deg,20deg);`
 *  matrix()  
    matrix() 方法把所有 2D 转换方法组合在一起。  
    matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。  
    `transform:matrix(0.866,0.5,-0.5,0.866,0,0);`

## 盒子模型和边距设置规则 ##

![这里写图片描述][9bea4016d10d0c1cc066efd1910d754a.png]

CSS 定义了一些规则，允许为边距指定少于 4 个值。规则如下：

*  如果缺少左边距的值，则使用右边距的值。
 *  如果缺少下边距的值，则使用上边距的值。
 *  如果缺少右边距的值，则使用上边距的值。

下图提供了更直观的方法来了解这一点：

![这里写图片描述][b86eeadd438257b931cfa8b6c4670d16.png]

**外边距合并**指的是，当两个垂直外边距相遇时，它们将形成一个外边距。**合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。**

## @media 规则 ##

要实现响应式需要在`<head>`中添加

`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

**CSS 语法**

@media mediatype and|not|only (media feature) { 
        CSS-Code;
    }

你也可以针对不同的媒体使用不同 stylesheets :

如果浏览器窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) { 
        body { 
            background-color: lightblue;
        }
    }

**device-height**:定义输出设备的屏幕可见高度。

**device-width**:定义输出设备的屏幕可见宽度。

**方向：横屏/竖屏**

结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

语法：

`orientation：portrait | landscape`

*  portrait：指定输出设备中的页面可见区域高度大于或等于宽度
 *  landscape： 除portrait值情况外，都是landscape

如果是竖屏背景将是浅蓝色：

@media only screen and (orientation: landscape) { 
        body { 
            background-color: lightblue;
        }
    }

## CSS精灵图 ##

CSS精灵图是把一系列图片放到一张图上。这样可以减少请求数因而网页加载更快。CSS会把每个图标移动到正确位置。但是精灵图的缺点就是图片大小是固定的，被拉伸后可能会失真。

[使用gulp生成sprites图片和样式表][gulp_sprites]

[CSS_important]: http://blog.csdn.net/lzgs_4/article/details/43446303
[9bea4016d10d0c1cc066efd1910d754a.png]: /images/20220610/47726b8cef724e9696e7b2a14faf9359.png
[b86eeadd438257b931cfa8b6c4670d16.png]: /images/20220610/03f91e8f7252489f9a7c55050cfa06c8.png
[gulp_sprites]: https://www.w3ctrain.com/2015/12/09/generating-sprites-with-gulp/