HTML5之CSS学习

最新推荐文章于 2024-07-12 18:29:20 发布

HKDXiaoFan

最新推荐文章于 2024-07-12 18:29:20 发布

阅读量289

点赞数

文章标签： css 布局标签 html

本文链接：https://blog.csdn.net/HKDxiaofan/article/details/79604026

版权

css主要的作用是对页面元素进行布局设置.
css主要分为:
1.将css文件通过link标签引入到html文件中,称之为内联式
2.将在html的head标签中,通过style标签来设置页面,称之为外联式
3.直接在body标签中的元素后面通过style标签来实现布局的,成为行间式
css中的选择器的种类有很多:常见的基础选择器有
1.标签选择器 : 标签名{}
2.类名选择器 : .类名{}
3.id选择器: #id名{}
4.后代选择器

<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
    //id选择器
    #box
    {
    }
    //标签选择器
    div
    {
    }
    //类名选择器
    .div1
    {
    }
    //后代选择器
    .div1 div
    {
    }
    </style>
</head>
<body>
    <div id="box" class = "div1">
        <div>我是div2</div>
    </div>
</body>

选择器之间的优先级关系:
1：相同选择器，样式冲突的情况下，后面覆盖前面
2.选择器不同时:id选择器>类名选择器>标签选择器;当然行间式是大于所有选择器的

CSS中的盒模型:
盒子最里面是content,content外面包裹的是padding,再外面是border,最外面是margin

css中的盒模型结构图
content是一个元素的内容显示的区域,padding是盒子的内边距,boder是盒子的边框,margin是盒子的外边距
css中对盒子的一些属性设置:

<!-- 文本内容的字体颜色 color:颜色值; -->
    <!-- 文本位置 text-align:left(靠左对齐，默认) | right(靠右对齐) | center(居中对齐); -->
    <!-- 字号大小 font-size:;单位是px -->
    <!-- 文本修饰 text-decoration:underline(下划线)| line-through(中划线)-->
    <!-- width:样式标签的宽度 单位是px-->
    <!-- height:样式标签的高度 单位是px -->
    <!-- 尺寸样式 块级标签支持，行级标签不支持 -->

    <!-- 内边距 padding -->
    <!-- 左内距 padding-left:数值 -->
    <!-- 右内距 padding-right:数值 -->
    <!-- 上内距 padding-top -->
    <!-- 下内距 padding-bottom -->

    <!-- 内边距 复合写法 -->
    <!-- 1:padding: 0px(上) 0px(右) 0px(下) 0px(左) -->
    <!-- 2:padding: 0px(上) 0px(左右) 0px(下) -->
    <!-- 3:padding: 0px(上下边距) 0px(左右边距) -->
    <!-- 4:padding: 0px (上下左右边距都是0px)-->

<!-- 外边距 margin -->
    <!-- 左边距 margin-left:数值 | auto -->
    <!-- 右边距 margin-right:数值 | auto -->
    <!-- 上边距 margin-top -->
    <!-- 下边距 margin-bottom -->

    <!-- 外边距 复合写法 -->
    <!-- 1:margin: 0px(上) 0px(右) 0px(下) 0px(左) -->
    <!-- 2:margin: 0px(上) 0px(左右) 0px(下) -->
    <!-- 3:margin: 0px(上下边距) 0px(左右边距) -->

<!-- 背景样式 background -->
    <!-- 背景颜色 background-color:颜色值; -->
    <!-- 背景图片 background-image:url("图片路径") -->
    <!-- 背景图片平铺 background-repeat: repeat-x(沿着x轴平铺) | repeat-y(沿着Y轴平铺) | no-repeat(不平铺); -->
    <!-- 背景图片定位 background-position: x y; -->
    <!-- x轴：支持left center right 支持百分比-->
    <!-- y轴：支持top center bottom 支持百分比-->
    <!-- 背景图片尺寸 background-size: x y | cover |contain; -->

    <!-- background:复合写法 -->
    <!-- background:background-color background-image background-position background-repeat -->

