css学习

css引入方式

1.写在style标签中，style标签在head中

2.css单独写成文件，用link引入

3.写在标签的style属性中，配合js使用

css选择器

标签选择器

 body {  
             display: flex;  
             justify-content: center;  
             align-items: center;  
             height: 100vh;  
             margin: 0;  
             background-color: #578087;  
         }

选中对应的标签进行美化

类选择器

 .box{
         width: 400px;
         height: 500px;
         border: 1px solid red;
         position: absolute;
         top: 20%;
         left: 35%;
     }
 <div class="box">
     修饰的内容
 </div>

id选

 #showNowTime {  
             font-size: 24px;  
             color: #333333;  
             text-align: center;  
             margin-bottom: 50px;  
         }

通配符选择器

分组选择器

通过多种方式选择多个标签设置为相同样式

 <style>
     h1,#text,.play{
         coler: red;
     }
 </style>

关系选择器

后代选择器（空格）

     ul li{
         background: red;
     }

子代选择器（>）

     ul>p{
         background: red;
     }

相邻兄弟选择器（+）

相邻兄弟选择器(+实现),选中与他相邻的下一个兄弟，只有符合条件样式才会生效

     p+b{
         color: red;
     }

通用兄弟选择器（~）

通用兄弟选择器(~)，即会选择与p同级的b标签

     p~b{
         color: red;
     }

伪类选择器

:hover

鼠标悬停时触发

:actiive

连接被点击且保持按下状态触发

:visited

链接已被访问过触发

其他伪类选择器

CSS 伪元素 | 菜鸟教程 (runoob.com)

样式优先级

相同样式优先级

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

内部样式与外部样式

内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

单一样式优先级

style行间样式 > id选择器 > class选择器 > 默认继承

!importent

提升优先级为最高，但对默认继承不起作用

css常用属性

margin

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

 margin-top:100px;
 margin-bottom:100px;
 margin-right:50px;
 margin-left:50px;
 ​
 或者
 margin:25px 50px 75px 100px;
        上    右   下    左

outline

CSS 轮廓（outline）属性 | 菜鸟教程 (runoob.com)

删除ul边距和填充

 ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }