科技资讯

Document

前端基础css

css

（1）css引入方式

html 和 css 结构样式分离，写法上HTML 属性和属性值用=拼接，css 属性和属性值是：

  • css 层叠样式表
  • css 写法一 style 内联样式表
  • css写法二 内部样式
  • css写法三 外部样式表
```
 <link rel="stylesheet" href="./class1.css"> 

```html
  <style>
       /* font{
       
         color: red;
        
         font-family: "宋体";
       } */
       /* @import url('./class1.css'); */
       div{
         background-color:rgba(120, 200, 100,1);
       }
       body{
         background-image: url(./img/b.jpg);
       }

</style>
<body >
   <div style="width: 500px;height:400px;border:1px solid black;font-size: 30px;"></div>
   < color="red" size="7" face="宋体"  style="background-color: blue;">
    <font >文字标签</font>

</body>

（2）css 中的冲突、层叠、继承

  • 层叠： 同一个元素使用了不同的样式表，所有的样式进行叠加就叫做层叠
  • 冲突： 同一元素设置相同的属性会造成冲突，遵循就近原则选择属性值
  • 继承： 在子父关系中，文本样式可以被继承，布局样式不可以被继承（块及元素继承父的宽，行级不可以）
  • 颜色 color 背景颜色 background-color
    1、英语字母
    2、 十六进制
    3、rgb(0-255,0-255,0-255)
    4、rgba(0-255,0-255,0-255,0-1) a：透明度

（3）CSS 选择器

标签选择器
1.全局选择器

*{
 margin: 0;
 padding: 0;}

2.class选择器

.q{background-color: aqua;}

3.id选择器（独一无二）

#q{background-color: yellow;}

4.群组选择器

 b,a{background-color: red;}

5.层次选择器

  • 子代选择器
ul>li{color: red;}

6.后代选择器

ul li{background-color:blue}

7.去除无序列表前面的点

.uu li{list-style: none;}

8.相邻兄弟 +

.uu+a{background-color: blue;}

9.通用兄弟~

.uu>li~p{background-color: chartreuse;}

（4）伪类选择器

ui伪类，a标签使用

 /* 默认状态 */
b+a:link{background-color: yellowgreen;}
  /* 、访问过后的状态 */
b+a:visited{background-color: aqua;}
  /* 鼠标悬浮 */
b+a:hover{background-color: red;}
  /* 鼠标按下 */
b+a:active{background-color: orange;}
  /*结构伪类  */
 ul li:nth-child(3){background-color: orangered;}
 a:nth-child(4){background-color: gold;}
 ul p:nth-child(18){background-color: antiquewhite;}