CSS-通用笔记文档

1、1. CSS 1.1. 行内元素、块级元素 1.1.1. 元素得类型 css中将元素分为行内元素与块级元素，她们都各自有各自得特点与行为习惯。 div 、 h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块 框”，也称为块级元素。在布局页面时，块级元素独占一行。 与之相反， span 与 strong 等元素称为 “行内元素”，这就是因为它们得内容显示在 行中，即“行内框”，也称为行内元素。在布局页面时，行内元素不会独占一行。同时垂直 内边距、边框与外边距不影响行内框得高度。 可以通过 display 属性修改框得类型。 12 CSS概述 1.2.1. css 就是什

2、么 CSS就是层叠样式表(Cascading Style Sheets )用来定义网页得显示效果。可以解 决 html 代码对样式定义得重复，提高了后期样式代码得可维护性，并增强了网页得显示效 果功能。简单一句话： CSS将网页内容与显示样式进行分离，提高了显示功能。 1.2.2. 组织网页得两种常用方式 组织网页结构主要有两种方式： 表格嵌套表格 DIV+CSS 早期得网页都就是表格套表格得方式实现得，这种方式对于比较简单得页面效果尚可， 一旦页面稍微复杂一些，使用起来就十分得麻烦，现阶段得大部分网页都主要使用DIV+CSS 得方式，只在局部使用表格嵌套方式 13引入CSS得四种方式 1.3

3、.1. Style 属性方式 利用标签中style 属性来改变每个标签得显示样式。 例： p标签段落内容。 该方式比较灵活，但就是对于多个相同标签得同一样式定义比较麻烦，适合局部修改。 1.3.2. Style 标签方式 在head标签中加入style 标签，对多个标签进行统一修改。 style type= ” text/css ” p color:#FFOOOO; 该方式可以对单个页面得样式进行统一设置，但对于局部不够灵活。 1.3.3. 导入方式 前提就是已经存在一个定义好得CSS文件。网页得一部分样式需要用到，那么就用到 这种方式。 例： import url（div、css）; div

4、 color:#FFOOOO; 注：url括号后面必须要用分号结束。如果导入进来得样式与本页面定义得样式重复， 以本页定义样式为准。 1.3.4. 链接方式 通过head标签中link 标签来实现， 例： 前提也就是先要有一个已定好得 CSS文件。 href=css_3 、css media=scree n 注：可以通过多个link标签链接进来多个 CSS文件。重复样式以最后链接进来得CSS 样式为准。 1.3.5.四种方式得优先级 由上到下，由外到内。优先级由低到高。 1.4. CSS代码格式 141. css代码格式 选择器名称属性名：属性值1 ；属性值2属性值3 ;属性名：属性值；、 属

5、性与属性之间用分号隔开 属性与属性值直接按用冒号连接 如果一个属性有多个值得话，那么多个值用空格隔开。 1.5. CSS基本选择器 1.5.1. html标签名选择器 html标签名选择器。使用得就就是html得标签名 div coloured; * Coloured; 1.5.2. class 选择器 class 名 class选择器。其实使用得标签中得class属性。格式为、 、aaa coloured; hahahaha 1.5.3. i d选择器 id选择器。其实使用得就是标签得中得id属性。格式为#id #bbb coloured; hehehe 16 CSS扩展选择器 1.6.1.

6、 后代选择器 选择父选择器选中得元素中符合子选择器得子孙元素，可以用此选择器。 例： p color:#OOFFOO; p b color:#FF000; P 标签 刘德华 段落 样式 P标签段落 1.6.2. 子元素选择器 选择父选择器选中得元素中符合子选择器得子元素，可以用此选择器。 与后代选择器相比，子元素选择器(Child selectors )只能选择作为某元素子元素 得元素。 h1 strong coloured; 这个规则会把第一个h1下面得两个strong元素变为红色，但就是第二个h1中得 strong不受影响： This is very very importa nt、 Th

