css.css文件:
lab1.css文件:
lab2.css
/*p元素用class='right' 靠右对齐 p元素用class='center' 局中对齐*/
p.right {text-align: right}
p.center {text-align: center}
/*对所有的p只用left对齐**/
p {text-align: left}
/*所有的h1-h6:用蓝色样式*/
h1,h2,h3,h4,h5,h6 { color: blue }
/*页面中所有class=center都用上*/
.center {text-align: center; color:red}
<html>
<head>
<title>这是网页的标题</title>
<!-- 引入外部样式表 在head标签内使用link标签 可以用相对路径也可用绝对路径 -->
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1 class="center">这是网页显示的内容</h1>
<h3 >这是网页显示的内容</h3>
<hr>
<p class="center">class="center" </p>
<p class="right"> class="right"</p>
<p> 没加class的</p>
<a href="http://www.baidu.com">这是一个链接</a><br><br>
<!--
table：表格
属性值：用单引号或者双引号都可以。
border:宽度
align:居中
width:占80%
-->
<table border="1" align="center" width="80%">
<tr>
<!--th:表示表头的信息,默认:加粗、局中 -->
<th>
aa
</th>
<th>
bb
</th>
<th>
cc
</th>
</tr>
<tr>
<td align="center">
dd
</td>
<!-- td:默认不局中 用 align="center"和 b实现th效果 -->
<td align="center">
<!-- b标签:加粗 -->
<b>ee</b>
</td>
<td align="center">
<b>ff</b>
</td>
</tr>
</table>
<!-- 表单:提交服务器要嵌套在表单form里 -->
<form>
用户名:<input type="text" value="hello world"><br>
<!-- 换行只能用br. 源代码中敲空格/换行无效 -->
密码:<input type="password"><br>
<!-- checkbox:复选框,可以选中多个 -->
兴趣：学习<input type="checkbox">
旅游<input type="checkbox">
睡觉<input type="checkbox"><br>
<!-- radio:单选按钮 name值必须一致,标识同一个组,同一个组只能单选.
name不一直还是可以多选
-->
性别：男<input type="radio" name="gender">
女<input type="radio" name="gender"><br>
<!-- select:下拉表单 只能选取其中一个-->
学历：
<select>
<!-- 下拉的每一个选项就是一个option -->
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
<option>小学2</option>
<option>初中2</option>
<option>高中2</option>
<option>大学2</option>
</select><br>
评论：
<!-- textarea:输入域 cols:长度 rows:宽度-->
<textarea cols="20" rows="5"></textarea><br>
图片：
<img src="http://www.google.com.hk/logos/2011/holiday11-hp.png"><br>
文件上传：
<input type="file"><br>
<input type="submit" value="submit">
<!-- 一个 表示一个空格 -->
<input type="reset" value="reset">
<input type="button" value="button" onclick="javascript:alert('hello world');">
</form>
</body>
<!--
WebKit:标准的内核,非微软,速度快(不是指打开速度快是html解析速度快)
Trident:非标准,微软的,网银都是用的这种.
现在出现的双核浏览器:指同时包含这两种内核的浏览器
IE9:开始向标准靠拢了,IE6:与标准偏差很大的
-->
</html>
<html>
<head>
<title>这是网页的标题</title>
<!-- 内嵌样式表 -->
<style type="text/css">
.center{text-align:center;color:red}
.right{text-align:right;color:blue}
</style>
</head>
<body>
<h1 class="center">这是网页显示的内容</h1>
<hr>
<p class="center">class="center" </p>
<p class="right"> class="right"</p>
<p> 没加class的</p>
</html>
<html>
<head>
<title>这是网页的标题</title>
</head>
<body>
<!-- 行内样式 -->
<!-- 总共3中使用方法 -->
<!-- 内部样式覆盖外部样式. 行内样式->内部样式->外部样式 -->
<!-- 距离左右20px,红色 -->
<h1 style="color:blue;margin-left:20px;text-align:center">这是网页显示的内容</h1>
</html>
<html>
<head>
<title>这是网页的标题</title>
<style type="text/css">
<!-- 第四种方法:导入. 一般就用3种 导入方式很少用-->
@import css.css;
</style>
</head>
<body>
<h1 class="center">这是网页显示的内容</h1>
<h3 >这是网页显示的内容</h3>
<hr>
<p class="center">class="center" </p>
<p class="right"> class="right"</p>
<p> 没加class的</p>
<a href="http://www.baidu.com">这是一个链接</a><br><br>
<!--
table：表格
属性值：用单引号或者双引号都可以。
border:宽度
align:居中
width:占80%
-->
<table border="1" align="center" width="80%">
<tr>
<!--th:表示表头的信息,默认:加粗、局中 -->
<th>
aa
</th>
<th>
bb
</th>
<th>
cc
</th>
</tr>
<tr>
<td align="center">
dd
</td>
<!-- td:默认不局中 用 align="center"和 b实现th效果 -->
<td align="center">
<!-- b标签:加粗 -->
<b>ee</b>
</td>
<td align="center">
<b>ff</b>
</td>
</tr>
</table>
<!-- 表单:提交服务器要嵌套在表单form里 -->
<form>
用户名:<input type="text" value="hello world"><br>
<!-- 换行只能用br. 源代码中敲空格/换行无效 -->
密码:<input type="password"><br>
<!-- checkbox:复选框,可以选中多个 -->
兴趣：学习<input type="checkbox">
旅游<input type="checkbox">
睡觉<input type="checkbox"><br>
<!-- radio:单选按钮 name值必须一致,标识同一个组,同一个组只能单选.
name不一直还是可以多选
-->
性别：男<input type="radio" name="gender">
女<input type="radio" name="gender"><br>
<!-- select:下拉表单 只能选取其中一个-->
学历：
<select>
<!-- 下拉的每一个选项就是一个option -->
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
<option>小学2</option>
<option>初中2</option>
<option>高中2</option>
<option>大学2</option>
</select><br>
评论：
<!-- textarea:输入域 cols:长度 rows:宽度-->
<textarea cols="20" rows="5"></textarea><br>
图片：
<img src="http://www.google.com.hk/logos/2011/holiday11-hp.png"><br>
文件上传：
<input type="file"><br>
<input type="submit" value="submit">
<!-- 一个 表示一个空格 -->
<input type="reset" value="reset">
<input type="button" value="button" onclick="javascript:alert('hello world');">
</form>
</body>
<!--
WebKit:标准的内核,非微软,速度快(不是指打开速度快是html解析速度快)
Trident:非标准,微软的,网银都是用的这种.
现在出现的双核浏览器:指同时包含这两种内核的浏览器
IE9:开始向标准靠拢了,IE6:与标准偏差很大的
-->
</html>
lab1.css文件:
/*body元素:背景红色*/
body{background-color: red}
/*h1:字体36pt*/
h1{font-size: 36pt}
/*h2:蓝色*/
h2{color: blue}
/*p:距离左右50px*/
p {margin-left: 100px}
<html>
<head>
<!-- 外部样式表 -->
<link rel="stylesheet" type="text/css" href="lab1.css">
</head>
<body>
<h1>hello world</h1>
<h2>welcome to shengsiyuan</h2>
<p>zhangsan lisi wangwu</p>
</body>
</html>
lab2.css
/*body:背景:白色*/
body {background-color: white}
/*h1 绿色 字体:20pt*/
h1 {color:green; font-size: 20pt}
/*hr:红色*/
hr {color:red}
/*p:字体11pt,距离左右15px*/
p {font-size: 20pt; margin-left: 15px;color:red}
/*鼠标没放上去*/
a:link {color:green}
/*访问过了*/
a:visited {color:yellow}
/*鼠标放上去*/
a:hover {color: black}
/*鼠标点了没松开*/
a:active {color: blue}
<html>
<head>
<link rel="stylesheet" type="text/css" href="lab2.css">
</head>
<body>
<h1>hello world</h1>
<hr>
<p>welcome to shengsiyuan</p>
<p><a href="http://www.sina.com">This is a link</a></p>
</body>
</html>
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
