测试-css学习

目录

CSS知识点

CSS3知识点

---

CSS知识点

• css基本语法：css修饰美化网页的展示效果。

        <style type="text/css">  type="text/css"可省略，可有可无。

        标签{属性1:属性值1; 属性2:属性值2;}（<标签>）

        .类名{属性1:属性值1; 属性2:属性值2;}（class=”类名”）

        #id名{属性1:属性值1; 属性2:属性值2;}

        </style>

       

         color-颜色；background-背景颜色；

        font-size-字体大小px，px代表像素 是计算机中的一种计量单位；

• 选择器：在HTML中选择想要修改的部分。

• 简单选择器

        标签名选择器

        类名选择器，多个标签一个效果，class=”类名”

        id名选择器，同一个标签有多个效果

        权重大小：id:100  >  class:10  >  标签:1

        id名/类名的命名规则：

        Ⅰ.由数字，字母，下划线”_”和中划线”-”组成，不推荐使用中文；

        Ⅱ.不能以数字开头，可以用字母，下划线和中划线开头；

        Ⅲ.见名知意；

        Ⅳ.id名具有唯一性，一个标签只有一个id名，不能重复出现，类似身份证号码；

        类名可以重复出现，一个标签可以有多个类名，用空格隔开；

• 复合选择器

• 后代选择器：祖先元素 后代1 后代2 {  } 空格隔开

        div span{color: aqua;}  div的后代span的样式改变，例子中的伯伯和我都改变。

• 并列选择器：选择器1,选择器2{  } 逗号隔开

• 继承性：子承父业，嵌套。继承的权重最低。

        <div>爷爷

                <span>伯伯</span>

                <p>爸爸

                        <span>我</span>

                </p>

        </div> 当设置了div的样式后，p和span的样式与之相同

        嵌套大小：div > p > span ，不能反过来嵌套。

• 覆盖性：权重相同时，后写的代码会覆盖前面的代码，效果和最后的代码相同。

• 权重：权重最大的，决定最后展示的效果。

• css文件存放的位置：

• 外链css：单独写一个css文件，和html文件分开。

        在css文件中直接写-标签{ }，在html文件中需要用link标签引入：<link rel="stylesheet" type="text/css" href="css文件名.css"/>

        写代码时常用，css和html代码分离，方便代码的修改。

• 内嵌css：在html中用<style></style>包裹；

        如：<style type="text/css">div{color: green;}</style>

        内嵌式不用加载外部的css文件，网页加载速度更快一些；适用于对网页打开速度有更高要求的网站，如电商网站首页。

• 行内css：在html文件的标签里用属性style来表示；

        如：<div style="color: red;">中国</div>

        编写代码时不要选择行内css，一定不要写，修改不方便，还会导致页面混乱，加载速度会变慢。

• 引入方式的权重：行内css > 外链式css = 内嵌css

        css语法很多，只要能实现效果，尽量选择代码量少的。

• 盒子模型-div标签的css样式

• 宽：width；高：height；背景颜色：background；

• 边框：border；如：border: 1px solid red; 实线：solid；虚线：dashed；当前两个属性值确定之后第三个值不写默认为黑色；

• 上边框：border-top；下边框：border-bottom；左边框：border-left；右边框：border-right；

• 内边距，内填充：padding；外边距：margin；

• 内/外边距填充：padding-top，padding-bottom，padding-left，padding-right；

        padding:10px; 四个方向都相同；

        padding:10px 20px; 上下，左右 两组组内相同；

        padding:10px 20px 10px; 上，左右，下 三组组内相同；

        padding:10px 20px 30px 40px; 上，右，下，左（顺时针）四组各不相同。

        margin的用法和padding一样

------------------------------------------------------------分界线------------------------------------------------------------

CSS3知识点

• CSS3圆角属性：border-radius，边框的圆角弧度。

        .d1{border-radius: 8px;} 四个角度相同

        .d2{border-radius: 8px 3px;} 对角相同-左上右下，右下左上

        .d3{border-radius: 8px 3px 20px 60px;} 四个角度都不一样-左上，右上，右下，左下（顺时针）

        要是写了三个值那么第四个值左下角度值默认为0； border-radius: 50%;-当标签为正方形时，可直接变为正圆。

        在写div的css样式之前都要设置好div的大小宽高，背景颜色，边框颜色，外边距

• CSS3渐变背景色：background:linear-gradient（渐变方向/方向的具体值,色值,色值,...）

        颜色值后面添加百分比，从0开始到100%设置颜色渐变的区域，如：

        .d1{background:linear-gradient(to right,red,blue);}  往右去，红变蓝

        .d3{background:linear-gradient(90deg,red,blue);}  90度的方向，红变蓝

        .d4{background:linear-gradient(to right,red 5%,blue 10%,yellow 100%);} 往右去，0-5%红色，5-10%红到蓝，10-100%蓝到黄

        to right-往右去，to left-往左去，to top-往上去，to bottom-往下去。

• 盒子阴影：box-shadow:水平方向x 垂直方向y 阴影大小/模糊度 颜色 (inset);

        .d1{box-shadow: 2px 8px 3px green ;} 外发光

        .d2{box-shadow: 2px 8px 3px green inset;} inset内发光/内阴影

• 透明背景：

        插入背景图-body{background:url("资源路径") ;}

        div中的透明背景-background: rgba(红,绿,蓝,透明度值);

        前三个值红绿蓝色值组成一个颜色，色值可以通过浏览器的调试工具调出颜色；最后一个透明值的百分比0-1全透明-实心。

• 文字/图片旋转、缩放、位移：transform: ; 变换，转变；图片和文字用法一样，只需在body中加img标签

        .d1{transform: rotate(90deg);} 

        .d2{transform: scale(2);} 

        .d3{transform:translate(80px,50px);}

        rotate-旋转角度默认沿中心点旋转

        scal-缩放比例

        translate-平移 x，y坐标

        沿x轴旋转-rotateX( )左右转

        沿y轴旋转-rotateY( )上下转；90度成一条线看不见，180度直接翻转

        注意：在同一个属性里，若其值有多个用空格隔开，即可实现多个值的展示。旋转后，移开鼠标会有一个恢复原状的动作。

• CSS3过渡/鼠标悬停属性：标签:hover{  } 鼠标悬停时，出现的样式-第二个样式.d1:hover{transform: scale(1.7);}

        在使用过渡时，其标签的样式还需设置：transition: all 1s 2s ease; 过渡，转变。

        all-应用在所有属性上；1s-动画时长；2s-延迟时间；

        ease默认-匀速，ease-in变加速，ease-out变减速，ease-in-out变速先加后减。

        注意：当时间为0.x时前面的0可以省略。

• 自定义动画csss样式：@keyframes name{ from{} to{} }

        name-自己命名，要和animation里第一个属性值对应；from-原始状态；to-最终状态。

        @keyframes name{   0%{} 50{}  100%{} } 分段式动画

        在所要改动的标签的样式里还需设置：animation: go 2s infinite alternate; 动画。

        go-keyframes的name名；2s-动画时长；infinite-动画结束瞬间无限循环；alternate-逆向动画。

        注意：若想要鼠标悬停才出现动画，就将animation写在标签:hover{ }里。头像抖动用分段式动画将旋转角度设为-5deg 0deg 5deg，时间设为0.1s。