html5 css3知识点,HTML5和CSS3知识点总结
1. 首先要分别创建html,img和css3的文件夹。css
2. html和css3的首页放在文件夹外面。还能够创建一个公共css,好比导航和页脚能够放在公共css里面,在每一个页面加上公共css超连接就能够了。减小代码的编写。html
3. 文件夹的名称要写成英文形式。也不要写成汉语拼音,html识别不出来汉字。html5
4.class与id的区别:css3
(1)、在CSS文件里书写时,ID加前缀"#";CLASS用"."(2)、id一个页面只可使用一次;class能够屡次引用。(3)、ID是一个标签,用于区分不一样的结构和内容,就象名字,若是一个屋子有2我的同名,就会出现混淆;class是一个样式,能够套在任何结构和内容上,就象一件衣服;(4)、从概念上说就是不同的:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。(5)目前的浏览器还都容许用多个相同ID,通常状况下也能正常显示,不过当你须要用JavaScript经过id来控制div时就会出现错误。浏览器
5.html中一些常见的特殊符号须要记住:空格©©;>><
6.Html5中position的定位主要分为绝对定位,相对定位,静态定位,固定定位,继承父级定位,语法分别为position:absolute|relative|static|fixed|inhret,定位以后能够设置top,bottom,left,right四个属性值,其中优先级:top>bottom,left>right工具
一.绝对定位布局
它是相对不是static最近一级父元素来进行定位的,被定位元素会脱离文档流,而后咱们能够经过left,right,top,bottom来调整元素的位置动画
特色:spa
1.彻底脱离文档流,
2.提高层级等级,
3.针对父级定位,若是父级没有定位,那就找父级上一级定位,若是父级上一级没有定位,最终以docment进行定位,
4.绝对定位通常配合相对定位使用,相对定位是父级,绝对定位是子级,
5.支持全部CSS样式,
6.提高定位元素层级的命令 z-index数字越大,越向上显示,
7.若是绝对定位的子集有浮动,能够不作清除浮动操做。
二.相对定位
也就是相对于本身在文档流中的位置进行定位。
特色:
1.不脱离文档流,原有空间位置被保留,
2.针对本身自己位置进行定位,
3.不影响元素自己属性的设置
注意:
1.若是一个定位元素,同时设置了top和bottom,top的优先级更高,会显示top的值,
2.若是同时设置Left和right的值,优先级取决于网页语言,在英语网页中left的优先级更高,会显示left的值,在阿拉伯语言网页中right的优先级更高,
3.若是一个元素设置了相对定位(甚至是作了偏移),其余元素排版时参考的依然是那个原有位置(没有设置偏移前的位置),
4.若是一个元素设置了相对定位,它的原有位置空间被保留。即便该元素作偏移,其余元素也不会占据它原有的(偏移前)的位置。
三.固定定位
是相对浏览器窗口(docment)进行定位的,一样也是脱离文档流,能够经过left,top,right,bottom来调整元素所在的位置。
特色:
1.通常用来作页面的导航部分与底部,
2.能够用来网页中插入广告和商业推广。
注意:在使用时候,尽可能使用在页面的底部,由于即便脱离文档流也不会影响布局
四,几种定位简单比较总结
1.position:relative;不会脱离文档流
2.position:absolute|fixed;脱离文档流
3.absolute是相对于父级非static进行定位
4.fixed始终是相对于浏览器窗口进行定位
定位的用途:
1.图片的叠加
2,元素的垂直居中
3.布局位置的改变
4,广告植入
8.后代选择器语法:最高代 下一代 ...子代(全部的子级)
代与代之间用空格隔开
子选择器语法:最高代>下一代>...>子代(相邻的子级)
代与代之间用>隔开
相邻兄弟选择器:同级
用+隔开
4.margin:
(1)上右下左
(2)上下,左右
(3)上,左右,下
(4)上,右,下,左
auto
浏览器计算外边距。在网页设计当中能够加一个大的div,而后设置margin:0 anto wight:xxx
length
规定以具体单位计的外边距值,好比像素、厘米等。默认值是 0px。
%
规定基于父元素的宽度的百分比的外边距。
inherit
规定应该从父元素继承外边距。
7.过渡属性(Transition)
8.html中link标记容许当前文档和外部文档之间创建链接,可是只能在head标签里面用。href设置或获取目标 URL ,rel设置或获取对象和连接目的的关系,type设置或获取对象的 MIME 类型,media设置或获取媒体类型。all 就表示all全部媒体类型的样式
11.块元素与内联元素的区别?
块级元素:div、h1-h6标题、form(只能用来容纳其余块元素)、hr、p、table、ul、ol
内联元素:aspaninput img
(1)块元素,老是在新行上开始;内联元素,和其余元素都在一行上。(2)块元素,能容纳其余块元素或内联元素;内联元素,只能容纳文本或者其余内联元素。(3)块元素中高度,行高以及顶和底边距均可控制;内联元素中高,行高及顶和底边距不可改变。
12.block(块)元素的特色:①老是在新行上开始;②高度,行高以及外边距和内边距均可控制;③宽度缺省是它的容器的100%,除非设定一个宽度。④它能够容纳内联元素和其余块元素
13.inline元素的特色:①和其余元素都在一行上;②高,行高及外边距和内边距不可改变;③宽度就是它的文字或图片的宽度,不可改变④内联元素只能容纳文本或者其余内联元素
14.逗号
(1)css中 用逗号隔开表示两个不一样类的样式类名用同一个样式;
(2)空格隔开表示从属包含关系,是当前的元素子元素;
(3)逗号隔开表示并列关系,二者之间没有任何关系,可使用同一个样式。
15. 标签的target属性规定在何处打开连接文档。
16.CSS 伪类用于向某些选择器添加特殊的效果
(1)伪类由一个冒号:开头,冒号后面是伪类的名称和包含在圆括号中的可选参数。
(2)伪元素的由两个冒号::开头,而后是伪元素的名称。
17.清除浮动的三种方法:
(1).在最后一个div后面加上一个空的div,而后在css中给定 clear:both;content:’’
(2).在css中跟最后一个浮动的div加上clear:both;
(3).在css中跟最后一个浮动的div加上display:flow-root;
18.锚连接(锚连接通常用于本页面的跳转,好比页面太长,到了尾部要瞬间到顶部,就能够用锚连接)。
19.csscss3动画有哪些实现方式?Transitions 、transforms和 Animations1.Transitions特色:平滑的改变CSS的值
2.transforms特色:变换主要实现(拉伸,压缩,旋转,偏移)3.Animations特色:适用于CSS2,CSS3
transform:translate(0,50px)沿x轴方向不变,沿y轴方向向下移动50像素;transform:scale(1.1,1.1)放大1.1倍;
Transform:rotate(90deg) transform:rotateX(30deg) rotateY(30deg)
20.伪类、伪元素以及它们的区别伪类:一、锚伪类
二、:first-child伪类
三、:lang伪类
伪元素:一、:first-line伪元素
二、:first-letter伪元素
三、:before
四、:after
21.单位有:pc mm cm px ex em
(1).16px=1em=100%
22.使用雪碧图的优势有如下几点:
(1)将多张图片合并到一张图片中,能够减少图片的总大小
(2)将多张图片合并到一张图片后,只需一次网络请求就能够将所需的资源所有下载,减少创建链接的消耗,在移动端尤其明显
雪碧图的制做与使用方法:
(1)使用图像编辑软件如Photoshop将多张图放到同一个图层并导出或使用自动化构建工具自动拼接合并后的图片
(2)引用图片时,图片地址为合并后的图片地址,经过background-position调整背景图的位置,并经过容器的宽高共同做用,来选出所需的图片
html5 css3知识点,HTML5和CSS3知识点总结相关推荐
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- html5 graphics with svg css3,HTML5 GRAPHICS WITH SVG AND CSS3
摘要: Want to create exciting HTML5 graphics without spending eternity in JavaScript? You can! This pr ...
- 各大浏览器 CSS3 和 HTML5 兼容速查表
2019独角兽企业重金招聘Python工程师标准>>> 不知不觉中,支持 CSS3 和 HTML5 的浏览器变得越来越多,甚至包括最新版的 IE,当然,所谓支持仅仅是部分支持,因为 ...
- 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对 ...
- 【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记
文章目录 页面展示 技术要点 代码实现 html代码 CSS代码 用到的图片 页面展示 本项目将使用HTML5+CSS3绘制出HTML5的logo,页面效果如下所示. 技术要点 HTML5新特性 HT ...
- 前端 html5 css3 框架,UI,分享,CSS3,HTML5,前端框架
随着HTML5和CSS3以及网页设计布局的全面翻新创新改革.让很多网页设计者和界面设计师都知道一个道理.就是去掌握一套对应的工具包.这不仅仅是未来提高工作的效率,还能更好的去处理网页整体视觉效果.界面 ...
- html5 css3浏览器,五大主流浏览器CSS3和HTML5兼容性大比拼
五大主流浏览器CSS3和HTML5兼容性大比拼 出处:快科技 2011-05-26 16:15:42 编辑:萧萧[爆料] 收藏文章 各大主流浏览器对CSS3和HTML5的支持越来越完善,曾经让 ...
- html5与css3是互联网发展趋势,五大主流浏览器CSS3和HTML5兼容性比拼
[IT168 评测]各大主流浏览器对CSS3和HTML5的支持越来越完善,曾经让多少前端开发人员心碎的IE系也开始拥抱标准.就在前几天,W3C的HTML5社区领袖Shelley宣布,HTML5的开发工 ...
- html5 graphics with svg css3,Using SVG with CSS3 and HTML5: Vector Graphics for Web Design
摘要: Unlike other image formats, SVG can be an interactive part of your web site, integrated in HTML5 ...
- 支持html5特性的浏览器,五大主流浏览器对CSS3和HTML5特性支持情况的详细清单
[IT168评估]主要主流浏览器对CSS3和HTML5的支持变得越来越完整,曾经打动了许多前端开发人员的IE系列也开始接受该标准.就在几天前,W3C HTML5社区负责人Shelley宣布HTML5的 ...
最新文章
- 06-02-测试 Office Online Server Updated 2018
- IMXRT 分散加载文件 修改OCRAM,DTCM、ITCM大小
- Django 3.2.5博客开发教程:用Admin管理后台管理数据
- codeql php,使用codeql 挖掘 ofcms
- ASP.NET中Cookie编程的基础知识
- 分别安装搭建lamp服务环境
- HOG + SVM 实现图片分类(python3)
- android传感器实现摇一摇功能
- 用PaddlePaddle(飞浆)实现车牌识别
- 拓端tecdat|R语言公交地铁路线进出站数据挖掘网络图可视化
- UE4 打包ios包失败问题
- RFM 客户价值分析
- 搜狗实验室新闻数据文本分类深度学习案例 ———Tensorflow+CNN深度学习全流程(上)
- ubantu下部署python
- 永洪BI SQL带参数查询
- 高通平台ITS:scene2_a/test_effects fail
- 申请美国计算机科学博士,美国计算机博士申请案例分析
- 689-电脑的外部设备驱动程序
- Linux数据恢复工具之extundelete
- 2020新基建人才薪资:工业互联网月薪1.81万元居首,超5G、人工智能
热门文章
- C++中的memset()函数
- springMVC上传图片并压缩
- bzoj2309 CTSC2011 字符串重排
- NLP之中文命名实体识别
- 运放输出接电容会带来的问题
- flutter运行Runt imeException: Timeout of 120000问题
- 基于dsp乘法器设计c语言,DSP in FPGA : 乘法器(一)
- 测试自己与江湖上人相像的游戏软件,楚留香手游江湖大梦云梦和上测区别 本测云梦新增介绍_游侠手游...
- 在Ubuntu 18上卸载MySQL
- python scrapy的crapy.core.downloader.handlers.http11] WARNING: Received more bytes than download 错误