初试HTML和CSS

来源：互联网发布：高淇java什么方向编辑：程序博客网时间：2024/06/01 08:21

1、HTML（Hyper Text Markup Languange）超文本标记语言。HTML文件的后缀名一般是：htm和html。

<html><head><title>这是一个标题</title></head><body>这是网页显示的内容<h1>这是网页显示的内容</h1><h1><font color="red">这是网页显示的内容</font></h1><a href="http://www.baidu.com">这是一个链接</a>        <table border=1 align="center" width="80%">        <tr>                <td>aa</td>                <td>bb</td>        </tr>        <tr>                <th>cc</th>                <th>dd</th>        </tr></table></body></html>

2、关于表单的HTML标签的介绍

Text

Textarea

Radio

Checkbox

Select

File

Hidden

Submit

Reset

Button

image

 1 <html> 2 <head> 3 <title>网页标题</title> 4 </head> 5 <body> 6 <form> 7  8     username: <input type="text" value="hello world"><br> 9     password: <input type="password"><br>10     兴趣：学习<input type="checkbox"> 11          旅游<input type="checkbox">12          睡觉<input type="checkbox"><br>13     性别：男<input type="radio" name="gender">14           女<input type="radio" name="gender"><br>15     学历：<select>16           <option>小学</option>      17           <option>初中</option>18           <option>高中</option>19           <option>大学</option>20           </select><br>21 22     评论：<textarea>23           </textarea><br>24 25     图片：<img src="http://www.baidu.com/img/bdlogo.gif"><br>26     文件上传：<input type="file"><br>27 28     <input type="submit" value="submit">&nbsp;&nbsp;&nbsp;29     <input type="reset" value="reset">&nbsp;&nbsp;&nbsp;30     <input type="button" value="button" onclick="javascript:alert('hello world');">31     32 </form>33 </body>34 </html>

注：上面的代码，<br>代表换行，&nbsp代表空格，h1到h6代表六级标题。

3、浏览器内核：Webkit（较快），trident（IE用）

4、CSS是什么

CSS stands for Cascading Style Sheets

– CSS 意思就是 层叠样式表

• Styles define how to display HTML elements

– 样式定义了HTML元素怎样去显示

• Styles are normally stored in Style Sheets

– 样式一般存储在样式表中

• Styles were added to HTML 4.0 to solve a problem

– 样式添加到HTML4.0中用来解决问题

• External Style Sheets can save you a lot of work

– 利用外部样式表可以提高你的工作效率

• External Style Sheets are stored in CSS files

– 外部样式表存储在CSS文件中

• With CSS, your HTML documents can be displayed using different output styles

– 使用CSS，你的HTML文档可以用不同的样式输出来显示

5、样式的优先级

一般说来所有样式有下面的规则(第四个最有优先性)

1. Browser default

浏览器默认

2. External style sheet

外部样式表

3. Internal style sheet (inside the <head> tag)

内嵌样式表(在<head>标签内)

4. Inline style (inside an HTML element)

行内样式(在一HTML元素内)

6、CSS语法

The CSS syntax is made up of three parts: a selector, a property and a value:

CSS的语法由三部分组成: 一个选择器，一个属性和一个值，例如：

selector {property: value}

选择器是你希望去定义的HTML元素/标签，每个属性可以有一个值，属性和值由冒号隔开，外面用大括号括起来。

如：body {color: black}

a）

如果值为多个单词则用双引号括起来

p {font-family: "sans serif"}

b）

如果你想指定多个属性，你就必须将每个属性用分号隔开，下面的例子就演示了怎样定义居中红色文字段落

 p {text-align:center;color:red}

c）

为了让样式定义更有可读性，你可以像这样分行描述属性

