关于html、css那些事

 

html :不是一种编程语言、而是一种标记语言、

html:是通过 <h1> - <h6> 等标签进行定义的

例如:

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
html 段落是通过 <p> 标签进行定义的、

这个 <p> 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 <p>,以及一个结束标签 </p>。

例如:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
html 链接是通过 <a> 标签进行定义的
例如:
<a href="http://www.w3school.com.cn">This is a link</a>
html 图像是通过 <img> 标签进行定义的
<img src="w3school.jpg" width="104" height="142" />
<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body>,以及一个结束标签 </body>。

元素内容是另一个 HTML 元素(p 元素)。
列表定义

<p>无序列表</p>

<ui>

   <li>编写文件</li>

</ui>

<p>有序列表</p>

<ol>

   <li>编写文件</li>

</ol>

<p>定义列表</p>

<dl>

<dt>猫</dt>

<dd>一个奴役自己的动物</dd>

</dl>

表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)表格的表头使用 <th> 标签进行定义

例如:

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

 

CSS 语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义

注意:id 属性只能在每个 HTML 文档中出现一次

和 id 一样,class 也可被用作派生选择器

外部样式表

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部:

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

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

链接的四种状态:

a:link - 普通的、未被访问的链接

a:visited - 用户已访问的链接

a:hover - 鼠标指针位于链接的上方

a:active - 链接被点击的时刻

要修改用于列表项的标志类型,可以使用属性 list-style-type

表格宽度和高度

通过 width 和 height 属性定义表格的宽度和高度。

table
  {width:100%;
  }

th
  {height:50px;
  }

text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中
vertical-align 属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐
CSS 框模型
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素

内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:

* {
  margin: 0;
  padding: 0;
}

CSS 框模型实例
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

CSS 浮动实例 2 - 向左浮动的元素
在 CSS 中,我们通过 float 属性实现元素的浮动。

 

 

posted @ 2014-04-10 00:18  sun四道风  阅读(139)  评论(0编辑  收藏  举报