美文网首页
Html5课堂总结

Html5课堂总结

作者: 半度微凉_3ada | 来源:发表于2017-05-29 21:16 被阅读0次

/*重置样式*/

*{

margin: 0;

padding: 0;

css的重置样式主要是因为html标签在浏览器中都有各自的默认样式,比如p标签会有上下边距,strong标签有字体加粗样式。不同浏览器的默认样式之间也会有差别,例如:ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefor下,它的缩进是通过padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来烦恼,影响开发效率。所以解决的方法就是通过标签重新定义标签样式,“覆盖”浏览器的css默认属性

把body的内外边框的初始都设置为零

/*页面的公用样式*/

/*清除a标签的下划线*/

a {

text-decoration: none;

}

/*清除ul,ol标签的样式*/

ul,ol{

list-style: none;

}

/*清除浮动*/

.clearfix{

clear:both;

公用样式是自己自定义的直接可以拿来用

可以提供有关页面的信息,比如针对搜索引擎和更新频度的描述和关键词

meta的name属性主要用于网页的描述,与之对应的属性值为content,content的内容主要是便于搜索引擎机器人查找信息和分类信息

meta标签的name属性语法格式:

name的属性常用的有keywords(关键字)和description(网页内容描述)

Keywords用来告诉搜索引擎你网页的关键字是什么

description用来告诉搜索引擎你网页的主要内容是什么

display的用法:display是强制转换标签,有三个值分别是inline-block/inline/block;

inline-block是转换行内块元素

inline是默认的行内元素

block是块元素

vertical-algin:middle;是垂直居中方式,可以使图片和文字保持统一水平线

除了middle之外还有两个常用的值:

top把元素的顶端与行中最高元素的顶端对齐

bottom把元素的顶端与行中最低的元素的顶端对齐

overflow:hidden;隐藏溢出来的内容,也可以用来清除浮动

outlin设置4个边框的样式,outline: none;清除边框的样式

background-position:0 0;设置背景图片位置,X轴和Y轴都是用负数表示,单位px

background:url() no-repeat ;

no-repeat图片不平铺

margin属性设置一个元素的所有外边距的的宽度或者设置各边上外边距的宽度,该属性有1到4个值

margin: 5px 10px 15px 20px;表示上外边距是5px,下外边距10px,左外边距15px,右外边距是20px;

margin: 10px 15px 20px;表示上外边距是10px,左右外边距是15px,下外边距是20px;

margin:0auto;表示上下外边距是0px,左右外边距是自动,这也是是定宽居中的条件;

margin: 10px;表示上下左右外边距都是10px;

伪类:hover选择器用于选择鼠标指针浮动在上面的元素

foucs选择器是用于选取获得焦点的元素

相邻兄弟选择器:例:h1 + p选择紧接在h1后面的元素,h1和p拥有共同的父元素

相邻兄弟选择器使用了+号,即相邻兄弟结合符

./css/index.css;./表示当前目录;../css/index.css;../是上级目录

相关文章

  • Html5课堂总结

    /*重置样式*/ *{ margin: 0; padding: 0; } css的重置样式主要是因为html标签在...

  • html如何给图片添加动态的文字说明

    前言   之前发过一个html5的学习帖子《html5 学习总结》,帖子内容主要是介绍一些html的基础概念和注意...

  • cookie 和session 的区别

    之前没有用过session,只用过HTML5中localStorage(以前总结过sessionStorage 、...

  • 面试题总结(概念篇

    面试题总结(概念篇) HTML [if !supportLists]1、[endif]请列举HTML5的新特性 [...

  • HTML5 设计原理笔记

    今天拜读了HTML5 设计原理,算是重新认识了html5,这里做下笔记总结。 设计原理设计原理本质上是一种信念、一...

  • HTML5跟HTML的区别

    越来越多的系统和应用平台选择使用html5作为制作标准,网页制作被纳入其中,从各种平台的总结来看,HTML5两大特...

  • 课堂总结

    这节课梁老师让我们老了一张测试卷,我基本上都是做对的。就是有一两题是不会的,然后就梁老师说过之后我就懂了

  • 课堂总结

    Http://www.imiker.com 1.Classify your handing issues 2. M...

  • 课堂总结

    在今天,我们又扮演了小老师的角色,开始讲自已组的题目。 时间慢慢地走远,可不知什么时候,老师让我朋友去讲7的倍数特...

  • 课堂总结

    这是第二节小丁老师的科学课,这次小丁老师让我们把纸折成八分份。把第一单元的八个标题抄上去想一想为什么要按照这样的顺...

网友评论

      本文标题:Html5课堂总结

      本文链接:https://www.haomeiwen.com/subject/syrlfxtx.html