7、is is really very importa nt、 1.6.3. 分组选择器 对多个不同选择器进行相同样式设置得时候应用此选择器。 例： p,div color:#FFOOOO; P标签显示段落。 DIV 标签显示段落 注：多个不同选择器要用逗号分隔开。 1.6.4. 属性选择器 属性选择器可以根据元素得属性及属性值来选择元素。 如果您希望把包含属性（title ）得所有元素变为红色，可以写作： *title coloured; 与上面类似，可以只对有href属性得锚（a元素）应用样式： ahref coloured; 为了将同时有href 与title 属性得HTML超链接得文本设置

8、为红色，可以这样写: ahreftitle color:red; 假设只希望选择 moo ns属性值为1得那些pla net元素： pla netm oon s=1 color: red; 上面得代码会把以下标记中得第二个元素变成红色，但第一个与第三个元素不受影响： Ve nu s Earth Mars css谢择羞巻老#册 lattnbi tel 用于：选越审育顋啣折和 走于送取牛启摘走国宜和愷吊他芸。 tc - - me： ffi丁这戰冨性值申恆含指罡询匸的元累 Km tp = h； .Al 卑于席朋帚弓乍僦锻尸并审匿性垃的无希谀冃必前是整亍早i即 te -Vij-L/el 匹酎届性喧叹捐

9、走值于玄的莓个元埶 邓厲性沮以播局值墙应朋理卜元執 atL -ic teK - /crjel 呼暉性谊中包胡自定ft旳痔t元幸 165.相邻兄弟选择器 如果需要选择紧接在另一个元素后得元素，而且二者有相同得父元素，可以使用相邻兄 弟选择器。 hl + p marg in-top:50px; 1.6.6.伪元素选择器 其实就在html中预先定义好得一些选择器。称为伪元素。就是因为CSS得术语。 格式：标签名：伪元素。类名 标签名。类名：伪元素。都可以。 a:li nk 超链接未点击状态。 a:visited 被访问后得状态。 a:hover 光标移到超链接上得状态（未点击）。 a:active

10、点击超链接时得状态。 1.7. 盒子模型 1.7.1. 盒子模型概述 CSS盒子模型就就是在网页设计中经常用到得CSS技术所使用得一种思维模型。 如图-2所示: niiuiiin-top border-top pa deling-top lllfn!2lllc 中 content borderirighk padding-bottom 日购 nKhf border-b ottoin 图-2 1.7.2. Paddi ng paddi ng 属性定义元素得内边距。paddi ng 属性接受长度值或百分比值，但不允许使 用负值。 如果设置一个值，则上下左右内边距都取该值。 如果设置两个值，则第一个

11、值为上下边距，第二个值为左右边距。 如果设置三个值，则第一个值为上边距，第二个为左右边距，第三个为下边据。 如果设置四个值，则按照上右下左边距取值，即按顺时针方向取值。 可以为元素得内边距设置百分数值。百分数值就是相对于其父元素得width 计算得。 所以，如果父元素得 width 改变，它们也会改变。 也可以通过如下属性单独设置上右下左内边距。 paddi ng-top :上内边距 paddi ng-right :右内边距 paddi ng-bottom :下内边距 paddi ng-left :左内边距 1.7.3. Margin 围绕在元素边框得空白区域就是外边距。设置外边距会在元素外创

12、建额外得“空白”。 设置外边距得最简单得方法就就是使用margin 属性，这个属性接受任何长度单位、 百分数值甚至负值。 属性接受任何长度单位，可以就是像素、英寸、毫米或em。 可以设置为auto 。 百分数就是相对于父元素得width 计算得。 多值设置规则与Paddi ng相同。 也可以通过如下属性当杜设置上右下左外边距。 margi n-top :上外边距 margin-right: 右外边距 margi n-bottom:下外边距 margi n-left: 左外边距 1.7.4. Border 元素得边框 (border)就是围绕兀素内容与内边距得一条或多条线。 CSS border

13、 属性允许您规定元素边框得样式、宽度与颜色。 Border-style: 定义边框样式 border-top-style border-right-style border-bottom-style border-left-style border-width :边框宽度 border-top-width border-right-width border-bottom-width border-left-width border-color :边框颜色 border-top-color border-right-color border-bottom-color border-left-co

