前端之css

1.css的基本样式

2.css的三种引入方式

1. 外部样式

 

 2.内部样式

 3.行内样式

3.字体样式

<style>
        div {
            cursor: pointer;
           /*更改鼠标样式*/

            /* 字体大小 */
            /* font-size: 40px; */
            /* 字体粗细 */
            /* font-weight: bold; */
            /* font-weight: 900; */
            /* 100-900 400===normal  800===bold  100-900越来越粗   font-weight: 400;*/
            /* 字体是否倾斜 */
            /* font-style: italic/normal; */
            /* font-family: "微软雅黑"; */

            /* italic 900可省略，字体大小，font-family必须存在 */
            font: italic 900 70px "微软雅黑"
             text-indent: 2em; 
             /*首行缩进*/
        
        }
    </style>

 4.选择器

1.基础选择器

1.1 标签选择器

标签选择器  选中所有的p标签

1.2 id选择器

 1.3类选择器

 1.4通配符标签

* {
    color: red;
}

让所有的字体变成红色

2复合选择器

 3.属性选择器

 type^="te"  一te开头的属性

type$='l'     --以l结尾的属性

type*="e"   --type值里面包含e

4.包含选择器

5.伪类选择器

5.1

 a:link  l链接没有被访问前的样式效果

a:visted 链接被访问后的样式效果

a:active 点击元素时的样式效果

a:hover鼠标悬停的样式效果

2.

3.伪元素

 5.文本格式

 text-decoration：none去除a标签的下划线

垂直居中调行高  

6.无序表的格式

 无序列表前面点的格式

 display：inline-block 切换为行内块元素

8.背景

 9.边框

 10.合并相邻边框

 11.阴影

12.轮廓线

 13.防止文本拖拽

 14.隐藏元素

 15.定位

15.1相对定位

15.2 绝对定位

 15.3 粘性定位

16. 盒子模型

 16.1内边距

16.2外边距

 

 16.3外边距塌陷问题

父元素的第一个子元素的margin-top值会被父元素抢走
给父元素添加边框
overflow:hidden;  -------偏方

16.4文本溢出

 16.5解决padding影响盒子大小问题

 设置盒子大小

17.flex布局

 18.浮动

 19.渐变

 20.字体图标

 21.媒体查询

 22.2d转换

 23.3d

 24.过度

 25.动画