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是“无意义”的标签,为样式而生的。

块级:独占一行

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

<div></div>

<p></p>

<h2></h2>

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

内联

<span></span>

<a></a>

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

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

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

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

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

Style写在head标签里

<styletype="text/css">
body{	p{
background-color:red;	background-color:#599C2B;
width:500px;	height: 30px;
}	}
</style>

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

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

n  Link  【写在head标签里】

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

n  @Import【写在<styletype="text/css"></style>标签里】

   @import url("layout.css");

   @import "layout.css";

四、选择器

选择器分类

<style type="text/css">

1.html选择器	2.class类选择器     class=“类名称”	3.ID选择器            id=”id名称”	4.子元素选择器（父子关系）
Html元素{	.xijing{	#geng{	div > input{
属性名1：属性值1；	属性名1：属性值1；	属性名1：属性值1；	属性名：属性值1 属性值2  ···
属性名1：属性值2；	属性名1：属性值2；	属性名1：属性值2；	}
···	···	···
}	} <p class="xijing">在w3school</p>	} <p id="geng">在w3school</p> 在html标签里 p#geng{      background-color:red;               }	>:只找儿子辈 空格：后代（儿子辈、孙子辈···）

5.后代元素选择5.器（包含选择器）	6.组合选择器	7.伪类选择器【存在浏览器兼容性问题】
Div  input{	.box,#user{

 link 代表未访问
text-decoration: none;——生效（是否有下划线） 属性名：属性值1 属性值2  ···属性名：属性值1 属性值2  ···

visited 代表访问过的

}}

hover 代表悬浮在标签上

空格：后代     >:子元素     ，组合

border的属性： dotted ：虚线

Solid:实线

active 代表鼠标长按

  
在ie下测试

</style>

五、css的权重

4个等级的定义如下：

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

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

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

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

dotted ：虚线

Solid:实线