css.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>
分享到：
相关推荐
这个"html_css_material-master.zip"压缩包文件提供了一套完整的教学材料，旨在帮助学习者深入理解这些关键技术。 HTML（HyperText Markup Language）是网页内容的结构标记语言，用于定义网页的基本元素和结构。在...
960_Grid_CSS Frameworks960_Grid_CSS Frameworks960_Grid_CSS Frameworks960_Grid_CSS Frameworks960_Grid_CSS Frameworks960_Grid_CSS Frameworks
html_css_javascript语法手册 html_css_javascript语法手册 html_css_javascript语法手册 html_css_javascript语法手册 html_css_javascript语法手册
css层叠样式表手册_css样式表_css层叠样式表_css样式表下载css层叠样式表手册_css样式表_css层叠样式表_css样式表下载css层叠样式表手册_css样式表_css层叠样式表_css样式表下载
Web打印是指用户通过浏览器对网页内容进行打印的操作，这通常涉及到HTML、CSS和JavaScript的协同工作。在传统的Web打印中，浏览器自带的打印功能可能因为样式丢失或者布局错乱等问题，导致打印效果不尽如人意。而 ...
HTML_CSS_JavaScript网页制作从入门到精通HTML_CSS_JavaScript网页制作从入门到精通HTML_CSS_JavaScript网页制作从入门到精通HTML_CSS_JavaScript网页制作从入门到精通HTML_CSS_JavaScript网页制作从入门到精通
ss_css2.jar一个控制器的工具类,自己写的工具类,工具类
说明：此文件为SuperPI的linux版C语言实现的源代码，已在arm平台测试ok。 功能：利用CPU的浮点运算能力来计算出π所需的时间。 使用： 1、tar -xvf pi_css5_src.tgz /...4、./pi_css5 $((1))//精确到小数点后2^25位
【标题】"Html_Css_JavaScript教程"涵盖了网页开发中的三个核心技术——HTML、CSS和JavaScript。这些技术是构建动态、交互式网页的基础，也是前端开发者必须掌握的关键技能。 【HTML】全称HyperText Markup ...
HTML5和CSS3是现代网页开发的两大核心技术，它们极大地扩展了网页的展现力和交互性。本资源提供了一份详尽的中文参考手册，旨在帮助开发者深入理解和运用这两种技术。 HTML5是HTML（超文本标记语言）的最新版本，它...
HTML_and_CSS
【标题】"DIV-CSS.zip" 提供了一个关于使用DIV和CSS进行HTML网页设计的实践案例，这在现代网页开发中是非常重要的技术。"DIV"是HTML中的一个布局元素，而"CSS"（层叠样式表）则负责定义网页的样式、布局和表现。这个...
这个主题"unigui_check_swith_css动画按钮_二"显然关注的是如何在Unigui应用中实现CSS动画效果的切换按钮，并且涉及到事件绑定。 1. **Unigui控件**： Unigui提供了丰富的用户界面控件，如按钮、复选框等，允许...
这个名为"html_css_js.rar_html css js实例"的压缩包文件，显然是一份为初学者准备的全面教程，旨在帮助他们理解并掌握这三种语言的基础及应用。 HTML（HyperText Markup Language）是网页内容的基石，它定义了网页...
HTML_5.0_+_CSS_3.0应用详解
【标题】"html_css_js_备课_2011_3_13" 提供的信息表明这是一个关于HTML、CSS和JavaScript的教学准备资料，日期为2011年3月13日。这些是Web开发的三大基础技术，用于创建交互式和动态的网页。 HTML（HyperText ...
js_html_css_jQuery_bootstrapPDF文档基础到框架 包含了html css js jquery booststrap 从简到难,讲解详细,初学者可以看懂,满足很多想学习前端的人群
【注意】1.因为文件太大，压缩分卷为两部分，此文件为第...第二部分搜“02_HTML_CSS_JavaScript网页制作从入门到精通 - 刘西杰” 2.用7z才可以解压!!! HTML_CSS_JavaScript网页制作从入门到精通 刘西杰 人民邮电出版社
标题中的“23div+css.rar_DIV_css_css div_div+css_分页”指的是一个关于网页设计的资源包，特别关注使用HTML的`<div>`元素和CSS来实现23种不同的分页导航样式。这个资源包可能包含了示例代码、图片和其他相关文档，...