CSS基础知识
CSS
-
概念：CSS指层叠样式表
-
作用：内容与外观分离
-
优点：灵活修改网页外观和同一网站的风格
-
高版本：
1.过滤的方法更多
2.针对移动端开发提高更多的选择
3.动态效果和3D
- 创建CSS
行内样式
只对当前标签有用
<标签名 style="color: ; font...">
------------------------------------------------------------
内部样式
只在这个HTML中有用
在一个HTML中定义的规则，与HTML文件写在一起
* 使用选择器来声名样式规则
------------------------------------------------------------
外部样式
写在CSS文件中
* 使用选择器来声名样式规则
引入样式表："stylesheet" href="../css/common.css" type="text/css" />
------------------------------------------------------------
优先级：行内 > 内部 > 外部 > 默认
选择器
- 标签选择器
p{}
span{}
...
- id选择器
定义：#id{
规则名：值；
...
}
引用：<标签名 id="id名">
特点：一个页面只有一个同名id
- 类选择器
定义：.class{
规则名：值；
...
}
引用：<标签名 class="class名">
特点：一个页面可以有多个同名class
class中间的空格表示同时标记为两个类选择器
- 优先级
id>class>标签>默认
- 伪类选择器
:link：默认
:hover
:active：鼠标点击
:visited：鼠标访问过后
最佳实践：a{} a:hover{}
几乎所有的标签都可以设置多种状态 ：xxx
- 特殊选择器
后代选择器：所有的后代
父 后{}
子元素选择器：相邻的儿子
父>子{}
相邻兄弟选择器：相邻的向下取兄弟
兄+弟{}
普通兄弟选择器：左右兄弟
兄～弟{}
所有标签选择器
*{}
多标签选择器
p,span,table{}
属性选择器
标签名[属性名=？]{}
规则
帮助文档自查
font:组合规则
font_size:单个规则
text-align:对齐方式
text-decoration:划线
text-indent:首行缩进
text-shadow:阴影
（ 颜色 水平 垂直 模糊效果距离）
line-height:行高
letter-spacing:字符字符间间距
white-space:nowrap;不换行
color:字体颜色
vertical-align:文字与图片的相对距离
list-style-type: none；去除黑点
cursor: crosshair：鼠标样式
------------------------------------------------------------
background:背景
background-image:url(...)
background-position:
1.小图标铺不满容器的--可以设置图片位置
2.大图片(如雪碧图)铺满甚至超过容器的--设置图片的偏移量
background:url("../img/news.gif") no-repeat scroll 0 0 transparent
图片--铺排--随对象内容滚动还是固定--背景图像位置--背景色透明
------------------------------------------------------------
容器水平居中：
设置body(需要居中的)的width ＋ margin:0px auto;
文本水平居中：
text_align:center;
文本垂直居中
设置容器height ＋ line-height设置行高（一般容器默认和文本一样大）
....
display
display
none:隐藏---空间释放
Visibility:hidden--隐藏，但不释放空间
inline:行级元素
1.多个元素占一行
2.不可以设置宽高，元素撑起来
block:块级元素
1.独占一行
2.可设置宽高
行级标记默认挤压前一个，想要该变行级标记大小＋设置行级标记位置时使用
inline-block:行级块元素
1.多个元素占一行
2.可设置宽高
img input botton
定位
position
relative:相对定位
1.相对于自己的初始位置
2.定位后空间不释放
absolute:绝对定位
1.相对于最近relative的祖先元素，若无则相对于body
2.定位后空间释放
fixed:固定定位---页面左右侧的小广告
1.位置相对于可视页面
2.定位后空间释放
static:默认
可以设置left right top...
浮动
float：浮动及脱离文本流，释放所占空间
left right none
浮动与不浮动可以覆盖，但文字会在浮动周围
父元素中元素都浮动则导致父元素塌陷
clear:both--清除左右浮动
盒子
- 默认：上右下左
- margin：外补丁
margin: 10px auto;
上下间距 左右间距
auto:自动补齐
- border：边框
border: 2px solid black;
边框宽度 边框样式 边框颜色
- padding：内补丁
常见效果
- 雪碧图：将小图标放在一张图中，利用背景图的偏移取图片，提升速度（请求越少速度越快）
1.设置容器 如div
2.设置容器大小:大小设置成要取的图片大小
width：
height：
3.设置图片偏移量：左上方向偏移取负
background: url(img/log.png) -424px -250px;
or
background-image:url(...)
background-position:偏移量
- ul菜单栏+超链接
1.ul默认自动换行：浮动解决float，改变了li的显示位置
clear:both; --清除浮动 若不清除则该板块与浮动的板块重叠
2.ul默认有黑点：li中设置list-style-type:none
3.超链接a自动压缩 设置宽度无用：display：block--转为块级标记
4.给容器设置height方便垂直居中
5.两个水平居中：
margin:0px auto
text_align:center
- 清除所有样式
清除标签的默认样式
clearall.css---文档中
自适应窗口****
html:
中加上
"viewport" content="width=device-width,initial-scale=1.0" />
css:
@media only screen and (max-width:800px ) {//当宽度小于800时，使用该效果中有的替代原来有的效果，没有的效果保持不变
样式选择器设置样式
}
提示：1.当自适应时，最好不要给容器设置宽度，直接让宽度跟随边框运动，设置的话也最好设置百分制
2.当自适应时，多多使用padding margin来设置距离，方便自适应---最好不要直接使用height width来设置固定值
3.auto也很好用，不要忘记他！！！
相关应用在h4_CSS4