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>
<p style="font-size:20pt;color:red;text-align:center">排版样式</p>
排版专用标记:<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样式;
避免相同元素在不同页面需要重复定义样式问题
最新文章
- vue2.0 组件之间的数据传递
- 【Win10应用开发】相对布局(RelativePanel)
- yii2.0 Activeform表单部分组件使用方法
- TortoiseGit-创建分支、合并分支
- java_final关键字的使用
- python webdriver测试报告
- 转 wordpress搭建
- LeetCode(2) || Add Two Numbers &;&; Longest Substring Without Repeating Characters
- LaTeX中参考文献管理以及注意事项
- 获取当前元素节点的position和宽高(兼容)
- (摘)Zebra打印机异常处理
- Android学习之AutoCompleteTextView和MultiAutoCompleteTextView
- JS Fetch
- Zookeeper到底是干嘛的
- STL之stack容器
- clientWidth,offsetWidth,scrollWidth区别
- ZooKeeper的安装和API
- 如何在 Azure 门户中将托管数据磁盘附加到 Windows VM
- MVC实现多选下拉框,保存并显示多选项
- javascript中数组的强大用法&#183;
热门文章
- 在 .NET Framework 中使用 StringBuilder 类
- 洛谷P2911 [USACO08OCT]牛骨头Bovine Bones【水题】
- sql server 查询练习
- [JLOI2012]树 倍增优化
- Cannot add or update a child row:
- Vue 3 --安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
- Python+Selenium----处理登录图片验证码
- python入门之socket代码练习
- 【Linux】Linux常用命令大全
- linux增加/删除虚拟IP地址