/*过渡:transition*/
    /*过渡时间*/
    transition-duration: 2s;
    /*设置有过渡效果的属性:需要哪些样式在改变的时候有过渡的效果,多个属性用逗号隔开,默认值是all*/
    transition-property: background-color,height;
    /*设置过渡的运动方式:过程中速度的变化*/
    /*linear:匀速变化 ease:先快后慢 ease-in:先慢后快 ease-out:先快后慢 ease-in-out:先由慢到快,再由快到慢 */
    transition-timing-function: ease-in-out;
    /*过渡的延迟执行:过渡效果延迟多长时间再执行*/
    transition-delay: 1s;
    /*过渡的复合写法:过渡属性 过渡效果的时间 过渡延迟执行的时间 过渡的运动方式*/
    /*transition: all 0s 2s linear;*/
    /*兼容性*/
    /*谷歌浏览器-webkit内核*/
    /*-webkit-transition: all 0s 2s linear;*/
    /*火狐浏览器*/
    /*-moz-transition: all 0s 2s linear;*/
    /*ie浏览器*/
    /*-ms-transition: all 0s 2s linear;*/
    /*欧朋浏览器*/
    /*-o-transition: all 0s 2s linear;*/
    /*transition: all 0s 2s linear;*/

定位:不会影响到同级的布局,margin布局:如果前面的同级标签发生变化会影响到后面的同级标签的位置,float:前面的同级标签发生变化会影响到后面的同级标签的位置
定位分为三种:相对定位,绝对定位,固定定位,决定定位的形式属性是position,position的默认值是static:不定位的
relative:相对定位
①:相对定位(不会脱离文档流,还会占用原来的位置):position的值为relative,相对定位是相对于自身的位置去进行移动–>
②:绝对定位(会脱离文档流):position的值为absolute,绝对定位是相对于定位父级(定位父级就是设置了定位属性position的父级)来进行移动的,如果所有的父级都没有定位属性,绝对定位就会相对于当前的document窗口去进行定位
如只是父级仅仅是作为定位父级使用,我们只需要给父级的position属性设置为relative即可,因为相对定位不会脱离文档流,绝对定位会脱离文档流–>
绝对定位是相对于带有position属性的父级去定位,如果父级没有position,就会去找父级的父级,依次类推,直到html,如果html也没有定位属性,就会相对于当前的document窗口进行定位
③固定定位(会脱离文档流:定位脱离文档流的位置是在浮动的上面,不会影响到浮动):position的值是fixed:是相当于整个窗口来进行定位,相对于这个窗口的位置始终不变
层级关系:z-index>定位>浮动(但是文本标签中的内容还是会环绕在浮动的周围,浮动最初设置就是为了文字环绕的效果)>正常的块级盒子

 <head>
        <meta charset="UTF-8">
        <title>2D形变</title>
        <style type="text/css">
            div
            {
                width: 200px;
                height: 200px;
                background-color: red;
                color: white;
                text-align: center;
                line-height: 200px;
                font-size: 30px;
                margin-left: 100px;
                float: left;
                transition:all 2s 0s linear;
            }
            .rotate:hover
            {
                /*设置旋转的时候绕着哪个点去旋转*/
                transform-origin: 50% 50%;
                /*旋转45度*/
                transform: rotate(45deg);
            }
            .translate:hover
            {
                /*平移(x,y)沿着X轴平移x,沿着Y轴平移y*/
                transform: translate(50px, -50px);
            }
            .scale:hover
            {
                /*缩放*/
                transform: scale(2);/*整体放大为原来的2倍*/
                transform: scale(0.5,2);/*x方向为原来的0.5倍,y方向为原来的2倍*/
            }
            .skew:hover
            {
                /*Y轴方向倾斜20度*/
                transform: skewY(20deg);
            }
            .both:hover
            {
                /*如果让平移和旋转同时拥有的话,才用复合写法,因为transform属性分开写的话,后面的会将前面的效果覆盖掉*/
                /*复合中平移和旋转书写的先后顺序会影响到运行效果,所有的形变效果都是相对于本身的x,y轴*/
                transform: translate(50px,50px) rotate(60deg);
            }
        </style>
    </head>
    <body>
    <div class="rotate">旋转</div>
    <div class="translate">平移</div>
    <div class="scale">缩放</div>
    <div class="skew">倾斜</div>
    <div class="both">同时</div>
    </body>

HKDXiaoFan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5之CSS学习

css主要的作用是对页面元素进行布局设置. css主要分为: 1.将css文件通过link标签引入到html文件中,称之为内联式 2.将在html的head标签中,通过style标签来设置页面,称之为外联式 3.直接在body标签中的元素后面通过style标签来实现布局的,成为行间式 css中的选择器的种类有很多:常见的基础选择器有 1.标签选择器 : 标签名{} 2.类名选择器 :
复制链接

扫一扫