前端学习：css常用属性

一、文本属性

网页基本组成：文字、图片，再有就是视频，音乐等。

文本属性有（请忽略示例用的属性值）：

字体大小   font-size: 20px;

是否加粗   font-weight: bold;

字体颜色   color: red;

字体  font-family: 'Courier New', Courier, monospace;

首行缩进  text-indent: 2em;

行高  line-height: 30px;

文本修饰  text-decoration: line-through;

字符间距  letter-spacing: 10px;

效果图展示：

二、背景属性

网页的图片可以通过img标签添加，也可以通过给元素添加背景实现（background-images）

通过img标签添加图片会在网页上占位置，但是背景图片不会。

引用图片  background-image: url(../img/01.jpg);

设置图片大小  background-size: 500px 500px;

图片平铺   background-repeat: no-repeat;

图片定位    background-position: center;

效果图展示：

表面上平平无奇，实际上却是经过特殊设置的。

当容器大小小于图片大小时，图片只会展示一部分。

当容器大小大于图片大小时，图片会完全展示并且自我复制拼接，铺满整个容器。

 

 

所以要设置background-repeat:no-repeat;来限制图片不平铺，只显示一张图片，在通过设置图片大小以及定位来达到我们想要的效果。

拓展：

有的时候会见到一些元素的纯色背景或者背景图片有种透明效果。

那是通过 opacity属性来实现的。opacity属性值在0~1之间，0是完全透明，只不过这种设置方式会将元素内的其他元素一同透明，就是图片透明了，里面的文字也一起透明，最终效果并不好看。

在网上找了下其他方法试了试，验证了：代码抄都能抄错，以及我错哪了，为什么会这样。

网上大哥的方法我试了试，并没有达到想要的效果，而且我连我错哪儿都没想明白。

于是我就只能退而求其次，选择用遮罩来达到类似的效果。

正常情况下：

 

鼠标放上后：

 

 我是加了个:hover的伪类选择器，想看看进阶效果，去除选择器能看到图片是加了个遮罩，不是改变了透明度，但是也有一点点类似效果吧。

我又找了下，也算是找到一种透明层效果的方法，网络上大哥给的方法是

<style>
        .jk::before {
            content: "";
            background-image: url("../img/01.jpg");
            background-size: 500px 500px;
            background-repeat: no-repeat;
            width: 500px;
            height: 500px;
            position: absolute;
            top: 0px;
            left: 0px;
            opacity: 0.7;
            z-index: -1;
        }
 
        .jk {
            position: relative;
            width: 1539px;
            height: 871px;
            /* box-shadow: 10px 10px 5px #888; */
            /* border: 1px solid #666; */
        }
    </style>

这是我找到最简单的一个透明层方法了，关键属性是z-index;

效果展示：

记下来记下来。