第一次测试HTML和CSS

2023-07-28 13:00:34

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视频》

码农公寓

相关文章