HTML5中a不继承前面样式,css概述

前言

1.CSS    cascading   stylesheet  级联样式表 ，外观显示(页面内容显示的方式)。CSS文档以.css作为后缀

2、w3c推荐页面文件定义

数据和结构   html

样式             css

行为             javascript

正文

CSS(cascading style sheets,层叠式样式表)

作用：设置HTML页面的布局和样式

css的语法

选择器｛样式属性;样式属性｝

HTML中引入样式

a.外部样式(外部文件)，link标签引入

b.内部样式，style标签引入

c.内联样式，通过style属性设置

注： 样式优先级别

1.内联样式>内部样式>外部样式

2. 在新版浏览器中内部样式和外部样式

依据样式的引入先后顺序，后引入会覆盖前面的样式

选择器

1.标签选择器

标签名称｛....｝

2.ID选择器     #id ｛...｝

3.Class选择器

.class ｛...｝

4.群组选择器

标签名称1,标签名称2 ｛.....｝

5.包涵选择器

父标签 子标签 ｛...｝

直接包涵

父标签 > 子标签 ｛....｝  IE不支持

经常使用样式属性

1.字体相关属性

1)字体颜色  color:颜色英文单词、#十六进制形式  RGB 如：color:#0099ff

2) 字体大小  font-size

3)字体样式  font-style

4)字体  font-family

5)单词间距  word-spacing

6)字符间距  letter-spacing

2.文本相关属性

1)文本对齐方式  text-align：left/center/right

2)文本与左边界的距离  text-indent

3)文本线条  text-decoration:underline 下划线  overline 上划线  line-through 删除线 none 去掉线条

3.背景相关属性

1)  背景色  background-color:red

2)  引入背景图片  background-image:url(...)

3)  图片平铺方式  background-repeat:no-repeat 不平铺  repeat-x 在水平方向上平铺  repeat-y 在垂直方向上平铺

4.边框相关的属性

1) border:线形  粗细  颜色

线形： solid实线 、 dotted点线、  double双线 和  dashed虚线

2) border-top:顶层边框

3)border-bottom:底层边框

4)border-left:左边框

5)border-right:右边框

5.宽度高度属性

height:

6.鼠标相关

cursor:wait 漏斗形 pointer(hand)  手指型

7.显示相关的样式

display:none  隐藏  inline 将div变成span   block 将span转换成div

8.超链接

1)a:link{.....}  超链接点击之前的样式设置

2)a:hover{....}  鼠标浮上的样式设置

3)a:active{....}  鼠标点击的样式设置

4)a:visited{....}  訪问过后的样式设置

9.定位相关样式

1)  position:   absolute 绝对定位:相对父标签的左上角坐标进行定位      relative 相对定位：相对当前标签默认出现的位置进行偏移

2)top:设置上边距

3)  left:设置左边距

10.内外边距

margin: 外边距

padding:内边距

总结

基本的语法

选择器{

属性:属性值;

.......

}

选择器

a.标签选择器

标签名{

属性:属性值;

}

b.class 选择器

.选择器的名字{

属性:属性值;

}

特殊

标签名.选择器名字{//仅仅对相相应标签有效果

属性:属性值;

}

c.id  选择器

#选择器名字{

属性:属性值;

}

d.包括选择器

标签名1  标签名2{

属性:属性值；

}

对包括在标签1中的标签2有效果

e.群组选择器

标签名,标签名{

属性:属性值；

}

样式的继承

子标记会继承父标记的样式