========css======
1.什么是css?
1)cascading stylesheet 级联样式表(层叠样式表)
按照W3C规范,网站的数据和结构由html来负责,
页面的外观展示给用户的效果由CSS负责.
2)css的基本语法
选择器的名称{
属性1:属性值1;
属性2:属性值2;
...
}
样式引入:
内部:<style></style>
外部:<link rel="stylesheet" type="text/css" href="css/style.css"/>
3)选择器
施加样式:将样式施加到指定的html标签上
a.标签选择器
标签名{}
对具有相同标签名的所有标签起作用.
b.class选择器
.选择器名称{}
标签的class属性值与选择器名称相同就会起作用
c.id选择器
#选择器名称{}
标签的id属性值与选择器名称相同就会起作用
d.选择器的分组
div,h1,span{}
表示对div,h1,span都施加该样式
e.选择器的派生
div span{}
表示只有div标签下的span标签施加了该样式
f.样式的继承
子标签会继承父标签的样式
4)样式的优先级
浏览器默认样式
外部样式:使用link标签引入
内部样式:使用style标签定义样式
内联样式:标签中使用style属性定义样式
优先级从底到高.
注意:
外部和内部:
如果是同名选择器,施加的样式以加载顺序决定(以后加载的顺序为准)
=======
标签的分类?
块级标签:独占一行.如div,table,tr,ul,li,h1～h6...
行内标签:不需要独占一行.如span,input,...
2.几个重要的属性:
1)位置相关的属性
margin:外边距
margin-left/right/top/bottom
margin:10px 10px 10px 10px;
顶部 右边 底部 左边
margin:20px auto; 左右居中,顶底各20px;
padding:内边距
padding-left/right/top/bottom
padding:20px 10px; 上下内边距20px,左右内边距10px;
注意:使用内边距的时,字标记会撑开父标记的宽高.
2)边框
border:边框
border:1px solid blue;
大小 形状 颜色
border-left/right/top/bottom
3)背景
background-color:背景色
background-image:url(图片路径):背景图片
background-repeat:no-repeat|repeat-x|repeat-y;
不平铺 横坐标平铺 纵横坐标平铺
background-attachment:scroll|fixed;
默认 固定
background-position:100px 200px; 位置
左 顶
background:blue url(图片路径) no-repeat fixed 100px 200px;
背景色 背景图片 不平铺 固定 左 顶
4)文字
font-size:文字大小
font-style:风格 italic(斜体)|normad
font-weight: 粗细 100-900
font-family: 字体
text-decoration: none|underline 下划线
cursor:pointer(小手)|wait(进度条) 光标
text-align:left|right|center 文字水平位置
5)列表(ul,li)
list-style-type:none; 去掉前缀(小圆点).
6)浮动
取消块级标签的独占行特性.
float:left|right 浮动
clear:both 取消浮动
7)链接伪样式
a:link {} /* 未被访问 */
a:visited {} /* 访问后 */
a:hover {} /* 鼠标指向 */
a:active {} /* 鼠标点击但没有放开 */
注意:
a.a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
b.a:active 必须被置于 a:hover 之后，才是有效的。
8)display属性
规定元素应该生成的框的类型
display值:
none:不显示该标记
block:按块级标签的方式显示
inline:按行内标记的方式显示
注意:
display中的block和inline值慎重使用,因为会破坏原有的标签结构.
display的应用:
a.菜单选项的显示或隐藏
b.选项卡的内容切换.
9)position属性
规定元素的定位类型
position值:
static(默认值):浏览器默认情况下,会按照从左至右,从上往下依次摆放各个标记.
absolute:相对位置偏移
relative:先按照默认的方式摆放,然后再偏移
注意:
a.使用absolute值时,是默认相对body偏移,并且不占用默认的摆放位置.
如果父标签也是absolute,那么子标签相对父标签偏移
b.使用relative值时,先看默认摆放位置,然后再偏移.但是占用默认摆放位置.
总结：
css重要的属性：
1.位置 2.大小 3.间距
小知识点
1.换行
<p>
大换行(段落换行)
<br/>
小换行(强制换行)
<p>也可以等同与<br/>
p{
margin:0;
padding:0;
}
这样两个相同
3.title属性(将鼠标放在图片,文字,a链接 有文字说明)
title说明的换行 与 都可以
<a href="test.html" title="a b c defghijk">