HTML与CSS基础教程:设置网页样式

需积分: 1 0 下载量 32 浏览量 更新于2024-08-17 收藏 4.38MB PPT 举报
"这篇资源主要介绍了web开发中的基础——CSS设置方式,以及HTML和CSS的基本概念和用法。" 在Web开发中,CSS(Cascading Style Sheets)扮演着至关重要的角色,它允许开发者精细控制网页元素的外观和布局。CSS设置主要有两种方式: 1. **链入外部样式表**:通过在HTML文件的<head>部分插入<link>标签,链接到一个单独的CSS文件。例如: ```html <link type="text/css" rel="stylesheet" href="style/mys.css"> ``` 这样做的好处是能够将样式和内容分离,便于管理和维护。 2. **内部样式表**:将CSS代码直接写在HTML文件的<head>部分<style>标签内。这种方式适用于小规模的项目或者需要对特定页面进行定制样式的情况。例如: ```html <style type="text/css"> .btn{display:none} #panel{margin:9px 6px 0px 0px;width:722px;} </style> ``` HTML(HyperText Markup Language)是创建网页的基础,它是一种标记语言,用于定义网页结构。HTML文件由一系列的元素组成,这些元素以开始标签和结束标签的形式存在,如`<h1>`和`</h1>`用于定义一级标题。HTML文件通常以.htm或.html为扩展名。以下是一个简单的HTML页面示例: ```html <html> <head> <title>网页标题</title> </head> <body> <h1>标题一</h1> 网页内容。 </body> </html> ``` CSS的引入极大地增强了HTML的表现力,使开发者可以通过选择器来定位并修改页面上的元素。CSS选择器包括: - **类选择器**:通过"."后跟类名来选择元素,如`.wrapper{font-size:16px;}`,然后在HTML中使用`class="wrapper"`来应用样式。 - **ID选择器**:通过 "#" 后跟ID名来选择元素,如`#cont{font-size:16px;}`,在HTML中使用`id="cont"`来应用样式。 - **标记选择器**:直接使用元素标签名来选择所有该类型的元素,如`p{color:red;}`将改变所有段落的字体颜色。 学习Web开发,可以访问如w3school等在线教程平台,它们提供了丰富的学习资源,包括HTML和CSS的详细教程,帮助初学者快速掌握基础知识。此外,JavaScript和jQuery等技术也是现代Web开发中不可或缺的部分,它们负责处理用户交互和动态效果。PHP则是服务器端编程语言,常用于构建动态网站和Web应用程序。学习这些技术,可以让你在Web开发领域更加得心应手。