CSS归纳总结

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sun356225041/article/details/50837014

选择器的分组

CSS选择器分为

1.群组选择器  如:p, body, img, div{}

2.兄弟选择器  如:p + p { color:#f00; }

3.属性选择器  如: p[title] { color:#f00; }

4.包含(后代)选择器  如:body ul li{}

5.子元素选择器 如:div > p{}

6.ID选择器  如:#myDiv{}

7.类选择器  如:.class1{}

8.伪元素选择器  如:E:first-lineE:before

9.伪类选择器  如:E:first-childE:visitedE:focusE:enabled

10.标签选择器  如:p { font-size:1em; }

子选择器和后代选择器的区别:

后代选择器的写法就是把外层的标记写在前面,内层的标记写在后面,之间用空格分隔。
子选择器只对直接后代有影响的选择器,而对“孙子后代”以及多层后代不产生作用。

注意:在IE6中,只支持后代选择器,不支持子选择器

css框模型介绍:
这里写图片描述

这里写图片描述

这里写图片描述

你可以使用css速记属性:

 font: bold italic small-caps 1em/1.5em verdana,sans-serif

值得注意的是:css速记版本只会在你同时指定 font-sizefont-family 属性时才会生效。如果你没有指定font-weight, font-style,或者 font-variant,那么这些值将会自动默认为 normal

!Important

所有被!important 标记的样式,即使它后来被重写,浏览器也只会采用被标记的那条。

 #content{
      height:960px !important;
      height:900px;
} 

!important: IE7/IE8/IE9/FireFox可以识别上面附加!important的语句,看到附加!important的语句后,就不会再去执行 第二句,尽管他们也“认识”第二句,但是附加“!important”的语句拥有绝对优先级,只要有它存在,第二句就不允许执行。

IE6会执行!important的语句后,再去执行第二句“height:900px”,用后面的样式覆盖了前面的样式,所以在IE6下,最终的height值是900px。

链接式:

link就是把外部CSS与网页连接起来,将其加在<head>头部标签中,具体形式如下:

 <link href="styles.css" type="text/css" />

导入样式:

通过两个或以上的css文件共同部分,在css页面引入css文件,通过@import url(” “)

@import url("global.css");
@import url(global.css);
@import "global.css";

区别:

  1link属于XHTML标签,而@import是CSS提供的; 
    2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载; 
    3@import只在IE5以上才能识别,而link是XHTML标签,无兼容问题; 
    4link方式的样式的权重 高于@import的权重.

行内元素、块元素和空元素

1、和其他元素都在一行上;

2、元素的高度、宽度、行高及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

行内元素在设置 水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果,但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。

在html中,<span>、<a>、<label>、<input>、 <img>、 <strong><em>就是典型的行内元素(inline)元素。

这里写图片描述

空元素

知名的空元素: <br> <hr> <img> <input> <link> <meta>
鲜为人知的是: <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

CSS 多类选择器

一个 class 值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:

<p class="important warning">
This paragraph is a very important warning.
</p>
阅读更多
换一批

没有更多推荐了,返回首页