首页 > 其他分享 >CSS的书写方式

CSS的书写方式

时间:2023-02-28 21:24:31浏览次数:26  
标签:方式 color 书写 h1 样式 css CSS

 CSS的书写方式

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <!--
                        书写方式:内联样式(行内样式)
                        在标签中加入一个style属性,CSS的样式作为属性值
                        多个属性值之间用;进行拼接
                -->
                <h1 style="color: deeppink;font-family: '宋体';">这是一个h1标题</h1>
        </body>
</html>

 

【2】内部样式:
 

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <!--
                        书写方式:内部样式:
                        head标签中加入一个style标签,在里面定位到你需要修饰的元素,然后在{}中加入你要修饰的样式。
                -->
                <style type="text/css">
                        h1{
                                color: royalblue;
                                font-family: 宋体;
                        }
                </style>
        </head>
        <body>
                <h1>这是一个标题</h1>
        </body>
</html>

 


【3】外部样式:
首先要创建一个css文件,css文件的后缀.css
 

h1{
        color: red;
        font-family: 宋体;
}

 

再创建html页面:

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <!--引入外部CSS资源:link-->
                <link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
        </head>
        <body>
                <h1>这是一个标题</h1>
        </body>
</html>

 

【4】实际开发中三种书写方式用的最多的是:
第三种:外部样式:因为这种方式真正做到了  元素页面和样式 分离

 

【5】三种书写方式优先级:
就近原则
 

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <!--引入外部CSS资源:link-->
                <style type="text/css">
                        h1{
                                color: yellow;
                        }
                </style>
                <link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
                
        </head>
        <body>
                <h1 style="color: red;">这是一个标题</h1>
        </body>
</html>

 

标签:方式,color,书写,h1,样式,css,CSS
From: https://www.cnblogs.com/89564f/p/17166029.html

相关文章

  • HTML5和CSS3基础
    HTML元素空元素不是所有元素都拥有开始标签、内容和结束标签。一些元素只有一个标签,通常用来在此元素所在位置插入/嵌入一些东西。这些元素被称为空元素例如:元素``是用......
  • chosen.css
    .chosen-container{position:relative;display:inline-block;vertical-align:middle;font-size:12px;height:31px;line-height:1.42857143;......
  • css易掉坑知识点整理之系列(二)
    之前也整理过系列(一),有兴趣的请点击:​​系列一​​。这是我在学习的过程中遇到的易错的或者易掉坑的css知识点的总结整理,嗯,还是会持续更新的2018/6/19今天遇到了一个base64格......
  • css hack
    一、CSS hack是什么?CSS hack是通过在css样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(不同的浏览器识别的符号是有不同的标准的,CSShack就是让我们记住这个标......
  • 路飞-day3——路飞前端全局css,全局配置文件、配置axios实现前后台交互、安装vue-cooki
    目录一、路飞前端全局css,全局配置文件1.1整理项目1.2设置全局css1.3配置全局js二、配置axios实现前后台交互三、安装vue-cookies四、安装elementui五、安装bootstrap和j......
  • css3中的z-index
    元素的层叠黄金准则:1)、谁大谁上:当具有明显的层叠水平标识的时候,如生效的z-index属性值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个2)】后来居上:当元素的层叠......
  • 事务提交方式
    ①手动显式提交:用COMMIT命令完成的提交为显式提交。②自动提交:把AUTOCOMMIT设置为ON,则在插入、修改、删除语句执行后,将进行自动提交。③隐式提交:用SQL命令间接完成的提......
  • Luffy项目:3、前端调整(全局css、全局配置、全局axios...),后端主页轮播图表设计,接口部分
    目录Luffy项目一、luffy项目前端调整1、全局css2、全局配置文件3、安装axios4、安装vue-cookies5、安装elementui6、安装bootstrap和jq二、后端主页部分1、轮播图部分表设......
  • 关于OpenShift(OKD)通过命令行的方式部署打包镜像 Demo
    写在前面会陆续的和小伙伴分享一些OpenShift的笔记博文内容为安装完OpenShift,利用OpenShiftCICD流程部署应用的一个Demo理解不足小伙伴帮忙指正傍晚时分,你坐......
  • Spring事务管理的方式
    ①编程式事务管理:通过编写代码实现的事务管理,包括定义事务的开始、正常执行后的事务提交和异常时的事务回滚。②声明式事务管理:通过AOP技术实现的事务管理,其主要思想是将......