CSS (Cascading Style Sheets)级联样式表

内联样式

  • 内联样式- 在HTML元素中使用"style" 属性

使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距

<p style="color:blue;margin-left:20px;">This is a blue paragraph and with 2 blank in the left.</p>

font-family: 字体

color: 字体颜色

font-size: 字体大小 例如： font-size:16px

margin-left: 左缩进

text-align: 文本对齐方式

background-color: 背景颜色

练习：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我要学HTML</title>
</head>
<body style="background-color:yellow;">
<h1 style="text-align: center;color:green">整体背景为中黄色
</h1>
<h2 style="background-color:red;">这是一个红底色标题</h2>
<p style="background-color:green;">这是一个绿底色段落。</p>

<a href="http://www.cnblogs.com/thomason/">使用了 a标签和href 属性,链接到我的博客</a>
<p style="color:blue;margin-left:20px;">This is a blue paragraph and with 2 blank in the left.</p>
</body>
</html>

 外部样式表

要改变整个站点多个页面的外观要用到外部样式表，用到<link rel="stylesheet" type="text/css" href="...css">标签，但这些还没学到，以后再说吧。

学习HTML 第三节.接近正题：HTML样式-CSS级联样式表的更多相关文章

  1. CSS级联样式表-css选择器

    CSS概念 Cascading Style sheet 级联样式表 表现HTMl或XHTML文件样式的计算机语言 包括对字体,颜色,边距,高度,宽度,背景图片,网页定位等设定 建议:把表示样式的代码从 ...

  2. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...

  3. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  4. 风炫安全WEB安全学习第二十三节课 利用XSS获取COOKIE

    风炫安全WEB安全学习第二十三节课 利用XSS获取COOKIE XSS如何利用 获取COOKIE 我们使用pikachu写的pkxss后台 使用方法: <img src="http:/ ...

  5. OpenXml SDK学习笔记（4）：设置文件级别的样式

    观察上一段日记最后的代码: 这里的样式基本可以理解为行内CSS.那么既然有行内的样式,就肯定有外部的样式.那这部分就对应笔记1里说的style.xml文件.这个文件对应的是Document.MainD ...

  6. 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖

    1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...

  7. 【css学习整理】css基础(样式,语法,选择器)

    CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...

  8. HTML学习笔记（三）样式CSS

    1.样式 外部样式表(通过css文件定义样式,整体样式) 当样式需要被应用到很多页面的时候,使用外部样式表,在 head 部分<link>. <head> <link r ...

  9. node.js入门学习（二）MIME模块，request和response对象，demo之不同url请求不同html页面，页面包含图片、样式css等静态资源

    一.构建http服务程序-根据不同请求做出不同响应 // 加载http模块 var http = require("http"); // 创建一个http服务对象 http.cre ...

随机推荐

  1. @PostConstruct与@PreDestroy讲解及实例

    关于在spring  容器初始化 bean 和销毁前所做的操作定义方式有三种: 第一种:通过@PostConstruct 和 @PreDestroy 方法 实现初始化后和销毁bean之前进行的操作 第 ...

  2. 如何在ubuntu中安装CP-ABE

    cpabe依赖pbc,pbc依赖gmp,gmp依赖M4.bison.flex,所以先安装后面的 安装m4 $   sudo apt-get install m4 安装 flex 安装 bison 1 ...

  3. windows7系统PC机耳机没有声音

    排除耳机故障和主机耳机孔等硬件问题之后 可能情况: 1.进行音量设置 2.更新声卡驱动 (使用驱动程序进行检测并进行更新) 360驱动大师 驱动精灵 3.windwows相关设置存在问题 (1)打开控 ...

  4. PHP扩展模块redis安装

    PHP扩展redis模块安装 当我们安装好php之后可能会忘记装一些模块,或者需要增加模块的时候我们可以使用扩展模块安装. 查看php加载了哪些模块,使用命令 /usr/local/php/bin/p ...

  5. Selenium自动化测试之基本控件使用

    Selenium自动化测试之基本控件使用 1.输入框input: 在Html中样式: <input id="username" type="text"&g ...

  6. 404 Note Found 队 Alpha8

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...

  7. mysql 全量备份与增量备份

    全量备份[root@master adm]# cat DBfullBak.sh #!/bin/bash #use mysqldump to fully backup mysql data BakDir ...

  8. Java中的集合框架-Map

    前两篇<Java中的集合框架-Commection(一)>和<Java中的集合框架-Commection(二)>把集合框架中的Collection开发常用知识点作了一下记录,从 ...

  9. 我们比较常见的PHP实现openSug.js参数调试

    这是一款利PHP对百度搜索下拉框提示免费代码实现参数配置调试的程序源代码. 由想要对网站进行搜索下拉调试的站长朋友们进行方便.快速的效果演示,具体参考下面的PHP代码. 如何使用? 请新建一份PHP文 ...

  10. Cloudera环境搭建

    在开发阶段,可以单机搭建环境安装Flume和Solr,在两个工程的官网下载相关文件. 还有另一种更便捷的方式,就是使用Cloudera提供的镜像,包括了已经配置好的各种大数据服务环境的docker镜像 ...