<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--第一种增加css样式的方法,在标签中增加style属性-->
<div style="background-color: blue; width: 100px; height: 100px">我是第一块</div><br>
<div style="background-color: red; width: 100px; height: 100px">我是第二块</div><br>
</body>
</html>
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
width: 100px;
height:100px;
}
</style>
</head>
<body>
<!--第二种增加css样式的方法,可以在head中增加style标签,style中通过选择器定位标签增加css样式-->
<div class="c1">我是红色</div><br>
</body>
</html>
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--第三种增加css样式的方法,使用css文件 引入css样式表-->
<link rel="stylesheet" href="c1.css">
</head>
<body>
<div class="c1">我是粉色</div><br>
</body>
</html>

c1.css文件为

 .c1{
background-color: pink;
width: 100px;
height:100px;
}
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--样式表的引用关系以标签为起始位置,由下而上的进行显示--> <link rel="stylesheet" href="c1.css">
<style>
.c1{
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body> <div class="c1" style="background-color: pink; width: 100px; height: 100px"></div> </body>
</html>

HTML标签_增加css样式的更多相关文章

  1. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. php有效的过滤html标签,js代码,css样式标签

    过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...

  3. div style标签内嵌CSS样式

    我们在DIV标签内.SPAN标签内.p标签等html标签内使用style属性直接设置div的样式. 一.在<div>标签内使用style设置css样式   -   TOP 1.实例html ...

  4. 利用link标签的disabed属性大面积的对其他标签元素的CSS样式进行替换操作

    由于平时对元素样式的控制基本上只是3,4个,所以一般用Jquery的时候直接使用$(element).css();这个方法,或者使用$(element).addClass()方法完成样式操作.对于小范 ...

  5. CSS基础知识总结之css样式引用的三种方式

    在html中增加css样式有三种: 1.在标签中增加style属性: <!DOCTYPE html> <html lang="en" xmlns="ht ...

  6. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  7. Visualforce Page CSS样式

    Salesforce Page开发者文档:https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_stylin ...

  8. 最近关于css样式重构的一点心得体会

    之前的项目一直都是基于bootstrap,elementUI这些已经很成熟的框架进行二次开发,要么就是一些很小的宣传页面,h5页面,或者结构相对简单的移动端.一直都没有机会对css的整体进行一个思考, ...

  9. 当css样式表遇到层

    (附:White-space:pre可以是样式表里卖弄body的属性,作用是保持html源代码的空格与换行,等同<pre>标签.) Css样式表可以通过被封在层里的方式来限制页面所修饰的内 ...

随机推荐

  1. 【代码审计】EasySNS_V1.6 前台任意文件下载漏洞分析

      0x00 环境准备 EasySNS官网:http://www.imzaker.com/ 网站源码版本:EasySNS极简社区V1.60 程序源码下载:http://es.imzaker.com/i ...

  2. 【安全开发】C/C++安全编码规范

    C本质上是不安全的编程语言.例如如果不谨慎使用的话,其大多数标准的字符串库函数有可能被用来进行缓冲区攻击或者格式字符串攻击.但是,由于其灵活性.快速和相对容易掌握,它是一个广泛使用的编程语言.下面是针 ...

  3. 执行RF设置顶级测试套件的名称

    场景1:通过pybot进行单个output文件情况下设置 -N --name name 设置顶级测试套件的名称.名称中的下划线将转换为空格. 默认名称为执行的数据源的名称. 场景2:通过rebot进行 ...

  4. Explaining Delegates in C# - Part 7 (Asynchronous Callback - Way 4)

    This is the final part of the series that started with... Callback and Multicast delegatesOne more E ...

  5. Cesium添加水面

    var viewer = new Cesium.Viewer('cesiumContainer');var waterPrimitive = new Cesium.Primitive({ //show ...

  6. springboot 集成elasticsearch

    In this article, we will discuss about “How to create a Spring Boot + Spring Data + Elasticsearch Ex ...

  7. 更新npm至最新版本

    npm install npm@latest –g 或者@ 符号后面直接添加你想更新到的版本号

  8. (iOS)判断GPS坐标是否在中国

    博文转载至 http://blog.csdn.net/cuibo1123/article/details/45691631 火星坐标经纬度范围 由于火星坐标问题,所以需要判断一下经纬度是否在中国. 基 ...

  9. flex常用兼容写法

    一般放在common.css中: .flex{ display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms ...

  10. 题目1010:A + B(字符串转数字)

    题目链接:http://ac.jobdu.com/problem.php?pid=1010 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...