HTML&CSS学习笔记

选择器

            *选择所有的标签

            标签选择器:直接通过标签名选择

            类名选择器:直接通过类名选择标签 类名前面一定需要加点  .+class名字

            后代选择器:被包裹的都称为后代 div p 使用空格隔开 一般不能超过四级

        

    清除样式 

         *{
             margin: 0px;

             padding:0px;

             list-style: none;

         }

    div绝对水平居中 

         margin-left:auto;

         margin-right: auto;

     浮动可以让标签变成水平排列 float:left水平靠左 float:right水平靠右

     一个标签浮动,同级(同一个父级)标签必须浮动

    

        在标准流中(不浮动),父级可以检测到子级的高度

        如果父级不够宽的时候,子级会自动落下来

        子级浮动,父级检测不到高度。浮动塌陷

            解决:

            1、给父级增加高度

            2、给父级加overflow:hidden;

       

     取类名相当于人名,可以有多个 类名需要使用英文开始,不能和标签名一样 

        img{
            /* 图片的值,只需要设置一个方向即可,另外一个值,计算机自动计算 */

            width: 20px;

标签分类:

       第一种:单双标签

        双标签:<标签></标签>

        单标签:<标签>或<标签 /> 

       第二种:行内标签和快级标签

        行内标签:和其他标签并排排列 span b u i a

                行内标签设置宽高无效,上下外边距无效,左右有效

                上下内边距有效,不占位。左右有效且占位

        块级标签:独占一行ul li h1-h6 p div

        行内块:在一行排列,设置宽高有效 img input td tr table

        标准流:行内标签水平,块级标签垂直。

        做网站的时候,首先需要考虑的是标准流。再次是浮动。

        浮动以后,脱离标准流,变成行内块

外边距塌陷

        标准流中:

        1、左右外边距可以叠加,上下外边距的值取决于最大的

        2、父标签内部有一个子标签。如果给子标签增加margin-top父级会跟着下来。

        解决方法:

        1、不要使用margin-top 给父级增加padding-top

        2、给父级增加overflow:hidden

浮动以后的值上下左右都可以叠加

    多个类名中间使用空格 

    <a href="" class="left my" >

css书写方式

第一种:内联 

第二种:外链 不需要加style标签对(做项目的时候)

第三种:行内样式(不推荐使用)

div{
    /* 文字颜色 */

    color:red;

    /* 文字大小 */

    font-size: 20px;

    /* 行高 */

    line-height: 30px;

    /* 字体 */

    font-family: "楷体";

    /* 文字居中 */

    text-align: center;

    /* 盒子模型 margin padding border width height */

    /* 浮动 ,让标签水平排列 */

}

固定定位的标签 position: fixed 不会随着窗口的滚动而滚动

    参照物是当前的窗口 left  top bottom right

    左右只能存在一个,上下只能存在一个

    固定定位,脱离标准流,变成行内块

相对定位 position: relative相对自身位移,一般用来做微调

top left right bottom参照物是自身

占位:占的是原来的位置

绝对定位 position: absolute一般实现的效果是一个标签放置在另一个标签的上面

子级绝对定位,父级相对定位。可以把子级固定在父级的任何位置 left top right bottom

绝对定位:不占位

绝对定位以后,标签变成行内块

    /* 文字垂直居中,设置行高等于当前标签的高度 */

    line-height: 40px;

    /* 增加圆角,值越大圆角越明显 值是50%的时候就是圆形*/

    border-radius: 50%;

    /* 旋转 deg度数单位  正值顺时针,负值逆时针 */

    transform: rotate(30deg);

display

        inline把标签转化为行内标签

        inline-block把标签转化为行内块

        block 把标签转化为块级标签

        none隐藏标签

        转化完了以后,只是为了工作方便。原来标签的语义没有变化

css层叠性和继承性

选择器权重 *<标签名1g<类名1kg

选择器权重可以叠加

层叠性:

    css同样的样式,权重一样的话后写的生效

    权重不一样,取决于权重高的

继承性:

    与文字有关的样式,都可以继承

    如果一个标签没有某一个与文字有关的样式(一定要考虑到内置的一些样式),会向上寻找,直到找到该样式,

css3样式

    /* linear-gradient(to 方向,色值,色值) */

    /* background: linear-gradient(to top,red,#ffff00,blue); */

    background: lime;

    /* 投影 

        第一个值水平方向 正值右边 负值左边

        第二个值垂直方向

        第三个值虚实程度

        第四个值影子大小

        第五个值影子颜色 可以书写成透明色

    *

html5常用标签 用法和div一模一样,只是语义更重了

    <header>头部</header>

    <nav>导航</nav>

    <main>主要内容</main>

    <section>大区域内容</section>

    <aside>侧边栏</aside>

    <footer>底部</footer>

    <article>文章</article>

转化模块

     转换模块,对于行内标签没有效果 占得是原来的位置 

    /同样的样式后写的生效 

     旋转 

    transform: rotate(30deg);

    缩放 0-1缩小 大于1的时候放大

    transform: scale(0.3);

    位移,第一个值代表水平方向,第二个值垂直方向 

    transform: translate(100px,100px);

     可以书写多个值,使用空格隔开 

    transform: scale(0.3) rotate(12deg) translate(100px ,100px);

    旋转以后,整个坐标系也跟着改变 

    transform: translate(100px,100px) rotate(90deg);

    transform: rotate(90deg) translate(100px,100px) ;

过度模块

    /* 过渡模块,中间变化过程可见 all代表所有的可以专门设置一个样式 */

    /* 第一个值代表样式 第二个值动画持续时间 第三个值延迟时间(可选) */

    /* transition: all 2s 2s; */

    transition: background 1s 0s,transform 1s 1s,border-radius 1s 2s,width 1s 2s;

    }

    /* 选择器:hover鼠标移入以后才生效 */

动画模块

/* 使用动画 动画名字 动画持续时间 次数(可以书写具体的次数) infinite无穷 linear平缓过渡*/

            animation:circle 2s infinite linear;

            /* transform-origin: x y; 旋转中心点 第一个值代表水平 left center right,第二个值代表垂直top center bottom*/

        }

        /* 定义动画 

            @keyframes 动画名字{
                书写各个状态的样式条

                状态就是百分比来划分

            }

        */

        /* :nth-of-type(n)可以选择到具体的某一个 */

        /* 定位以后的标签,如果叠加的话,后写的在上面

            定义以后的标签,可以通过z-index调整图层顺序

            默认值0值越大越靠上。可以是负值但是不建议

        */   

        

       

        /* 加此样式,才可以进入三维坐标 */

        transform-style: preserve-3d;