CSS部分样式补充

1、text-align(控制文本的对齐方式)

• text-align: justify;可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。

• text-align: center;可以让文本居中对齐。

• text-align: right;可以让文本右对齐。

• text-align: left;是text-align的默认值，它可以让文本左对齐。

2、strong标签(加粗文本)

<strong>清华大学</strong>

3、u 标签(给文本添加下划线)

<u>博士</u>
 <!--添加了u标签后，浏览器会自动给元素应用text-decoration: underline;
取消：text-decoration:none;
-->

4、em 标签(强调文本)

  <p><em>爱因斯坦</em></p>
 <!--em标签来强调文本。由于浏览器会自动给元素应用font-style: italic;，所以文本会显示为斜体-->
  

5、s 标签(删除文本)

<h4><s>CSS</s></h4>
<!--添加了s标签后，浏览器会自动给元素应用text-decoration: line-through;-->

6、hr 标签(创建水平线)

 <hr>

7、box-shadow(给盒子添加阴影)

/*多重阴影(blur-raduis和spread-raduis是可选的)*/
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
/*
    offset-x阴影的水平偏移量；
    offset-y阴影的垂直偏移量;
    blur-radius模糊距离；
    spread-radius阴影尺寸；
    颜色
 */

8、opactiy(透明度)

/*
  1完全不透明
  0完全透明
*/
opactiy(0.7)

9、text-transform(添加大写效果)

text-transform:uppercase;
/*
lowercase	"transform me"
uppercase	"TRANSFORM ME"
capitalize	"Transform Me"
initial	    使用默认值
inherit	    使用父元素的text-transform值。
none	    Default:不改变文字
*/

10、line-height(设置行间的距离，即每行文字所占据的垂直空间)

11、:hover伪类选择器(鼠标悬停状态样式)

//悬停在a标签后，显示文本颜色为蓝色
a:hover{
    color:blue;
  }

12、z-index(更改重叠元素的位置 数值大的元素优先于数值小的元素显示)

13、margin(将元素水平居中)

• margin值设置为auto(块级元素居中)
• display属性为block(将行内元素转化为块级元素)

14、hsl(调整颜色的色相)

/*      色相( 0 到 360 度)  饱和度(0-100%的数值) 亮度(0-100%的数值)*/
红	hsl(0, 100%, 50%)
黄	hsl(60, 100%, 50%)
绿	hsl(120, 100%, 50%)
蓝绿	hsl(180, 100%, 50%)
蓝	hsl(240, 100%, 50%)
品红	hsl(300, 100%, 50%)

15、linear-gradient(线性渐变)

/*第一个参数指定了颜色过渡的方向 - 它的值是角度，90deg 代表垂直渐变*/
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);

16、repeating-linear-gradient(线性渐变创建条纹元素)

  background: repeating-linear-gradient(
      45deg,/*渐变的方向*/
      yellow 0px,/*开始于 0 像素位置的yellow*/
      yellow 40px,/*距离开始(0px)于40px位置的yellow*/
      black 40px,/*距离开始(40px)于40px位置的yellow*/
      black 80px/*距离开始(80px)于40px位置的yellow*/
      /*相对于上一个颜色的位置的距离*/
    );

17、transform里面的scale()函数，可以用来改变元素的显示比例

/*小球*/
.ball { 
    width: 40px;
    height: 40px;
    margin: 50 auto;
    position: fixed;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    border-radius: 50%;
  }
  
  #ball2 {
    left: 65%;
    transform:scale(2);/*将小球放大两倍*/
  }

18、transform里面的skewX()和skewY();函数，可以用来改变元素沿着 X 轴（横向）和Y轴（纵向)翻转指定的角度。

 #bottom {
    background-color: blue;
    transform:skewX(24deg);/*元素应该沿着 X 轴翻转 24 度*/
  }
   #bottom {
    background-color: blue;
    transform:skewY(24deg);/*元素应该沿着 Y 轴翻转 24 度*/
  }

欢迎访问我的个人博客