14、lor 注意，如果边框样式设置为none,那么无论设置多少宽度真实值都为0，即不可见也 不占用空间。 1.8. 三种定位方式 CSS有三种基本得定位机制：普通流、浮动与绝对定位。 1.9. 文档流定位 1.9.1. 文档流定位概述 除非专门指定，否则所有框都在普通流中定位。也就就是说，普通流中得元素得位置由 元素在（X）HTML 中得位置决定。 块级框从上到下一个接一个地排列，框之间得垂直距离就是由框得垂直外边距计算出 来。 行内框在一行中水平布置。可以使用水平内边距、 边框与外边距调整它们得间距。但就 是，垂直内边距、边框与外边距不影响行内框得高度。 1.10. Float 浮动 浮动可以改

15、变元素得布局方式。 浮动得框可以向左或向右移动，直到它得外边缘碰到包含框或另一个浮动框得边框为 止。 由于浮动框不在文档得普通流中，所以文档得普通流中得块框表现得就像浮动框不存在 一样。 浮动元素会生成一个块级框，而不论它本身就是何种元素。 如图-3所示： float cssi 秉容性：】 float: none | left | right 取值： none : 认16対象不8诸 left ;文本渝颐1的右边 right :文本流向对象的左迪 图-3 1.10.2. 浮动演示 请瞧下图，当把框1向右浮动时，它脱离文档流并且向右移动，直到它得右边缘碰到 包含框得右边缘： 如图-4所示: 不浮动

16、的框捷1冋右浮动 再请瞧下图，当框1向左浮动时，它脱离文档流并且向左移动，直到它得左边缘碰到 包含框得左边缘。因为它不再处于文档流中，所以它不占据空间， 实际上覆盖住了框 2，使 框2从视图中消失。 如图-5所示： I 框3 J 粧E隠藏在框1下面 图-5 如果把所有三个框都向左移动，那么框1向左浮动直到碰到包含框，另外两个框向左 浮动直到碰到前一个浮动框。 如图-7所示: 所有三亍框鬥左胃动 图-6 如下图所示，如果包含框太窄，无法容纳水平排列得三个浮动元素，那么其它浮动块向 下移动，直到有足够得空间。 如果浮动元素得高度不同，那么当它们向下移动时可能被其它 浮动元素 卡住”如图-7所示：

17、惟1 I I 厂 曲z I I 1 所有三于框肯左浮动 1.10.3. Clear_ 清除浮动 clear禁止元素 由于浮动得元素脱离了文档流，对其她元素得产生了影响，可以通过 左右具有浮动元素，从而阻止这种影响。 Clear可以指定元素得左/右/左右边上不允许有浮动元素。 如图-8所示: clear claar : non | l不允许右边有浮动耐象 both :不允许有浮动对象 图-8 1.11. 定位 1.11.1. CSS positi on 属性 通过使用 position 属性，我们可以选择不冋类型得定位，这会影响兀素框生成得方 式。 position属性值得含义: static

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

19、得一部分，因为元素得位置相对于它在普 通流中得位置。 1.11.2. TOP bottom left right 在绝对定位时，通过这些属性指定当前元素基于最近得有定位得祖先元素定位位置关 系。 在相对定位时，通过这些属性指定当前元素基于当前元素得初始位置得位移进行定位。 1.11.3. z-i ndex 指定元素得堆叠顺序，数值越大离用户越近，数值越小离用户越远，此值可以为负数。 1.12. Display 1.12.1. Display 属性详解 设置元素得显示方式。 display 我们知道元素分为行内元素与块级元素，而display属性可以修改元素得显示方式。 帥本：CSS1/C5S2

20、 兼咨特：【宓+忖+绽檢性：有 i音法： display : blck | none | inline | compact | morker | inline table | 口求 item | run in | table | tnble caption | tab nhl#-row |row-group bluck none inline inline-block 丄归虑的默认值檄像强制忙出叛漳呈込删攜之后制偏忏 隐猛对象“与visibility-g.|t的hidgnf肓不吊其刃翩翱瞬#擔保留帥理空间 ci円聆时银的第飆値*将棉碣帑昨対内臨腹呈渔畑霞中NI除存 11注椒慷呈谨为内联i?像，但圣対铀