HTML 5新元素和CSS

Html5 新元素

多媒体元素

video/audio:

格式例子：

属性：

canvas元素

　　Canvas标签定义图形，用于图形的绘制，使用 js来绘图

拖放drag和drop

　　拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

　在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

语义元素：

　　一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例: <div> 和 <span> - 无需考虑内容.

语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

Html5中新的语义元素

<footer> 定义section或document的页脚

<header> 定义了文档的头部区域

<nav> 定义了导航链接的部分

<section> 定义文档中的节（section，区段）

css: 层叠样式表美化页面修改标签的样式

写法分类：

1、内联：写在标签里面以属性的形式表现属性名style

格式例如：<span style=" "> </span>

排版专用标记:<div>与<span>

这两个标签都是用来设置涵盖一个区块为主.区块就是表示一行以上的数据.如果没有一样,则<span> 与</span>该数据显示前后都不会跳行.

2、内嵌：写在head标签里面以标签的形式表现标签名style

内嵌式排版中所有的样式定义都必须在<style>..</style>之间,而<style>..</style>又必须在<head>..</head>之间.

选择器：找元素通过各种方式例如：标签名 id属性值

选择器格式

选择器{

样式属性：样式值；

}

选择器类型

1.通用选择器： *｛｝选择器选择所有元素

例子：选择器选择所有元素

*{padding: 0px;margin:0px;
}

选择器也可以选择另一个元素内的所有元素:

例如：

div *{ background-color:yellow; }

2.标签选择器：标签名{} 通过标签名找标签

3.id选择器： #id属性值｛｝通过id属性值找元素关键符号

<!DOCTYPE html>
<html><head><style type=”text/css”>#firstname{background-color:yellow;}</style></head><body><div ><p id="firstname">My name is Donald.</p></div></body>
</html>

结果为：

4.class选择器 : .class属性值｛｝通过class属性值找元素关键符号

例子：

<!DOCTYPE html><html><head><style type="text/css">.intro{background-color:yellow;}</style></head><body><h1>Welcome to My Homepage</h1><div class="intro"><p>My name is Donald.</p><p>I live in Duckburg.</p></div><p>My best friend is Mickey.</p></body></html>

结果为：

5.后代选择器选择器1 选择器2｛｝

例子：

#div div{width: 50px;height: 50px;background: red;}

6.子类选择器选择器1 > 选择器2｛｝

例如：

#div > div{width: 50px;height: 50px;background: red;}

7.并列选择器1 ，选择器2.. ｛｝

例如：

#dd , #ddd{background: red;}

8.伪类选择器选择器：伪类 hover

例如：

#d:hover a{background: red;}

9.其他选择器:

对比选择器：

例子：

　　选择所有带有target属性的 <a>元素

a[target]{ background-color:yellow;}

:last-child

例子：指定父元素中最后一个p元素的背景色：

p:last-child{background:#ff0000}

"行内"和"内嵌式"排版定义的优先级:

CSS 规定,范围越小,优先级越高.

优先级由小到大排列:

行内
class和id定义型
标记定义行

　　　　　　id 的优先级高于class级

权值：

行内：权值1000！

id：权值100！

class：权值10！

标签：权值1！

*：权值0！

权值是可叠加，例如：

#div .class 优先级大于 .class

3、外部引用：引入外部文件

写在head标签里面以标签的形式标签标签名 link

格式:

 <head><link rel="stylesheet" type="text/css" href=URL /></head>

外部引用优点：

更好的书写css样式；

避免相同元素在不同页面需要重复定义样式问题

转载于:https://www.cnblogs.com/lzw123-/p/9146608.html

HTML 5新元素和CSS相关推荐

响应式布局（响应式网页的构成bootstrap框架）
一.响应式布局 1.概念响应式又叫自适应网页,可以根据网页窗口的调整而自动布局,不会导致页面效果的错乱,主要是针对移动端浏览器:通过响应式布局,可以使一套代码同时兼容多个尺寸的屏幕 2.响应式网页的 ...
20180814 实习小结关于前端
本篇博客采用询问的方式来完成复习,包括目前前端学习的所有知识点 1.什么是HTML 2.什么是HTML标签 3.HTML文档是什么 4.html标题 5.html图像 6.html段落 7.html链 ...
html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
html鼠标悬停出现新元素,CSS：我如何将鼠标悬停在一个元素上，并显示另一个元素？...
我有一个导航面板,当您将鼠标悬停在灯具上时,它会显示从主导航面板下拉的面板中的前5个灯具.CSS:我如何将鼠标悬停在一个元素上,并显示另一个元素? 我试图实现这个使用CSS与:hover. 这是:h ...
使用HTML CSS完成初步的页面,任务九：使用HTML/CSS实现一个复杂页面(示例代码)
任务目的通过实现一个较为复杂的页面,加深对于HTML,CSS的实战能力实践代码的复用.优化任务描述整个页面内容宽度固定,但头部的蓝色导航和浏览器宽度保持一致任务注意事项只需要完成HTML, ...
css rem 大屏开发_px和em、rem单元如何选择？
通常在网站开发过程中,会遇到一系列的问题,尤其是现在终端设备丰富的今天来说,在相对字体里面通常有三种字体单位不知道让开发人员如何进行选择?分别是px和em.rem.跟着我们往下看! 网站建设并非工业设 ...
为什么CSS使用假元素？
本文翻译自:Why does CSS work with fake elements? In my class, I was playing around and found out that CSS ...
利用css‘content实现指令式tooltip文字提示
直接上图分析执行流程鼠标移入节点检测是该节点是否存在开启实现tooltip实现的标识(类名,属性等) 检测主题.位置(类名,属性等) 生成 / 显示气泡借鉴他人让我们先来看看element- ...
css伪类与伪元素区别
伪类伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰. 伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标 ...

HTML 5新元素和CSS

HTML 5新元素和CSS相关推荐

最新文章

热门文章