样式表CSS

第五章  样式表

一、内联样式

style = “属性、属性值”；

二、内部样式

1.ID选择器    #ID{属性：属性值；}

2.标签选择器    标签{属性：属性值；}

3.类选择器     .类名称{属性：属性值；}

三、外部样式

文件名   stStyle.css

link标签引入外部样式

CSS三大模块

①盒子模型               ②浮动             ③定位

标签显示模式

①块级元素  div  p  hn  ul  table

特点：独占一行；可设置高度。

②行内元素  a  span  strong  b  i  u

特点：不换行；不能设置高度。

③行内块  img  input

特点：不换行；可以设置高度。

display ：block；/* 块级元素 */

display ：inline；/* 行内元素 */

display ：inline-block；/* 行内块 */

display ：none；不显示

定位

定义：定位的主要目的就是移动位置，让盒子到我们想要的位置上去。

属性：元素的定位属性主要包括定位模式和边偏移两部分。

定位模式：

1.静态定位

2.相对定位：每次移动的位置是以自己的左上角为基点移动，移动后原来所占的位置继续占有。  relative

3.绝对定位：不占位置。  absolute

4.固定定位：只认浏览器，不占位置。

若所有父级元素都没有定位，以浏览器为准对齐。通常推荐子绝父相，子元素绝对定位，父元素相对定位。

叠放次序：z-index，值越大，越在上层。