<!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. Python 网络爬虫

    爬虫介绍 爬取图片 爬取文本 爬虫相关模块:re 爬虫相关模块:urllib 爬虫相关模块:urllib2 爬虫相关模块:cookielib 爬虫相关模块:requests 爬取需要登录的页面

  2. CentOS7安装ipython

    python版本:2.7.5 yum install -y python2-pip.noarchyum install -y python-develpip install ipython==5.4. ...

  3. zabbix设置报警通知

    邮件通知是最流行的报警通知方式,这里配置邮件通知 1. 配置通知邮箱信息(发件人)的邮箱信息 2. 填写信息 3. 事件(Action)通知配置 点击创建动作 添加一个触发条件 点击添加 添加一个操作 ...

  4. SQL —— 获取重复某个字段的第一条记录

    ----------用来双重排序,且获取唯一 go SELECT ROW_NUMBER() OVER (ORDER BY AScore DESC,ATime ASC) AS Rank, * FROM ...

  5. IOS设计模式第七篇之观察者设计模式

    版权声明:原创作品,谢绝转载!否则将追究法律责任. 观察者设计模式 在观察者设计模式里面,一个对象通知其他的对象一些状态的改变.涉及这些对象不需要知道另一个对象---因此鼓励解耦设计模式.这个设计模式 ...

  6. 【llinux】yum命令出现Loaded plugins: fastestmirror Determining fastest mirrors

    在进行yum 安装的时候.报错了. Loaded plugins: fastestmirror Determining fastest mirrors fastestmirror是yum的一个加速插件 ...

  7. Undeclared identifier:XXX

    未识别错误,是因拼写错误或找不到定义文件. 下面列举一些类型和函数用到的单元. _Stream ADODB_TLB akTop, akLeft, akRight, akBottom Controls ...

  8. JS笔记 - JQ事件委托( 适用于给动态生成的脚本元素添加事件）

    最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...

  9. C#项目学习 心得笔记本

    CacheDependency 缓存 //创建缓存依赖项 CacheDependency dep = new CacheDependency(fileName); //创建缓存 HttpContext ...

  10. Android M App休眠 (adb shell dumpsys usagestats)

    App休眠 在 Marshmallow 系统,Google 宣布了一个新的功能叫 App 休眠.App 休眠会阻止那些不 常用的 App(几天没有用过的 App)连接网络或者是运行任何程序直至设备充电 ...