HTML 样式- CSS
如何使用CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。
你可以通过本站的CSS教程 CSS 教程学习更多的CSS知识.
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
学习更多样式，请访问 CSS 教程.
HTML样式实例 - 背景颜色
背景色属性（background-color）定义一个元素的背景颜色：
早期背景色属性（background-color）是使用 bgcolor 属性定义。
HTML 样式实例 - 字体, 字体颜色 ，字体大小
我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:
实例
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。
HTML 样式实例 - 文本对齐方式
使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：
文本对齐属性 text-align取代了旧标签 <center> 。
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:
<style type="text/css">
body {}
p {color:blue;}
</style>
</head>
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML 样式标签
| 标签 | 描述 |
|---|---|
| <style> | 定义文本样式 |
| <link> | 定义资源引用地址 |
已弃用的标签和属性
在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。
不建议使用的标签有: <font>, <center>, <strike>
不建议使用的属性: color 和 bgcolor.
HTML 样式- CSS的更多相关文章
- FontAwesome 4.7.0 中完整的675个图标样式CSS参考
FontAwesome 4.7.0 中完整的675个图标样式CSS参考 用法:首先引入CSS文件:<link href="https://maxcdn.bootstrapcdn.com ...
- 炫酷的CSS3抖动样式:CSS Shake
CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...
- node.js入门学习（二）MIME模块，request和response对象，demo之不同url请求不同html页面，页面包含图片、样式css等静态资源
一.构建http服务程序-根据不同请求做出不同响应 // 加载http模块 var http = require("http"); // 创建一个http服务对象 http.cre ...
- css样式 --- CSS hack
前端样式,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一 ...
- 增加字体和颜色样式-------CSS
通过使用CSS,控制文本的字体,风格和颜色 1.基本操作: body{ font-family: Verdana, Geneva, Tahoma, sans-serif } body{ font-si ...
- 结构-行为-样式-Css笔记
0.常见的行级元素和块级元素: 行级元素:div,table,form ,ul,ol,p,h1-h6,hr; 块级元素:a,select,input,textarea,img,label,br,i, ...
- CSS样式----CSS的继承性和层叠性（图文详解）
CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...
- 点击盒子选中里面的单选框，并给盒子添加相应样式，美化单选框、复选框样式css用法，响应式滴
pc效果图: 移动端效果图: 代码直接上: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- JS判断不同操作系统显示不同样式css
<script type="text/javascript"> var system ={}; var p = navigator.platform; //判断是否为P ...
随机推荐
- DWR整合之Servlet
DWR 与 Servlet 有 2 个 Java 类你一般需要用在 DWR 中,是 webContext 和 WebContextFactory 在 DWR 1.x 它们在 uk.ltd.getahe ...
- 基于Verilog HDL 的数字电压表设计
本次实验是在“基于Verilog HDL的ADC0809CCN数据采样”实验上进一步改进,利用ADC0809采集到的8位数据,进行BCD编码,以供查表方式相加进行显示,本次实验用三位数码管. ADC0 ...
- MFC-----在MFC中使用Picture控件加载任意图片
对于刚刚接触OpenCV的童鞋来说,如何在MFC中加载并显示一张图片.应该是初期必定会碰到的问题之一.因此本文在分享这方面经验的同时,也相当于是写给自己的一份备忘录. 本文使用的是OpenCV2.1+ ...
- @Resource @Autowired 区别
spring2.5提供了基于注解(Annotation-based)的配置,我们可以通过注解的方式来完成注入依赖.在Java代码中可以使用 @Resource或者@Autowired注解方式来经行注入 ...
- jQuery方式事件冒泡的2个方法
方式1:通过 event.stopPropagation(); $("div").click(function (event) { slide.call(this); event ...
- openstack controller ha测试环境搭建记录（十四）——配置cinder（存储节点）
先简述cinder存储节点的配置: 1.IP地址是10.0.0.41: 2.主机名被设置为block1: 3.所有节点的hosts文件已添加相应条目: 4.已经配置了ntp时间同步: 5.已 ...
- Building Your First EDM
1 文件--新建--项目 控制台应用程序,填写信息,确定: 2 在解决方案管理器中,选中AmyConsoleApp,添加新项, 选择ADO.NET 实体数据模型,添加: 3 在选择模型内容中选择“从数 ...
- 自动化运维 Ansible
自动化运维 Ansible 特性 (1).no agents:不需要在被管控主机上安装任何客户端: (2).no server:无服务器端,使用时直接运行命令即可: (3).modules in an ...
- jsoncpp第二篇------API
更多API参考jsoncpp头文件 1 jsoncpp的api简要说明 1,解析(json字符串转为对象) std::string strDataJson; Json::Reader JReader ...
- ZOJ 3933 Team Formation
费用流裸题......比赛的时候少写了一句话....导致增加了很多无用的边一直在TLE #include<cstdio> #include<cstring> #include& ...