HTML5技术

沓世邦

目录

  • 1 Web前端职业前景与重要概念
    • 1.1 初识HTML
  • 2 HTML5页面的构建与简单控制
    • 2.1 DW环境与H5入门
    • 2.2 HTML5常见主体元素
  • 3 CSS3基础入门
    • 3.1 CSS3基础
    • 3.2 盒模型
    • 3.3 CSS3进阶
  • 4 实现Web前端排版的基本美化
    • 4.1 CSS文本排版
    • 4.2 控制图像和超链接
  • 5 浮动、定位与列表
    • 5.1 浮动与清除
    • 5.2 定位
    • 5.3 图像与浮动实训
    • 5.4 纵向列表
    • 5.5 横向列表
  • 6 增强型表单与简易表格
    • 6.1 表单的创建与常用控件1
    • 6.2 表单常用控件2
    • 6.3 登录表单实训
    • 6.4 表格
  • 7 CSS3与H5高级应用
    • 7.1 第一课时 CSS Sprite与渐变
    • 7.2 第二课时 变形与过渡
  • 8 pc端典型页面的设计与实现
    • 8.1 典型首页设计
    • 8.2 典型首页设计2
    • 8.3 典型首页设计之3
  • 9 多设备响应式页面的实现
    • 9.1 响应式页面开发
    • 9.2 响应式页面开发实例(1)
    • 9.3 响应式页面开发实例(2)
    • 9.4 响应式页面实训
  • 10 Web App 类页面设计
    • 10.1 Web App开发基础
    • 10.2 Bootstrap的CSS
    • 10.3 Bootstrap栅格系统
    • 10.4 Bootstrap插件
  • 11 期末考查
    • 11.1 期末考查讲解
CSS3基础

复习


本课内容介绍


CSS3基础

本课要点:

一、认识CSS

1、CSS是什么?


2、CSS的优点


3、CSS的书写注意事项


二、CSS语法


声明表示如何显示;选择器表示这些声明在哪里起作用。

三、CSS的引入方式

 1、内联样式

   将CSS样式规则书写在某个标签的“style”属性上,该类型的样式仅作用于当前标签上,作用范围虽小,但优先级最高。

   

 2、内部样式

   将CSS样式规则书写在“<style>”标签里,而<style>标签通常又定义在<head>标签内部,所以这种连接方式决定了该样式表将作用于本页面,而不能控制其他页面。


  3、外部样式

  将CSS代码单独写到一个CSS文件内,然后在网页源代码中使用<link>标签将样式文件引入到页面中,并书写在<head>区域内。不但本页可以调用,其他页面也可以调用。



四、CSS 3基本选择器


  1、通配符选择器

   用“*”表示通配符选择器,其作用是定义页面所有元素的样式。


 2、类型选择器

   指以网页中已有标签类型作为名称的选择器,如body、header和p等。



  3、类选择器

  类选择器用于定义页面中公共部分的样式,通过直接引用元素中Class属性的值而产生效果,这个应用前面总是有一个句点“.”


  4、ID选择器

   通过ID属性来调用的样式,以“#”开头,每个网页中不能有重复的ID值,就好像我们的学号不能重复一样。


例题:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>流行的浏览器</title>

<style type="text/css">

body {

font-family: Georgia;

font-size: 20px;

color: gray;

}

p{text-indent: 2em;}

.greentext{

color: #34a853;

}

#orangetext{color:orange}

</style>

</head>

<body>

<h3>各款流行的浏览器</h3>

<ul>

<li>IE浏览器</li>

<p >Internet Explorer,是微软公司推出的一款网页浏览器。2015年3月微软确认将放弃IE品牌。转而在windows 10上,用Microsoft Edge取代了IE。微软于2015年10月宣布2016年1月起停止支持老版本IE浏览器。</p>

<li id="orangetext">谷歌浏览器</li>

<p class="greentext">Google Chrome该浏览器基于其他开源软件撰写,包括WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。</p>

<li>QQ浏览器</li>

<p >QQ浏览器是腾讯公司开发的一款浏览器,其前身为TT浏览器。采用Chromium内核+IE双内核,让浏览快速稳定,拒绝卡顿,完美支持HTML5和各种新的Web标准。</p>

<li>360浏览器</li>

<p class="greentext">360安全浏览器(360 Security Browser)是360安全中心推出的一款基于IE和Chrome双内核的浏览器,360安全浏览器拥有全国最大的恶意网址库,采用恶意网址拦截技术,可自动拦截挂马、欺诈、网银仿冒等恶意网址。独创沙箱技术,在隔离模式即使访问木马也不会感染。</p>

<li>Opera浏览器</li>

<p >Opera浏览器,是一家挪威公司制作的支持多页面标签式浏览的网络浏览器,是跨平台浏览器,可以在Windows、Mac和Linux三个操作系统平台上运行。</p>

</ul>

</body>

</html>