当前位置: 首页 > 网页设计 > Css教程 > 正文

CSS学习备忘录

时间:2016-08-12 本站 乖兔快跑

如何引用CSS文件的内容

在一个CSS文件中,可以通过@import指令来引用另一个CSS文件,格式如下:

@import url("被引用的CSS文件名");

例如有a.css和b.css两个CSS文件,如果希望在a.css中使用b.css中的选择器,可在a.css文件中添加如下指令来完成:

@import url("b.css");

在html或者php文件中引用某个css文件时,可以在<style>标签中添加如下格式的语句:

<style>
@import url("被引用的CSS文件名");
</style>

Css选择器

选择器是CSS中非常重要的概念,CSS中常用四种不同的选择器。简单说,选择器就是在CSS中创建,而在网页(html,jsp,php,asp.net)中使用。

css选择器优先级:

id选择器>class选择器>html选择器>通配符选择器

id选择器的复用性比较低,优先级比类选择器高,唯一使用。如果某人样式只给某一个html元素使用,则选择id选择器;如果一个样式可以给多个html元素使用,则应当优先使用class选择器。

1、CSS类选择器(又叫Class选择器)

基本语法:

.类选择器{

属性名:属性值;

……

}

CSS类选择器的例子:

http://www.bianceng.cn//web/Css/201607/50222.htm

2、CSS的id选择器

基本语法:

#id选择器{

属性名:属性值;

……

}

CSS的id选择器的例子:

http://www.bianceng.cn/web/Css/201607/50229.htm

3、CSS的html元素选择器

基本语法:

html元素名{

属性名:属性值;

……

}

CSS的html元素选择器的例子:

http://www.bianceng.cn/web/Css/201607/50230.htm

例子:CSS让所有的超链接出现指定的效果:

http://www.bianceng.cn/web/Css/201607/50235.htm

例子:css控制不同段落出现不同的效果,即对同一种html元素分类

http://www.bianceng.cn/web/Css/201607/50240.htm

4、CSS通配符选择器:

希望所有的元素都符合某一种样式,可使用通配符选择器。通配符选择器可应用于所有html元素,但其优先级最低。

语法:

*{

属性名:属性值;

…….

}

例:

*{margin:0;padding:0}

可以让所有html元素的外边距和内边距都默认为0

CSS通配符选择器的例子

http://www.bianceng.cn/web/Css/201607/50246.htm

Css的margin属性:

http://www.bianceng.cn/web/Css/201607/50251.htm

CSS父子选择器:

http://www.bianceng.cn/web/Css/201607/50256.htm

一个CSS元素同时有id选择器和类选择器的例子:

http://www.bianceng.cn/web/Css/201607/50261.htm

一个CSS元素同时有多个类选择器的例子

http://www.bianceng.cn/web/Css/201607/50266.htm

如何合并多个类选择器的公共部分?

http://www.bianceng.cn/web/Css/201607/50271.htm

Css块内元素和行内元素

http://www.bianceng.cn/web/Css/201607/50276.htm

块元素和行内元素的相互转换

http://www.bianceng.cn/web/Css/201607/50281.htm

CSS标准流和非标准流

流:网页设计中的流,是指元素(标签)的排列方式。

标准流:元素(标签)在网页中如同流水,排在前面的元素(标签),内容在前面出现;排在后面的元素(标签),内容在后面出现。

非标准流:当某个元素(标签)脱离了标准流(例如因为相对定位)排列,统称为非标准流排列。

CSS盒子模型

http://www.bianceng.cn/web/Css/201607/50287.htm

CSS盒子模型综合实例

http://www.bianceng.cn/web/Css/201608/50290.htm

CSS设置背景图片

http://www.bianceng.cn/web/Css/201608/50295.htm

CSS控制带文字说明的多张图片

用CSS盒子模型实现仿优酷网首页的图片效果。

具体写页面顺序:

1、先写html,做出显示内容;

2、写css文件,控制样式;

CSS浮动

浮动是CSS中非常重要的概念。浮动对块元素和行内元素都生效,包括左浮动、右浮动和清除浮动。行内元素如果浮动,自动转换为块元素。

1、右浮动:指一个块元素向右移动,让出自己原来的位置,向右移动直到碰到包含自己的父元素的右边框。

2、左浮动:指某个块元素尽量向左边移动,让出右边的位置,让别的块元素显示。

CSS右浮动的例子:

http://www.bianceng.cn/web/Css/201608/50296.htm

CSS左浮动的例子:

http://www.bianceng.cn/web/Css/201608/50301.htm

CSS浮动的一个特殊情况

http://www.bianceng.cn/web/Css/201608/50307.htm

如何理解浮动?

如果一个元素右/左浮动,则:

1、该元素本身会尽量向右/左移动,直到碰到边框或者别的浮动元素,浮动对块元素和行内元素都生效。

2、元素向右/左浮动,相当于让出自己的左/右边,别的元素就会在它的左/右边排列。

CSS实现文字包围图片的效果

http://www.bianceng.cn/web/Css/201608/50312.htm

清除浮动

如果不希望别的元素在某个元素的左边或者右边,可使用清除浮动的方法:

clear:right;clear:left;clear:both;

CSS定位

CSS定位(Positioning)属性允许对元素进行定位,position属性值:

1、静态定位:static(默认值):元素正常生成。块元素生成一个矩形框,作为文档流/标准流的一部分,行内元素则会创建一个或多个行框,置于其父元素之中。

2、相对定位:relative:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留,好象该元素仍然在文档流/标准流中一样。这里所谓的相对,是相对该元素原来应该在的位置进行定位。

3、绝对定位:absolute:元素框从文档流中完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好象元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

绝对定位,是指对该元素最近的那个脱离了标准流的元素定位;如果没有父元素(或有父元素,但父元素没有脱离标准流),则相对body左上角定位。

4、固定定位:fixed:元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身,即相对body的左上角。

静态定位靠margin-left,margin-right等来移动位置;

动态定位靠left,right来移动位置。

CSS相对定位的例子

http://www.bianceng.cn/web/Css/201608/50317.htm

CSS绝对定位的例子1

http://www.bianceng.cn/web/Css/201608/50322.htm

CSS绝对定位的例子2

http://www.bianceng.cn/web/Css/201608/50325.htm

CSS固定定位的例子

http://www.bianceng.cn/web/Css/201608/50331.htm

position的z-index

http://www.bianceng.cn/web/Css/201608/50336.htm