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）是网页内容的结构标记语言，用于定义网页的基本元素和结构。在...
标签“div aspnet__div_css__ css_css_div_css_div_asp_p”进一步强调了关键主题，即元素在ASP.NET环境下的应用，以及CSS用于样式化和其他HTML元素，如标签。 压缩包内的文件名称列表揭示了包含的具体学习材料： 1....
css层叠样式表手册_css样式表_css层叠样式表_css样式表下载css层叠样式表手册_css样式表_css层叠样式表_css样式表下载css层叠样式表手册_css样式表_css层叠样式表_css样式表下载
Web打印是指用户通过浏览器对网页内容进行打印的操作，这通常涉及到HTML、CSS和JavaScript的协同工作。在传统的Web打印中，浏览器自带的打印功能可能因为样式丢失或者布局错乱等问题，导致打印效果不尽如人意。而 ...
《深入理解CSS与HTML：构建高效布局》 在网页设计领域，CSS（层叠样式表）与HTML（超文本标记语言）是构建网页结构和样式的两大基础技术。本资料包"div+css.rar"专注于讲解如何利用CSS与HTML进行有效的页面布局，...
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位
DISCUZ!7.0_CSS手册_扩展篇.pdf
在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、XHTML等）文档呈现方式的样式表语言。本压缩包中的"CSS.zip"包含了一个关于CSS鼠标的交互效果，特别是当鼠标经过图像时实现颜色变换...
在这个名为"HTML_CSS.rar_html注册css"的压缩包中，包含了一个名为"HTML_CSS.pdf"的文件，很可能是关于HTML与CSS结合使用的教程或参考资料。 HTML（HyperText Markup Language）是一种标记语言，用于构建网页的结构...
HTML_and_CSS
《CSS2.0 API详解与应用指南》 CSS2（Cascading Style Sheets Level 2）是Web设计中用于控制网页样式的一种核心技术，其API（Application Programming Interface）为开发者提供了丰富的样式设定和页面布局功能。在...
这个主题"unigui_check_swith_css动画按钮_二"显然关注的是如何在Unigui应用中实现CSS动画效果的切换按钮，并且涉及到事件绑定。 1. **Unigui控件**： Unigui提供了丰富的用户界面控件，如按钮、复选框等，允许...
标题中的"css-template.rar"指的是一个使用CSS（层叠样式表）编写的模板，而"asp CSS_css template_css模板_div template"则暗示这个模板可能是为ASP（Active Server Pages）开发的网站设计的，包含了CSS布局和div...
HTML_CSS标准教程，便于学习HTML_CSS
【标题】"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 从简到难,讲解详细,初学者可以看懂,满足很多想学习前端的人群
标题 "divisima_html_js_css_" 暗示我们正在讨论一个基于HTML、JavaScript和CSS构建的网站模板或设计框架，而"gotovii_shablon_saita_html_and_js_and_css"进一步证实了这一点，这表明是一个现成的网站模板，集成了...