<!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. Windows 2012 R2 安装Nessus

    1.nessus官网注册 注册地址:https://www.tenable.com/products/nessus-home Name字段随意,邮箱需要填写自己的,方便接受注册码 2.注册后,登录邮箱 ...

  2. Java - Calendar类的使用

    今天在写代码时需要用到时间相关的类,一开始,数据库中存的数据类型是timestamp的,所以在Java中就使用了 Timestamp类型,但当调用Timestamp类型的方法时发现,它的很多方法都是d ...

  3. U3D功能脚本备忘

    编译器属性 属性 介绍 用例 AddComponentMenu 在Component菜单中添加新的菜单项 [AddComponentMenu("Duan/Script/TestScript& ...

  4. Ubuntu输入法切换问题

    不知道改了个什么东西,Ubuntu 15.04 中Ctrl+Space不能切换输入法了,因此不能输入英文,shell就更是没法工作,在设置里面找了好久,“文本输入”/“语言支持”/“键盘”里面都没找到 ...

  5. iOS提交审核：您的 App 正在使用广告标识符 (IDFA)

    本文转载至  https://mp.weixin.qq.com/s?__biz=MzA3NzM0NzkxMQ==&mid=401172721&idx=1&sn=a369cf1b ...

  6. 推荐系统之基于图的推荐：基于随机游走的PersonalRank算法

    转自http://blog.csdn.net/sinat_33741547/article/details/53002524 一 基本概念 基于图的模型是推荐系统中相当重要的一种方法,以下内容的基本思 ...

  7. Linux下grep命令查找带有tab（退格）的字符

    需要在日志文件统计删除的主帖,而日志文件是tab(退格)字符隔开的:假设日志文件名叫delete.log. 保存格式和保存的数据如下, 删除日期            帖子类型(11为主帖,12为回帖 ...

  8. Trie树的分析与实现

    字典树 又称单词查找树,Trie树,是一种树形结构,是一种哈希树的变种.典型应用是用于统计,排序和保存大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本词频统计.它的优点是:利用字符串的 ...

  9. C#设计模式--工厂方法模式

    0.C#设计模式-简单工厂模式 设计模式: 工厂方法模式(Factory Method Pattern) 介绍:简单工厂模式是要在工厂类中通过数据来做个决策,在工厂类中的多个类中实例化出来其中一个要用 ...

  10. 题目1441：人见人爱 A ^ B(二分求幂)

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