dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 606|回复: 0

[Html/Css] 学习了解CSS3发展方向和CSS样式与优先级

[复制链接]
  • TA的每日心情

    2024-2-20 11:15
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    878

    主题

    4343

    帖子

    3995

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    3995

    发表于 2020-3-23 09:00:00 | 显示全部楼层 |阅读模式

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    通过学习CSS3游戏介绍、CSS样式和优先级章节,了解到html5+css3+js不光可以实现动画,其次可以往这个游戏与建模方向发展,更多css3特效访问Gerard Ferrandez on CodePen其次html嵌套css样式分为3种:内联、内部、外部、写法上推荐的是外部,便于代码复用性;样式表的写法是选择器{设置样式};css中常见的注释为/**/;css的优先级:内联style>id选择器>class选择器>标签;在css中,文本默认字体大小16px,长度单位分为px像素与em倍数;除此之外,颜色写法形式如下:#ffff16进制、yellow英文单词、rgb(216, 17, 173)其中当#ff0000可以简写为#f00,闲话不多扯,直接代码展示:


    [HTML] 纯文本查看 复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>学习CSS3游戏介绍、CSS3样式和优先级</title>
        <link rel="stylesheet" href="demo.css">
        <style type="text/css">
        div{
            color: aqua;
        }/*css内部*//*css注释标记*/
        img{
            /* width: 256px;
            height: 256px; */
            border-radius: 256px;
            background-color: #ccc;
        }
        .divcls{
            color: blue;
        }
        #divdid{
            color: brown;
        }
        /* css优先级如何:1.内联style2.id选择器3.class选择器4.标签 */
        </style>
    </head>
    <body>
        <!-- <link rel="stylesheet" href="demo.css"> 新建一个demo.css样式表 外部链接-->
        <!--写在行内的样式是css内联样式-->
        <div style="color: rgb(216, 17, 173);" class="divcls" id="divid">css3和css有什么区别?首先css3是css(层叠样式表)技术的升级版本,<em style="font-style: normal;font-size: 14px;">而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。然后是内容上css3主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。</em> 而css不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。最后在特点上css3新特征有很多,例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、多栏布局、媒体查询等。css主要能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。(更多详情参考下百度官方给出的介绍:css css3)</div><!--css长度单位:px em-->
        <img src="images/xs.png" alt="">
    </body>
    </html>






    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2025-2-2 04:50 , Processed in 0.082701 second(s), 33 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表