css

2019-03-15 本文已影响0人 Cyuu

CSS知识分享

CSS

一、基础语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

多重声明：

样式1：
    p {text-align:center; color:red;}

样式2：
    p {
        text-align: center;
        color: black;
        font-family: arial;
    }

注释：

/*这是个注释*/<br/>
p{
    text-align:center;<br/>
    /*这是另一个注释*/<br/>
    color:black;
    font-family:arial;
}

二、选择器

1.分组选择器

h1,h2,h3,h4,h5,h6 {color: green;}

2.派生选择器(根据文档的上下文关系来确定某个标签的样式)

li strong {
    font-style: italic;
    font-weight: normal;
}
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>

3.id选择器

#red {color:red;}
#green {color:green;}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

id选择器和派生选择器并用

#id p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
}

4.class选择器

.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>

class和派生选择器：

.class td {
    color: #f60;
    background: #666;
}

5.属性选择器--对带有指定属性的 HTML 元素设置样式

注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

1.选择带有title属性
[title]
{
    color:red;
}

2.title属性值包含hello


[title~=hello] 
{ 
    color:red; 
}

三、CSS样式

1.背景

背景色：

p {background-color: gray;}

背景图片

body
{ 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center; 图片位置
}

2.文本

文本装饰

text-decoration 有 5 个值：
•none
•underline
•overline
•line-through
•blink
<a style="text-decoration:underline;">下划线</a>
<a style="text-decoration:overline;">上划线</a>
<a style="text-decoration:line-through;">中划线</a>

3.表格

下面的例子为 table、th 以及 td 设置了蓝色边框：

table, th, td
{
    border: 1px solid blue;
}

代码：
<table style="border: 1px solid blue;">
<tr>
<td>qq</td>
<td>qq</td>
<td>qq</td>
</tr>
</table>

效果：
<table style="border: 1px solid blue;">
<tr>
<td>qq</td>
<td>qq</td>
<td>qq</td>
</tr>
</table>

如果需要把表格显示为单线条边框，请使用 border-collapse 属性
<table style="border: 1px solid blue;border-collapse:collapse;">
<tr>
<td>qq</td>
<td>qq</td>
<td>qq</td>
</tr>
</table>

四、盒模型

[图片上传失败...(image-30dc1c-1552621575257)]

1.元素的宽度和高度

重要: 当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充(padding)，边框(border)和边距(margin)。

下面的例子中的元素的总宽度为？：
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

2.padding

h1 {padding: 10px;} 
上、右、下、左的顺序分别设置各边的内边距(顺时针)
h1 {padding: 10px 0.25em 2ex 20%;}

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

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

盒

3.外边距合并

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

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

盒

<strong>浏览器的兼容性问题</strong>

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

<strong>清除浏览器默认样式</strong>

可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
margin: 0;
padding: 0;
}

五、定位

首先清楚什么是文档流.

文档流：将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流。

CSS定位机制：

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

<strong>块级框<font color="red">从上到下</font>一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。</strong>

行内框<font color="red">在一行中水平布置</font>。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

1.相对定位

通过设置垂直或水平位置，让这个元素“相对于”它的起点(本应该在的位置)进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {
    position: relative;
    left: 30px;
    top: 20px;
}

效果：

效果

注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

2.绝对定位

#box_relative {
    position: relative;
    left: 30px;
    top: 20px;
}

效果：

效果

相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

3.浮动（会脱离文档流）

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

效果

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

效果

六、CSS优先级机制

<font color="red">样式的优先级</font>

多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。

一般情况下，优先级如下：

（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style

有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

示例如下：

<head>
    <style type="text/css">
    /* 内部样式 */
     h3{color:green;}
    </style>

    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置：h3{color:blue;} -->
</head>
<body>
    <h3>测试！</h3>
</body>

<font color="red">选择器的优先级</font>【相当于越精确优先级越高】

内联样式表的权值最高 1000；
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

