HTML盒子模型顶部导航栏,CSS盒子模型+导航条案例分享

CSS Cascading Style Sheet层叠样式表

一个HTML网页

结构 样式 行为

CSS引入方式：

1、行内样式 标签

2、内嵌样式

选择器{样式规则}

3、引入样式

@import url(样式文件名)

4、外部样式

选择器分类

1、 标签选择器

2、 类选择器

3、 id选择器

4、 层级选择器

5、 分组选择器

6、 组合选择器

7、 通用选择器

8、 伪类选择器

a链接的四个状态

a:link{} a链接正常状态

a:visited{} a链接访问后的状态

a:hover{} a链接鼠标县停其上的状态

a:active{} 鼠标a链接按下的状态

组合选择器：

例1：

div  .box{} 表示选择div标签下的类为box的所有的元素

div.box{} 表示选择class属性为 box的div.

示例：

。box{border:2px solid red;}

。box1{background:yellow;}

span1

span2

尺寸属性：

width: px 百分比

height: px 百分比

字体属性：

color:

font-size:

font-family:

font-style:

font-weight:

font-transform:

letter-spacing: 设置字间隔

word-spacing: 设置词间隔

line-height: 设置行高

font: 复合属性

font-size与font-family是必须的 font-weight与font-style必须位于前面

文本属性：

text-decoration: underline、over-line、line-through

text-align: 主用用于文字或被包含的行内元素的水平对齐方式

vertical-align: 主用于tr或td

text-indent:

边框属性：

border-width:

border-style:

border-color:

注意：border-Width＜span style="">与border-style是属性 border-color默认是黑色

border：复合属性

border-left-width:

border-left-style:

border-left-color:

border-left: 复合属性

背景属性：

background-color:

background-image:

url(图片url)

background-position:

具体值 20px

位置名： left、center、top、right、center、bottom

background-repeat: no-repeat、repeat-x、repeat-y

bakcground-attachment: fixed scroll

background: 复合属性

background:red url(images/bgpic.jpg) 10px 20px no-repeat scroll

！important > 行内样式 > id选择器 > 类选择器 > 标签选择器

行内样式 > 内部样式 > 外部样式

important重要的意思(IE低版本不兼容)

由于父元素样式会被子元素继承，多个父元素的样式会同时施加在子元素上。为了让设计人员能够清楚的知道哪个选择器的样式最优先，人为的为类型设置了相应的等级：

标签选择器 1

类选择器 10

id选择器 100

行内样式 1000

继承：

会被继承的样式主要是与文本相关的样式

color、font-size、font-family、font-weigth、font-style、letter-spacing、word-spacing、line-Height＜/span>、text-indent、text-transform、text-align、text-deocration

边距属性

外边距：

margin: 复合属性 设置元素的外边距

margin-left: 设置元素与其父元素的左边距

margin-top: 设置元素与其父元素的上边距

margin-right: 设置元素与其父元素的右边距

margin-bottom: 设置元素与其父元素的下边距