html+css详解

今天，我们一起来学习css。

    css是用来设置网页标签的样式即宽、高、背景颜色、位置等的一种让浏览器解释执行的语言，用于布局与美化网页的层叠样式表；对于使用大写还是小写字母不敏感，但推荐使用小写。

一、css语法：

    1.选择器——我要找的html标签（元素）

    {属性1：属性值1；width:20px；}

    属性和值之间用冒号分开，多个属性之间加分号。

非行内样式写法（即内嵌样式和外部样式的写法）：

                                             选择器{

                                             属性名1：属性值1；

                                             属性名2：属性值2；

                                             ···

                                             }

 

行内样式的写法：

                 style=“属性名1：属性值1；属性名2：属性值2；···”

二、 Css注释

（常用）

//：单行注释（不常用）

在Sublime中，可使用快捷键ctrl+/来添加注释。

三、块级元素（block-line）和内联元素（in-line）：

HTML中几乎所有元素都属于内联元素或者块元素中的一种。span和div是“无意义”的标签,为样式而生的。

块级:独占一行

（division）元素是块级的（简单地说，它等同于其前后有断行）

块元素可以包含内联元素或某些块元素，反之，不成立，它只能包含其他的内联元素。我们使用的DTD中规定了块级元素是不能放在

里面的。

内联

三、css样式分类（三种可混用）

1.行内样式——只能作用在当前标签。

Style=”属性名1：属性值1；属性名2：属性值2···”

style="background-color: #599C2B;height:30px;">内容

2. 内嵌样式——作用在整个页面的指定标签。

Style写在head标签里

body{	p{
background-color:red;	background-color:#599C2B;
width:500px;	height: 30px;
}	}

3.外部样式——作用在多个页面。

先建立一个以.css为后缀名的文件。eg：layout.css

n  Link  【写在head标签里】

   <link rel="stylesheet"type="text/css" href="layout.css" />

n  @Import【写在标签里】

   @import url("layout.css");

   @import "layout.css";

四、选择器

选择器分类

五、css的权重

4个等级的定义如下：

第一等：代表内联样式（行内），如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为100。

第三等：代表类，伪类和属性选择器，如.content，权值为10。

第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

dotted ：虚线

Solid:实线