CSS通用笔记文档.docx

资源描述

CSS通用笔记文档.docx

《CSS通用笔记文档.docx》由会员分享，可在线阅读，更多相关《CSS通用笔记文档.docx（16页珍藏版）》请在冰豆网上搜索。

CSS通用笔记文档.docx

CSS通用笔记文档

1.CSS

1.1.行内元素、块级元素

1.1.1.元素得类型

CSS中将元素分为行内元素与块级元素，她们都各自有各自得特点与行为习惯。

div、h1或p元素常常被称为块级元素。

这意味着这些元素显示为一块内容，即“块框”，也称为块级元素。

在布局页面时，块级元素独占一行。

与之相反，span与strong等元素称为“行内元素”，这就是因为它们得内容显示在行中，即“行内框”，也称为行内元素。

在布局页面时，行内元素不会独占一行。

同时垂直内边距、边框与外边距不影响行内框得高度。

可以通过display属性修改框得类型。

1.2.CSS概述

1.2.1.CSS就是什么

CSS就是层叠样式表（CascadingStyleSheets）用来定义网页得显示效果。

可以解决html代码对样式定义得重复，提高了后期样式代码得可维护性，并增强了网页得显示效果功能。

简单一句话：

CSS将网页内容与显示样式进行分离，提高了显示功能。

1.2.2.组织网页得两种常用方式

组织网页结构主要有两种方式：

表格嵌套表格

DIV+CSS

早期得网页都就是表格套表格得方式实现得，这种方式对于比较简单得页面效果尚可，一旦页面稍微复杂一些，使用起来就十分得麻烦，现阶段得大部分网页都主要使用DIV+CSS得方式，只在局部使用表格嵌套方式

1.3.引入CSS得四种方式

1.3.1.Style属性方式

利用标签中style属性来改变每个标签得显示样式。

例：

#FF0000;color:

#FFFFFF">

p标签段落内容。

该方式比较灵活，但就是对于多个相同标签得同一样式定义比较麻烦，适合局部修改。

1.3.2.Style标签方式

在head标签中加入style标签，对多个标签进行统一修改。

p{color:

#FF0000;}

该方式可以对单个页面得样式进行统一设置，但对于局部不够灵活。

1.3.3.导入方式

前提就是已经存在一个定义好得CSS文件。

网页得一部分样式需要用到，那么就用到这种方式。

例：

@importurl（div、css）;

div{color:

#FF0000;}

注：

url括号后面必须要用分号结束。

如果导入进来得样式与本页面定义得样式重复，以本页定义样式为准。

1.3.4.链接方式

通过head标签中link标签来实现，前提也就是先要有一个已定好得CSS文件。

例：

注：

可以通过多个link标签链接进来多个CSS文件。

重复样式以最后链接进来得CSS样式为准。

1.3.5.四种方式得优先级

由上到下，由外到内。

优先级由低到高。

1.4.CSS代码格式

1.4.1.css代码格式

选择器名称{属性名：

属性值1;属性值2属性值3；属性名：

属性值；……、}

属性与属性之间用分号隔开

属性与属性值直接按用冒号连接

如果一个属性有多个值得话，那么多个值用空格隔开。

1.5.CSS基本选择器

1.5.1.html标签名选择器

html标签名选择器。

使用得就就是html得标签名

div｛

color:

red;

｝

Color:

red;

}

1.5.2.class选择器

class选择器。

其实使用得标签中得class属性。

格式为、class名

、aaa{

color:

red;

}

hahahaha

1.5.3.id选择器

id选择器。

其实使用得就是标签得中得id属性。

格式为#id名

#bbb{

color:

red;

}

hehehe

选择父选择器选中得元素中符合子选择器得子孙元素，可以用此选择器。

选择父选择器选中得元素中符合子选择器得子元素，可以用此选择器。

与后代选择器相比，子元素选择器（Childselectors）只能选择作为某元素子元素得元素。

这个规则会把第一个h1下面得两个strong元素变为红色，但就是第二个h1中得strong不受影响：

Thisisveryveryimportant、

Thisisreallyveryimportant、

如果您希望把包含属性（title）得所有元素变为红色，可以写作：

为了将同时有href与title属性得HTML超链接得文本设置为红色，可以这样写：

上面得代码会把以下标记中得第二个元素变成红色，但第一个与第三个元素不受影响：

如果需要选择紧接在另一个元素后得元素，而且二者有相同得父元素，可以使用相邻兄弟选择器。

CSS盒子模型就就是在网页设计中经常用到得CSS技术所使用得一种思维模型。

如果设置两个值，则第一个值为上下边距，第二个值为左右边距。

如果设置三个值，则第一个值为上边距，第二个为左右边距，第三个为下边据。

如果设置四个值，则按照上右下左边距取值，即按顺时针方向取值。

设置外边距得最简单得方法就就是使用margin属性，这个属性接受任何长度单位、百分数值甚至负值。

元素得边框（border）就是围绕元素内容与内边距得一条或多条线。

注意，如果边框样式设置为none，那么无论设置多少宽度真实值都为0，即不可见也不占用空间。

也就就是说，普通流中得元素得位置由元素在（X）HTML中得位置决定。

块级框从上到下一个接一个地排列，框之间得垂直距离就是由框得垂直外边距计算出来。

浮动得框可以向左或向右移动，直到它得外边缘碰到包含框或另一个浮动框得边框为止。

由于浮动框不在文档得普通流中，所以文档得普通流中得块框表现得就像浮动框不存在一样。

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

再请瞧下图，当框1向左浮动时，它脱离文档流并且向左移动，直到它得左边缘碰到包含框得左边缘。

因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失。

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

如下图所示，如果包含框太窄，无法容纳水平排列得三个浮动元素，那么其它浮动块向下移动，直到有足够得空间。

如果浮动元素得高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”，如图-7所示：

由于浮动得元素脱离了文档流，对其她元素得产生了影响，可以通过clear禁止元素左右具有浮动元素，从而阻止这种影响。

通过使用 position属性，我们可以选择不同类型得定位，这会影响元素框生成得方式。

块级元素生成一个矩形框，作为文档流得一部分，行内元素则会创建一个或多个行框，置于其父元素中。

元素原先在正常文档流中所占得空间会关闭，就好像元素原来不存在一样。

元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型得框。

元素框得表现类似于将position设置为absolute，不过其包含块就是视窗本身。

相对定位实际上被瞧作普通流定位模型得一部分，因为元素得位置相对于它在普通流中得位置。

在绝对定位时，通过这些属性指定当前元素基于最近得有定位得祖先元素定位位置关系。

在相对定位时，通过这些属性指定当前元素基于当前元素得初始位置得位移进行定位。

指定元素得堆叠顺序，数值越大离用户越近，数值越小离用户越远，此值可以为负数。

我们知道元素分为行内元素与块级元素，而display属性可以修改元素得显示方式。

*visibility也可以实现隐藏，不同得就是display不显示，也不占用空间，而visibility隐藏，但就是空间仍然占用。