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.宽度高度属性
width:
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.群组选择器
标签名,标签名{
属性:属性值；
}
样式的继承
子标记会继承父标记的样式