css学习5

1.可以使用css的属性content进行修改内容，其实就是进行替换。
①进行替换成图片content: url(“check_selected_green.png”)
②当添加的是string的时候，并没有成功，但是给before添加内容是成功的，比如div:before{content:“eeee”}
③同理 a:after{content:attr(href)} 这样能获取到a的属性的内容，然后显示出来。
④能够使用counter计数器。
ol { list-style:none;} /清除默认的序号/
li:before {color:#f00; font-family:Times New Roman;} /设计层级目录序号的字体样式/
li{counter-increment:a 1;} /*设计递增函数a，递增起始值为1 */
li:before{content:counter(a)". ";} /把递增值添加到列表项前面

2.使用@font-face自定义字体，如果在浏览器中没有响应字体，就会自动加载。但是如果直接使用网络连接地址是没有效果的。但是将字体下载下来，设置本地路径，应该将src中改为url("./lexograph.eot")就能使用了。

/* 引入外部字体文件 */
@font-face {
    /* 选择默认的字体类型 */
   font-family: "lexograph";
   /* 兼容IE */
  src: url(http://randsco.com//fonts/lexograph.eot);
  /* 兼容非IE */
  src: local("Lexographer"), url(http://randsco.com/fonts/lexograph.ttf) format("truetype");
}
h1 {
   /* 设置引入字体文件中的lexograph字体类型 */
   font-family: lexograph, verdana, sans-serif;
    font-size:4em;
}

3.如果设置宽度，使用%是按照父元素的宽度作为基础进行计算，如果是使用em，那么就是以他包含的字体大小作为基础计算。

4.text-align属性只能作用于文本等行内对象，但无法对块元素进行对齐操作。
vertical-align，仅能使用在单元格或图像显示，因此要在样式添加display:table-cell。但是在ie上却可能不能很好支持，进行尝试如果是使用center，其实也是无效，但是bottom是有效的。因此对于单行的文本可以使用文本的高度和行高相同。也就是line-height 和height相等。

5.设置显隐性
visible:hidden 仍然占据原有的位置
display:none 不会占据位置
opacity:0 直接设置为透明

6.对于一段文章的设置首字母的大写或其他的设置，可以设置first-letter等

.first:first-letter{
  font-size: 50px;
  color: yellow;
  background-color: black;
  float: left;
  line-height: 1.2em;
}

7. 通过设置hsl来进行设置颜色
   h:hue表示色调，
   s:saturation表示饱和度
   l:lightness表示亮度
   background-color: hsl(1,70%,38%);

8.①background-attachment能够固定显示在浏览器的位置。不会随着进度条滚动而滚动。
②但我们可以固定外层div，然后设置背景，然后设置overflow:scroll。这样当内容滚动的时候，背景也不会滚动。