2021-03-31

CSS总结

1.为什么要学习CSS呢？

略

2.CSS的发展史

略

3.CSS的入门

略

4.三种导入CSS方法

1.行内样式 ：在标签元素中，编写一个Style属性，编写样式即可-->
<h1 style="color:red">我是仙女</h1>
2.内部样式： 
<style>
        h1{
           color: pink;
        }
    </style>
3.外部样式 <link rel="stylesheet" href="CSS/style.css">

5.三种基本选择器

1.标签选择器  
/*  标签选择器，会选择页面上的所有标签
        标签选择器弊端：就是想让h1变色，而h2不变色是做不到的*/
        h1{
            color: chocolate;
            border-radius: 20px;
            background: pink;
        }
2.类选择器
 /*  类选择器的格式  .class的名称{}
        好处：可以多个标签归类，是同一个class
        */
3.id选择器
 /*id选择器格式：#+id名称
        id选择器：id必须保证全局唯一！
        优先级：
        不遵循就近原则，固定的
        id选择器>class选择器>标签选择器
         */

6.层次选择器

1.后代选择器：
 body p{
            background: red;
        }
2.子选择器
body>p{
    backgroud:red;
}
3.相邻兄弟选择器
.active+p{
    backgroud:red;
}
4.通用选择器
/*通用选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
background:green;
}

7.结构伪类选择器

1./* UL的·第一个选择器*/
ul li:first-child{
    background: pink;
}
2./* UL的·最后一个选择器*/
        ul li:last-child{
            background: red;
        }

8.属性选择器

id+class:
 /*属性名，属性名=属性值（正则）
        正则表达式：
        =绝对等于
        *=包含这个元素
        ^=以这个开头
        $=以这个结尾
        */
         /*存在id属性的元素  id[]{}*/
       a[id]{
            background: red;
        }
       a[id=first]{
            background: chocolate;
        }
        class 中有links的元素
        a[class*="links"]{
            background: cyan;
        }
        /*选中href中以http开头的元素*/
        a[href^=http]{
            background: lightpink;
        }
          a[href$=pdf]{
            background: black;
        }

9.字体样式

<!--   font-family字体
font-size字体大小
font-weight字体粗细
color字体颜色
 -->

10.文本样式

1. 颜色 color rgb rgba

2. **文本对齐的方式  text-align: center;**

3. **首行缩进 text-indent:2em;**

4. **行高  line-height: 100px;  单行文字上下居中！**

5. 下划线（装饰） text-decoration: underline;
去下划线： text-decoration: none;

6. 文本图片水平对齐：vertical-align: middle;

11.阴影

/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径 */
#price{
    text-shadow: blueviolet 10px 2px 2px;
}

12.超链接伪类 a:hover（正常情况下，a, a:ahover）

/*鼠标悬浮的状态(重点)*/
        a:hover{
            color: pink;
            font-size: 50px;
        }

13.列表

/*ul li
list-style:
none去掉圆点
circle:空心圆
decimal:数字
square：正方形
*/
ul{
    background: gray;
}
ul li{
    height:30px;
    /*去圆点： list-style: none;*/
    list-style: none;
    text-indent: 1em;

}

14.背景、背景颜色 、渐变颜色

15.盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N9TVJ4RL-1617203713792)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210322201646201.png)]

margin:外边距  /*body总有一个默认值margin*/所以一般情况下会去内外边框  margin:0;

border:边框

padding:内边距  padding:0;

16.边框：

1. 边框的粗细
  /*    border:粗细 样式（实体，虚线） 颜色*/
    border:1px solid red;
2. 边框的样式   圆角边框
3. 边框的颜色

17.盒子的计算方式：你这个元素到底有多大呢？

margin+border+padding+内容宽度

### 18.**怎样让盒子内容居中呢？**

​ display:block; text-align:center ;让内容实现居中

19.浮动

display:

**<!--    block块元素
inline 行内元素
inline-block,是块元素，但是可以内联，在一行！
none:消失
-->**

浮动的时候边框会塌陷，怎么解决这个问题呢？

增加父级元素的高度（不建议）
增加一个空的div标签，清除浮动
overflow
父类增加1个伪类：after

• display

  缺点：方向不可控制

  优点：不用担心父级边框塌陷问题

• float

  优点：方向可以控制

  缺点：浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题。

20.定位

1.相对定位
 position: relative;/*相对定位：上 下 左 右*/
 相对定位： position: relative; 相对于原来的位置，进行指定的偏移，相对定位，它仍然在我们的标准文件流中，原来的位置会保留。
 2.绝对定位
  position: absolute;
 3.固定定位
   position: fixed;
  4.z-Index
   z-index: 999;
   z-index(图层):默认是0，最高无限大（一般情况我们写999）

 /*背景透明度*/
    opacity: 0.5%;