css2-CSDN博客

本文链接：https://blog.csdn.net/qq_34921840/article/details/78080974

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   
   <link rel="stylesheet" href="../../1.css">
   
   <style type="text/css">

   </style>
</head>
<body>
   
   <div style="xx:bb;xx:cc;"></div>
   
   块元素转行内元素
   display:inline;
   div,p{//这样两个块元素就在一行了
       display:inline;
   }
   行内元素转块元素
   diaplay:block
   p span{//这样两个就不在一行了，可以设置行高
       display:block;
   }
   块，行内元素转行内块元素
   display:inline-block
   <div></div>
   <a href=""></a>
   <span></span>
   div,a,span{//这样三个都在一行了，可以定义宽高
       diaplay:inline-block;
       text-align:center;
   }
   用display:inline-block,对于不可定义宽高的行内元素，如果需要定义宽高则用改为行内块元素去定义宽高.

   层叠性：多个样式发生于同个标签上会发生冲突，这个时候最后的那个起效，覆盖前面的
   <div class="box box2">color</div>
   .box{
       color:red;
   }
   .box2{
       color:blue
   }
   最终表现出来的元素是蓝色

   继承性：前提是包含（嵌套关系）
       1.所有和文字有关的样式都可以继承，
   特殊性：
           1.h系列...不继承文字大小，浏览器会给默认大小
           默认大小=2*继承的大小（2em）
           h2是1.5em
           2.a标签（链接颜色）不能继承颜色，浏览器赋予其默认的颜色
   <div class="box">
       <p>123</p>
   </div>
   .box{//虽然是给div标签加的样式，但是p标签也有
       font:200px 微软雅黑
   }

   优先级：!important(1000以上)>行内块选择器(1000)>id选择器(100)>类选择器(10)>标签选择器(1)>默认样式(0)
           如果就想用某个方式，把这个优先级置前，在后面加！important
           .box{
               color:red !important;//把优先级提到最高
           }

   优先级特点:
       1.继承的权重和默认样式一样为0，如果自己没定义就用父级的，有定义就用自己的。
       2.权重会叠加，.class(10)<p.class(11)<#baby(100)
       #father #son(100+100)
       #father p.c2(100+1+10)

   链接伪类
       a:link{属性：值;color：red}==a{属性：值//前提是要有href标签}
       a:link{属性：值;color：red;color：red} //链接的默认状态
       a:visited{属性：值;color：red}//链接访问之后的状态
       a:hover{属性：值;color：red}//鼠标放在链接上显示的状态
       a:active{属性：值;color：red}//鼠标激活的状态
       :focus{属性：值;color：red};//获取焦点

   文本修饰
       text-decoration:none||underline(下划线)||line-through(删除线)

   a*9//一下创建多个a标签

   背景属性
       1.背景颜色：background-color:red
       2.背景图片:background-image:url("../../1.jpg");
       3.背景平铺：background-repeat：none(不平铺)||repeat-x||no-repeat(不平铺)||
                   repeat-y(沿y轴平铺)||repeat(默认：平铺)
       4.背景定位：background-position:left||right||center||top||bottom
                   特点：当只写一个属性的时候默认自动加上了center（居中）
                   left center=left=20px=20px center没有顺序要求右上角是right top，只是写一个center 就会完全居中。
                   完全写数字，第一个是x第二个是y，如果只有一个数那就是第二个是center
       5.背景是否滚动：background-attachment:scroll(背景图片滚动) ||fixed（背景图片固定）
           scroll+（background-position的属性）是根据当前图片的所在的元素内的位置，fixed+（background-position的属性）是基于整个浏览器大小的位置，所以有时候用fixed看不见图片这个时候扩大图片所在的元素大小就可以
   背景属性连写：图片不能少，其他都可以，顺序没有要求
       background:red url("") no-repeat left center scroll ;

   清除列表项ul - li前面的小符号 list-style:none
       text-indent:1em;内容的首行缩进|单位em，一个em相当于一个汉字的的大小

</body>
</html>