首行缩进2字符:{text-indent:2em;}
水平居中:{text-align:center;}
两端对齐:{text-align:justify;}
垂直居中:{vertical-align: middle;}
字间距2字符:{letter-spacing:2em;}
行间距2倍:{line-height:2;}
首字母大写及变色p:first-letter{font-size:4em;color:blue;}
2.导航栏固定在页面某处(相对于<body>):
{position:fixed;left: px;top: px;}
3.块级元素与行内元素:
常见的块级元素:<div>、<ul>、<ol>、<li>、<dl>、<dt>、<h1>~<h6>、<p>
常见的行内元素:<img>、<input>、<select>、<strong>、<span>
块级元素内部不能包含其他块级元素。
块级元素与行内元素可通过{display:inline;}与{dispay:block;}进行转换。
4.少数html元素的margin和padding默认值不为0:
<body>、<p>、<ul>、<li>
5.css样式优先级概括:
(1)由高到低:内联样式(直接写在html元素内的样式:style="")>id选择器>class选择器>元素;
(2)引入的css样式高于写在html内的样式(<style type="text/css">);
(3)组合样式优于继承样式。
(4)权值相同时,标有important的优先级高。
(5)权值比较不能盲目的计算,如10个id权值似乎与1个style权值相等,实则不然。style、id、class、元素是16进制,即相互间的进位为256位,所以1个style优先级远远高于10个id。
6.减少页面加载时间的常用方法:
(1)尽量不用后代选择器和子选择器。
#id ul li.class{ } 后代选择器;
#id>.class{ }子选择器。
css运行是从右向左的,如后代选择器,运行时先找到.class,再依次找到li、ul、#id,写的层级越多执行速度越慢,但这种方式覆盖性更强,迫不得已时可用。
(2)雪碧图:减少图片加载次数。(稍后有详尽介绍)
(3)图片设定height和width值,免去浏览器加载时边加载边计算。
(4)使用gulp,压缩代码及图片。