css常用样式个人小结

 

常用的css

1.css的书写方式
选择标签{
     书写样式 每一个样式结束，必须加分号 所有符号都是英文
     k:v;
     k:v
 }
 外联(外链):link  工作中需要使用的方法
                行内:     style="color:red"不推荐
                内联：     

 样式所有的标签都适用
（注：使用类名书写样式时需要加.    例如：.one）

2.常用的css文字样式
文字颜色  （color:red）;
文字大小  (font-size: 20px);---（文字大小不能小于12px 普通文字默认16px）
文字水平居中  (text-align: center);
文字垂直居中 （ line-height: 24px;) -- (设置行高等于容器高度，文字垂直居中 ）
首行缩进  em倍数  参考的是文字大小  (text-indent: 2em);
文字不能小于12px 默认大小16px  (font-size: 18px);
字体 （字体的值需要加引号）  (font-family: "楷体");
文字下划线  (text-decoration: underline);
去除下划线  (text-decoration: none);
文字加粗  (font-weight: bold);
文字不加粗  (font-weight: normal);
文字不倾斜  (font-style: normal);
文字倾斜   (font-style: italic);
 
 鼠标移入增加小手  (cursor: pointer);
 增加圆角 值越大圆角越明显 值是50%的时候为圆形 (border-radius: 10px);
 背景颜色  (background:rebeccapurple);
 宽度  (width: 100px);        高度 (height: 100px);
border:10px dashed #dc0115;
             边框(border) 三个值 用空格隔开
            第一个值：线的粗细
            第二个值：线的类型 solid实线 dashed虚线 dotted点线 
            第三个值：线的颜色

外边距  (margin:100px);
行高 (line-height:100px);--（一行文字到下一行文字中间的留白，文字中心基线开始(高度一半的位置)向上取留白一半，向下取留白一半。中间的距离就是行高）
 内边距边框和内容的留白 
        margin和padding 多个值使用空格隔开
        一个值：上下左右
        两个值：第一个值上下 第二个值左右
        三个值：第一个值上 第二个值左右 第三个值下
        四个值：上右下左
        padding:10px;
        注:(margin padding border都可以只可以设置一个方向
        margin-top margin-bottom margin-left margin-right)
 选择器:hover{
     样式 鼠标移入样式才会生效，鼠标移出无效果
  } 
  
background: url('pic.gif') no-repeat center center pink;(引入背景图片)
        第一个值图片地址 url('地址')
        第二个值平铺方式，默认平铺 no-repeat repeat-x水平轴平铺 repeat-y垂直轴平铺
        第三个值：水平方向坐标 可以书写具体值 也可以left center right
        第四个值：垂直方向坐标 可以书写具体值 也可以top center bottom
        第五个值：颜色

同样的样式 权重一样 后写的生效 background:lime; 
渐变色 可以书写多个颜色，第一个值可以书写渐变角度 background: linear-gradient(90deg,red,pink,blue,yellow)

3、定位
固定定位 (position: fixed);
        1、不会随着窗口滚动而滚动
        2、参照物是可视窗口  top left right bottom  （left和right不能同时书写，top和bottom不能同时书写）
        3、固定定位完以标签变成行内块(设置宽高有效，可以在一行排列)
        4、固定定位以后不占位，相互遮盖的效果。多个定位同时存在，后写的(根据html顺序)在上面
 相对定位 (position: relative);
        1、单独使用的时候，一般用来做微调。
        2、相对定位，相对自身移动，参照物是自身原来的位置 top left right bottom  （left和right不能同时书写，top和bottom不能同时书写）
        3、相对定位，占位，占得是原来的位置
        4、不会改变标签的性质。
 绝对定位 (position: absolute);    （绝对定位实现的效果，一个标签在另外一个标签上面）
 (子级使用绝对定位，父级一般使用相对定位，相对定位对别的标签影响最小不占位。即一个标签绝对定位，会一直向上寻找，直到找到有定位方式(任意一种定位方式都可以，如果原来没有默认定位方式，一般使用相对定位，相对定位对别的标签影响最小。)的标签，然后以该标签作为参照）。

一个标签没有高度，高度由内容决定 。标准流中，img和父级有留白 ，给img加display:block; 
标准流中，上下外边距的值不会叠加（与最大的值为准）。左右外边距会叠加
    
浮动：实现的效果就是水平排列。只有两种，左右浮动。标签变成行内块，一行排列给宽高有效
           float:left;（向左浮动）
           float:right;（向右浮动）
        （子级浮动，父级一般要清浮动（overflow：hidden））
    overflow：hidden的三层含义（1：子级浮动，父级一般要清浮动  
                                                      2：超出部分隐藏
                                                      3：标准流中解决外边距塌陷问题）
    overflow：auto（超出部分显示滚动条）
修改滚动条样式 
 p::-webkit-scrollbar {
     width: 4px; 
     height: 4px;
 }
定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
 p::-webkit-scrollbar-thumb {
     border-radius: 5px;
     box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     background: rgba(0,0,0,0.2);
 }
定义滚动条轨道 内阴影+圆角
p::-webkit-scrollbar-track {
     box-shadow: inset 0 0 5px rgba(255,0,0,1);
     border-radius: 0;
     background: rgba(0,0,0,0.1);
 }

 转换模块 （转换以后，占的还是原来的位置）
 div{
     width: 100px;
      height: 100px;
      background:red;

}

    位移 （transform: translate(100px,100px); ）（第一个数表示横坐标，第二个数表示纵坐标）
    旋转 （ transform: rotate(30deg); ）
    缩放   transform: scale(0.3); ）  ----（0-1缩小，大于1放大）

      旋转以后，坐标系也跟着改变 ( 一般实际开发的时候，先位移再旋转 )
      transform: rotate(30deg) translate(100px,100px);
      transform: translate(100px,100px) rotate(30deg) ;

  过渡模块（transition:）
   div{
       width: 100px;
       height: 100px;
       background: red;
    中间变化过程可见
           第一个值：样式 可以指定某一个样式 也可以设置所有
           第二个值:时间
           第三个值：动画曲线 一般是linear
           第四个值：动画延迟执行时间      
       transition: width 2s linear 0s,height 2s linear 2s,border-radius 1s linear 4s,background 1s linear 4s;
    }

鼠标移入才生效
         选择器:hover{
             样式          
         }            
如：div:hover{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background:blue;
            transform: rotate(290deg); 
        }

 动画模块
 div{
     width: 100px;
       height: 100px;
       background:lime;
        使用动画 animation：动画名字 持续时间 次数infinite 动画曲线linear 
       animation:move 3s infinite linear;
   }
  定义动画
    @keyframes 动画名字{
         各个状态样式条
     }
例如：
@keyframes move{
    0%{
        transform: translate(0px,0px);
    }
    25%{
        transform: translate(500px,0px);
        background:red;
    }
    50%{
        transform: translate(500px,500px) rotate(360deg);
        border-radius: 50%;
    }
    75%{
        transform: translate(0px,500px);
    }
    100%{
        transform: translate(0px,0px);
    }

4、选择器分类：

                             *：选择所有标签
            标签选择器：直接通过标签名选择标签。div p img
            类名选择器：通过类名选择  .+类名
            交集选择器：  p.one 中间不使用空格 标签名为p同时类名为one 。div.one.two标签名为div类名同时需要有one和two
           后代选择器：后代(c标签内部的标签都称为c的后代) div p使用空格隔开即可
           子代选择器 div>p(第一层包裹的才称为子代)
           并集选择器：同样的样式可以合并。使用逗号隔开。a,div a和div有同样的样式

            :nth-of-type(3n)可以选择具体某一个标签，也可以选择某一类标签2n 3n 4n

 5、选择器权重：
    *<标签<类名      选择器权重可以叠加，哪一个选择器的权重高，样式就取决于谁，同样的权重后写的生效

6、 css两层意义（层叠性和继承性）
            层叠性：标签的权重，哪一个权重高，取决于哪一个
            继承性：与文字有关的样式都可以继承。如果一个标签没有与文字有关的样式，会一直向上寻找。 如果块级标签不设置宽度，块级标签的占位(width margin padding border)和父级的宽度一样

7、网站布局--（先整体再局部，从上到下，从左到右）--首先考虑标准流。不浮动不定位
        1. 第一步，清除样式
        2.确定版心（一般一个网站只有一个版心）
        注意： logo是比较重要的内容，一般使用h1包裹(h1语义最重，一般一个页面只有一个h1
                   导航一般比较重要，使用ul li
        常见问题：外边距塌陷（标准流(不浮动、不定位)中，给子级增加了margin-top。父级跟着一起下来。）
        解决方法：1、不设置margin给父级设置padding
                          2、如果一定要加margin 给父级增加overflow:hidden;