<font color="red">CSS 优先级法则：</font>

A 选择器都有一个权值，权值越大越优先；

B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

D 继承的CSS 样式不如后来指定的CSS 样式；

E 在同一组属性设置中标有“!important”规则的优先级最大

七、CSS hack

CSS hack由于不同厂商的浏览器，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

常用的CSS hack方式

（1）方式一条件注释法

    <!--[if IE 6]>
    这段文字只在IE6浏览器显示
    <![endif]-->

    <!--[if gte IE 6]>
    这段文字只在IE6以上(包括)版本IE浏览器显示
    <![endif]-->
    
    <!--[if ! IE 8]>
    这段文字在非IE8浏览器显示
    <![endif]-->

    <!--[if !IE]>
    这段文字只在非IE浏览器显示
    <![endif]-->

（2）方式二类内属性前缀法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。
<table style="border: 1px solid blue;border-collapse:collapse;">
<tr><td>hack
</td><td>写法
</td><td>实例
</td><td>IE6(S)
</td><td>IE6(Q)
</td><td>IE7(S)
</td><td>IE7(Q)
</td><td>IE8(S)
</td><td>IE8(Q)
</td><td>IE9(S)
</td><td>IE9(Q)
</td><td>IE10(S)
</td><td>IE10(Q)
</td></tr><tr><td>*
</td><td>*color
</td><td>青色
</td><td>Y
</td><td>Y
</td><td>Y
</td><td>Y
</td><td>N
</td><td>Y
</td><td>N
</td><td>Y
</td><td>N
</td><td>Y
</td></tr><tr><td>+
</td><td>+color
</td><td>绿色
</td><td>Y
</td><td>Y
</td><td>Y
</td><td>Y
</td><td>N
</td><td>Y
</td><td>N
</td><td>Y
</td><td>N
</td><td>Y
</td></tr><tr><td>-
</td><td>-color
</td><td>黄色
</td><td>Y
</td><td>Y
</td><td>N
</td><td>N
</td><td>N
</td><td>N
</td><td>N
</td><td>N
</td><td>N
</td><td>N
</td></tr><tr><td>_
</td><td>_color
</td><td>蓝色
</td><td>Y
</td><td>Y
</td><td>N
</td><td>Y
</td><td>N
</td><td>Y
</td><td>N
</td><td>Y
</td><td>N
</td><td>N
</td></tr><tr><td>#
</td><td>#color
</td><td>紫色
</td><td>Y
</td><td>Y
</td><td>Y
</td><td>Y
</td><td>N
</td><td>Y
</td><td>N
</td><td>Y
</td><td>N
</td><td>Y
</td></tr><tr><td>\0
</td><td>color:red\0
</td><td>红色
</td><td>N
</td><td>N
</td><td>N
</td><td>N
</td><td>Y
</td><td>N
</td><td>Y
</td><td>N
</td><td>Y
</td><td>N
</td></tr><tr><td>\9\0
</td><td>color:red\9\0
</td><td>粉色
</td><td>N
</td><td>N
</td><td>N
</td><td>N
</td><td>N
</td><td>N
</td><td>Y
</td><td>N
</td><td>Y
</td><td>N
</td></tr><tr><td>!important
</td><td>color:blue !important;color:green;
</td><td>棕色
</td><td>N
</td><td>N
</td><td>Y
</td><td>N
</td><td>Y
</td><td>N
</td><td>Y
</td><td>N
</td><td>Y
</td><td>Y
</td></tr>
</table>
说明：在标准模式中

“-″减号是IE6专有的hack

“\9″ IE6/IE7/IE8/IE9/IE10都生效

“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

(3)选择器前缀

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
目前最常见的是

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }}只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }}只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等

实际应用

分辨IE6和firefox两种浏览器：
div{
    background:green;/*forfirefox*/
    *background:red;/*forIE6*/(bothIE6&&IE7)
}

css