一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>html css</title>

    <!--html使用样式-->

    <style type="text/css">

    h1 {

        color: red;

    }

    p {

        color: blue;

    }

    </style>

    <!--链接到一个外部样式表-->

    <link rel="stylesheet" type="text/css" href="styles.css">

    <!--内部样式表-->

    <style type="text/css">

    body {

        background-color: yellow;

    }

    p {

        color: blue;

    }

    </style>

    <!--外部样式表-->

    <link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body style="">

    <h1>This is heading</h1>

    <p>This is paragraph</p>

    <!--style属性制作一个没有下划线的链接-->

    <a href="http://www.baidu.com" style="text-decoration:none">百度</a>

    <h1>I am formatted with an external style sheet</h1>

    <p>Me too</p>

    <!--内联样式-->

    <p style="color:blue;margin-left=20px;">this is a paragraph</p>

    <!--背景颜色-->

    <h2 style="">this is a heading</h2>

    <p style="">this is a paragraph.</p>

    <!--字体，字体颜色，字体大小-->

    <h1 style="font-family:verdana;">A heading</h1>

    <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

    <!--文本对齐方式-->

    <h1 style="text-align:center;">Center-aligned heading</h1>

    <p> this is a paragraph</p>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-HTML-CSS的更多相关文章

  1. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  2. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  3. DW网页代码笔记

    DW网页代码笔记 1.样式.       class  插入类样式  标签技术(html)解决页面的内容样式技术(css)解决页面的外观脚本技术       解决页面动态交互问题<form> ...

  4. 前端学习:JS(面向对象)代码笔记

    前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...

  5. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  6. Tridiv：基于 Web 的 CSS 编辑器，创建炫丽 3D 图形

    Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状.它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果.使用 Tridiv 可以创 ...

  7. 【hadoop代码笔记】Mapreduce shuffle过程之Map输出过程

    一.概要描述 shuffle是MapReduce的一个核心过程,因此没有在前面的MapReduce作业提交的过程中描述,而是单独拿出来比较详细的描述. 根据官方的流程图示如下: 本篇文章中只是想尝试从 ...

  8. 【hadoop代码笔记】hadoop作业提交之汇总

    一.概述 在本篇博文中,试图通过代码了解hadoop job执行的整个流程.即用户提交的mapreduce的jar文件.输入提交到hadoop的集群,并在集群中运行.重点在代码的角度描述整个流程,有些 ...

  9. 【Hadoop代码笔记】目录

    整理09年时候做的Hadoop的代码笔记. 开始. [Hadoop代码笔记]Hadoop作业提交之客户端作业提交 [Hadoop代码笔记]通过JobClient对Jobtracker的调用看详细了解H ...

  10. 写给自己的web总结——css篇（1）

    上一篇写了关于html的知识,算是小试牛刀,这次来尝试写一下css. 初步了解css css的全称为cascading style sheet-- 层叠样式表,通过编入代码来对html里的标签做出各种 ...

随机推荐

  1. Python Socket请求网站获取数据

     Python Socket请求网站获取数据 ---阻塞 I/O     ->收快递,快递如果不到,就干不了其他的活 ---非阻塞I/0 ->收快递,不断的去问,有没有送到,有没有送到,. ...

  2. Hadoop生态系统之Yarn

    Apache YARN(Yet Another Resource Negotiator) 是Hadoop的集群资源管理系统.YARN被引入Hadoop2最初是为了改善MapReduce的实现,但它具有 ...

  3. html css 其他常用 onclick跳转

    opacity: 0.5. 0-1 透明度 cursor: pointer;手指 clear:both 清楚浮动 我是医生不是人 文本内容超出框word-wrap:break-word; word-b ...

  4. 第六章：四大组件之Activity

    tivityActivity作为Android四大组件之一,也是其中最重要的一个组件.作为一个与用户交互的组件,我们可以把Activity比较成为windows系统上的一个文件夹窗口,是一个与用户交互 ...

  5. Hadoop项目实战－用户行为分析之应用概述（一）

    1.概述 本课程的视频教程地址:<Hadoop 回顾> 好的,下面就开始本篇教程的内容分享,本篇教程我为大家介绍我们要做一个什么样的Hadoop项目,并且对Hadoop项目的基本特点和其中 ...

  6. 如何发布一个npm包(基于vue)

    前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础, ...

  7. 1-监控界面sql保存

    1, BufferSize_machine 1), template 主要用来监控buffersize的状态的 name: 模块名字, 用于后续调取使用, label: 模块显示名字, 在页面显示的 ...

  8. 120分钟React快速扫盲教程

    在教程开端先说些题外话,我喜欢在学习一门新技术或读过一本书后,写一篇教程或总结,既能帮助消化,也能加深印象和发现自己未注意的细节,写的过程其实仍然是一个学习的过程.有个记录的话,在未来需要用到相关知识 ...

  9. 个人觉得非常好用的mysql客户端工具的HeidiSQL

    感觉比Navicat好用,能显示注释,而且还有绿色版,轻量级 下载地址:http://www.heidisql.com/download.php

  10. 一篇迟到的gulp文章，代码合并压缩，less编译

    前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gul ...