编辑文章 - 博客频道 - CSDN.NET

========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">