p{

  text-align: center;

  color: black;

  font-family: arial

d）

你可以将选择器组合。用逗号分隔每个选择器。下的例子将所有的标题元素组合起来，它们的颜色都变为绿色

h1,h2,h3,h4,h5,h6 { color: green }

e）

用选择器类你可以将同一类型的HTML元素定义出不同的样式。比如你想在你的文档中有两种不同样式的段落：一种是右对齐，另外是居中的。这就告诉你该怎么用样式来做到这点

 p.right {text-align: right}

 p.center {text-align: center}

你必须在你的HTML文档中使用类属性（才能显示出效果）

 <p class="right"> This paragraph will be right-aligned. </p>

 <p class="center"> This paragraph will be center-aligned. </p>

注意：每个HTML元素只能有一个类属性，下面的例子是不符合规范的

 <p class="right" class="center">

 This is a paragraph.

 </p>

f）

你也可以省略标签名称直接去定义，这样就可以在所有的HTML元素中使用了。下面的例子就能让所有HTML中所有带class="center"的元素居中文字：

 .center {text-align: center}

g）

下面的代码中H1和P元素都有class="center"。这就意味着这两个元素都将遵循选择器"center"的规则

 <h1 class="center"> This heading will be center-aligned </h1>

 <p class="center"> This paragraph will also be center-aligned. </p>

 请不要用以数字开头为名称的类，在Mozilla/Firefox中不能正常运作。

h）

使用id 选择器你可以为不同的HTML元素定义相同的样式下面的样式规则对任何一个带有id属性值为"green"的元素都是匹配的

 #green {color: green}

上面的规则将匹配h1和p元素

 <h1 id="green">Some text</h1>

 <p id="green">Some text</p>

下面的样式规则将匹配任何一个带有id属性值为"green"的p元素

 p#green {color: green}

上面的规则与h1元素不匹配（也就是说不会产生样式效果）

 <h1 id="green">Some text</h1>

 和class一样,id的名称的开头也不要使用数字,不然就无法在Mozilla/Firefox中正常运作了。

j）

你可以在CSS中加入解释代码用的注释，这样可以方便你以后重新编辑代码。浏览器会忽略注释，注释一般以"/*"开头"*/"做结尾，像这样：

 /* This is a comment */

p {

  text-align: center;

 /* This is another comment */

 color: black;

 font-family: arial

7、怎样插入样式表

有三种方法可以插入样式表。

• 外部样式表（External Style Sheet）

• 内嵌样式表（Internal Style Sheet）

• 行内样式（Inline Styles）

a）外部样式表

使用外部样式表是使样式应用于多张网页的理想方法。通过这个方法你只需改动一个文件就能改变整个网站的外观。使用<link>标签让每个页面都连接到样式表。<link>标签在head区域使用

 <head>

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

 </head>

 浏览器将从mystyle.css文件中读取样式定义信息，并依据它来格式化文档外部样式表可以用任何一个文字编辑器来书写。文件不应该包含任何的html标签。

并保存为一个后缀为.css的文件。下面是一个样式表文件的内容

 hr {color: sienna}

 p {margin-left: 20px}

 body {background-image:

url("images/back40.gif")}

 注意：请不要在属性值和其单位间加上空格！如果你用"margin-left: 20 px“来代替"margin-left: 20px"的话，这也许在IE6中能正常工作,但在Mozilla/Firefox或Netscape中就无法正常显示了

b）内嵌样式表

一份内嵌样式表应该在当有单独文档有特殊样式的时候使用。使用<style>标签在head区域内定义样式，像这样

 <head>

 <style type="text/css">

 hr {color: red}

 p {margin-left: 20px}

 body {background-image: url("images/back40.gif")}

 </style>

 </head>

• 浏览器将立即读取样式定义，并依据它来格式化文档。注意：浏览器一般会忽略未知的标签。这就意味着老的浏览器不能支持样式，会忽略<style>标签，但<style>里的内容会显示在页面上。在HTML注释元素中隐藏它可以来避免这类情况在老的浏览器中发生

 <head>

 <style type="text/css">

  <!-- hr {color: sienna}

  p {margin-left: 20px}

  body {background-image:

url("images/back40.gif")} -->

 </style>

 </head>

c）行内样式

使用行内样式就失去了样式表的优势而将内容和形式相混淆了。一般这类方法在个别元素需要改变样式的时候使用。

在相关的标签上用style属性来加入行内样式。样式属性可以包含任何CSS属性。例子中将展示怎样给一个段落加上左间距并将颜色改为red

 <p style="color: red; margin-left: 20px"> This is a paragraph </p>

8、超链接的样式

例：

a:link { color : green}             /* 没有动作时是绿色的 */

a:visited { color : yellow }       /* 访问过之后是黄色的 */

a:hover { color : black }         /* 鼠标放上去是黑色的 */

a:active { color : orange}       /* 鼠标点下去了但没有松开是橘黄色的 */

----参考《圣思园Java视频》

17 1