HTML+CSS笔记--2

Posted 2020-07-03

1、列表前面的小图片小商标，我们可以用<s></s>来实现，s是行内块标签，

.top-page-2 ul li s{
    display: inline-block; /*s是行内标签*/
    width:14px;
    height: 12px; 
    background: url(../image/sprite.png);
    vertical-align: middle;/*让图片居中显示*/
}

对于有背景s背景图片的不要使用padding来设置列表的间距，因为这样会改变图片的位置，可转为用margin来设置相同的效果

2、a标签不能继承父标签的颜色

3、valign：垂直对齐的方式，值有：bottom top middle sub(下标) super(上标)。

4、h1+P   表示寻找H1标签后的的一个P标签，

5、first:letter  这是一个伪类，用来修饰列表的首字的样式。

6、背景的偏移量，

.top .h-top li:nth-child(1) s{
    vertical-align: middle;
    background: url(../images/icon.gif) -5px -8px;
}

一些比较小的图片可以用精灵图来合并到一张图上，然后用背景图片的偏移量的来实现不同区域的背景。

7、cursor的作用，来实现光标在地点上显示的样式：值有：default/小白，pointer/划过去是个小手样式，text/输入光标，crosshair/十字形，move/十字箭头

8、pre,严格控制文本的样式，如里面有多少空格，就会有多少空格显示空格。

9、背景右边的size background-size: auto/    cover----等比例缩放，直到正好完全覆盖到定义的背景，      contain-----等比例缩放，直到宽度或高度适应背景。-px -px ;自定义数值