HTML Style Tags

CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS can be added to HTML elements in 3 ways:

  • Inline - by using the style attribute in HTML elements
  • Internal - by using a <style> element in the <head> section
  • External - by using an external CSS file
Tag Description
<style> Defines style information for an HTML document
<link> Defines a link between a document and an external resource
  • Use the HTML style attribute for inline styling
  • Use the HTML <style> element to define internal CSS
  • Use the HTML <link> element to refer to an external CSS file
  • Use the HTML <head> element to store <style> and <link> elements
  • Use the CSS color property for text colors
  • Use the CSS font-family property for text fonts
  • Use the CSS font-size property for text sizes
  • Use the CSS border property for borders
  • Use the CSS padding property for space inside the border
  • Use the CSS margin property for space outside the border
  •  <!DOCTYPE html>
    
 <html lang="en">
    
 <head>
    
     <meta charset="UTF-8">
    
     <title>Creating a bookmark</title>
    
 </head>
    
 <body>
    
 <
    
 <a href="#tips">Visit the useful Tips Section</a>
    
 <h2>Chapter 1</h2>
    
 <p>This chapter explains ba bla bla</p>

 <h2>Chapter 2</h2>
    
 <p>This chapter explains ba bla bla</p>

 <h2>Chapter 3</h2>
    
 <p>This chapter explains ba bla bla</p>

 <h2 >Chapter 4</h2>
    
 <p>This chapter explains ba bla bla</p>

 <h2>Chapter 5</h2>
    
 <p>This chapter explains ba bla bla</p>

 <h2>Chapter 6</h2>
    
 <p>This chapter explains ba bla bla</p>

 <h2>Chapter 7</h2>
    
 <p>This chapter explains ba bla bla</p>

 <h2>Chapter 8</h2>
    
 <p>This chapter explains ba bla bla</p>

 <h2>Chapter 9</h2>
    
 <p>This chapter explains ba bla bla</p>

 <h2>Chapter 10</h2>
    
 <p>This chapter explains ba bla bla</p>

 <h2 id="tips">Chapter 11</h2>
    
 <p>This chapter explains ba bla bla</p>

 <h2>Chapter 12</h2>
    
 <p>This chapter explains ba bla bla</p>

 <h2>Chapter 13</h2>
    
 <p>This chapter explains ba bla bla</p>

 <h2>Chapter 14</h2>
    
 <p>This chapter explains ba bla bla</p>

 <h2>Chapter 15</h2>
    
 <p>This chapter explains ba bla bla</p>

 <h2>Chapter 16</h2>
    
 <p>This chapter explains ba bla bla</p>

 <h2>Chapter 17</h2>
    
 <p>This chapter explains ba bla bla</p>
    
 </body>
    
 </html>
     <!DOCTYPE html>
    
 <html lang="en">
    
 <head>
    
     <style>
    
         body{background-color: #b3d4fc}
    
         h1{color: blue;
    
         font-family: "Arial Black";
    
         font-size: 300%}
    
         #p01{
    
             background-color: blueviolet;
    
             border: 5px solid blue;<!-- 定义边界宽度和颜色-->
    
             padding: 14px;<!-- 定义文字和边界之间的距离-->
    
             margin: 40 px;<!-- 定义边界外的文字文字和边界之间的距离-->
    
             color: red;

         font-size: 200%;
    
         font-family: "Arial Black"}
    
         p.info{
    
             background-color: yellow;
    
             color: rebeccapurple;
    
             font-size: 200px;
    
         }
    
         #a01:link{<!--定义了连接正常的显示样式-->
    
             color: yellowgreen;
    
             text-decoration: none;
    
         }
    
         #a01:hover{<!--定义了鼠标位于连接上方时候的显示样式-->
    
             color: yellow;
    
             background-color: transparent;
    
             text-decoration: underline;
    
         }

     </style>
    
     <meta charset="UTF-8">
    
     <title>Color</title>
    
 </head>

 <body>

 <h1 style="background-color: red"> <a id="a01" href="http://www.snowfox.wang/w3schools" target="_blank">
    
     This is a link to a website on the World Wide Web</a> </h1><!--href为增加超链接的标志,blank为重新打开一个窗口-->
    
 <h1 style="background-color: orange"><a href="2-Formating.html" target="_blank">Using the local link </a></h1>
    
 <h1 style="background-color: yellow">Background-color set by using yellow</h1>
    
 <h1 style="background-color: blue;color:red;" >Background-color set by using blue</h1>
    
 <p id="p01"<!--定义一个特殊的ID以区别其他的paragraph-->Hello everyone, I am JackSparrow and I am from Anhui Province</p>
    
 <p class="info">天天向上，好好学习</p>

 <p> Hello everyone, I am JackSparrow and I am from Anhui Province</p>
    
 </body>
    
 </html>

6-CSS的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. ACM-ICPC 2018 南京赛区网络预赛 B The writing on the wall(思维)

    https://nanti.jisuanke.com/t/30991 题意 一个n*m的方格矩阵,有的格子被涂成了黑色,问该矩阵中有多少个子矩阵,子矩阵不包含黑色格子. 分析 参考https://bl ...

  2. Golang入门教程（十五）指针

    什么是指针? 指针是一个变量,用于存储另一个变量的内存地址. 在上面的例子中,变量b的值是156,存储在内存地址0x1040a124. 变量a包含b的地址. 可以说现在a指向b. 声明指针 指向类型  ...

  3. Django之名称空间

    由于name没有作用域,Django在反解URL时,会在项目全局顺序搜索,当查找到第一个name指定URL时,立即返回. project/urls.py urlpatterns = [ path('a ...

  4. None.js 第四步 事件驱动程序

    Node.js 有多个内置的事件,我们可以通过引入 events 模块,并通过实例化 EventEmitter 类来绑定和监听事件 // 导入events模块 var events = require ...

  5. 【python小练】0000

    第 0000 题:将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种提示效果. 类似于图中效果 from PIL import Image, ImageDraw, Im ...

  6. .net 使用oracle 的存储过程有返回值也有数据集（游标）

    public void GetData(string username, string userip, string userkey, string userareaid, string ypid, ...

  7. Linux 查看系统版本和内核

    查看系统内核版本 [root@11e71db4a00e /]# cat /proc/version Linux version -.el7.x86_64 (builder@kbuilder.dev.c ...

  8. Linux 文件大小查找排序

    du -sh 文件大小查询: 1.当前目录的大小: du -sh | sort 2.当前 目录下的文件大小: ls -lsh 3.当前目录 下的文件大小排序: du -sh * |sort -n 4. ...

  9. Linux之Ubuntu下DSL拨号上网

    可视化桌面配置方法 1.编辑连接 2.选择 增加 3.选择 DSL 4.选择 新建连接[cmcc@gx属于移动校园用户的ISP指定后缀] 6.OK 当然,还有其他拨号上网的办法: [Linux/Ubu ...

  10. xenserver 上传centos6.8镜像

    1.宿主机操作:   # mkdir /iso # xe sr-create name-label=system-iso type=iso device-config:location=/iso de ...