一，效果图。

二，代码。

<!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. Android基础-系统架构分析，环境搭建，下载Android Studio，AndroidDevTools，Git使用教程，Github入门，界面设计介绍

    系统架构分析 Android体系结构 安卓结构有四大层,五个部分,Android分四层为: 应用层(Applications),应用框架层(Application Framework),系统运行层(L ...

  2. 带你走进CSS定位详解

    学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...

  3. Vue-Cli 搭建项目 小白

    vue-用Vue-cli从零开始搭建一个Vue项目 Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组 ...

  4. Data - Spark简介

    Spark简介 Spark是基于内存计算的大数据并行计算框架,可用于构建大型的.低延迟的数据分析应用程序. HomePage:http://spark.apache.org/ GitHub:https ...

  5. requestAnimFrame 动画的使用方法

    //requestAnimFrame 封装,可以兼容所有浏览器 window.requestAnimFrame = (function(){ return window.requestAnimatio ...

  6. Xamarin.Android 记住账号

    1.存储登陆信息 if(login_cb_user.Checked) { ISharedPreferences prefs = PreferenceManager.GetDefaultSharedPr ...

  7. 取消vim打开文件全是黄色方法

    如下图: 取消方法: 按下esc键 :nohl 回车

  8. 第五章：Android布局

    View的布局显示方式有下面几种:线性布局(Linear Layout).相对布局(Relative Layout).表格布局(Table Layout).帧布局(FrameLayout).绝对布局( ...

  9. CentOS 6.5的安装详解（图文详解）

    不多说,直接上干货! 主流: 目前的Linux操作系统主要应用于生产环境, 主流企业级Linux系统仍旧是RedHat或者CentOS. 免费: RedHat 和CentOS差别不大,CentOS是一 ...

  10. 死锁排查的小窍门 --使用jdk自带管理工具jstack

    本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 开发时间久了,难免会写出一些一些死锁的代码,自己明明调用该方法可该方法就是不执行.不进该方法.日志也不打 ...