/*重置样式*/
*{
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;../是上级目录