HTML 超链接，HTML 样式- CSS
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
尝试一下 - 实例
HTML 链接
如何在HTML文档中创建链接。
(可以在本页底端找到更多实例)
HTML 超链接（链接）
HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
HTML 链接语法
链接的 HTML 代码很简单。它类似这样：
<a href="url">链接文本</a>
href 属性描述了链接的目标。.
实例
<a href="https://www.runoob.com/">访问菜鸟教程</a>
上面这行代码显示为：访问菜鸟教程
点击这个超链接会把用户带到菜鸟教程的首页。
提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
HTML 链接 - target 属性
使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
实例
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
尝试一下 »
HTML 链接- id 属性
id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。
实例
在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
<a href="#tips">访问有用的提示部分</a>
或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>
HTML 样式- CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
Look! Styles and colors
Manipulate Text
Colors, Boxes
and more...
尝试一下 »
尝试一下 - 实例
HTML使用样式
本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。
本例演示如何使用样式属性做一个没有下划线的链接。
如何使用 style 属性制作一个没有下划线的链接。
链接到一个外部样式表
本例演示如何 标签链接到一个外部样式表。
如何使用CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。
你可以通过本站的 CSS 教程 学习更多的 CSS 知识。
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
学习更多样式，请访问 CSS 教程.
HTML样式实例 - 背景颜色
背景色属性（background-color）定义一个元素的背景颜色：
实例
<body style="background-color:yellow;"> <h2 style="background-color:red;">这是一个标题</h2> <p style="background-color:green;">这是一个段落。</p> </body>
尝试一下 »
早期背景色属性（background-color）是使用 bgcolor 属性定义。
尝试一下: 旧版HTML来设置背景方式
HTML 样式实例 - 字体, 字体颜色 ，字体大小
我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:
实例
<h1 style="font-family:verdana;">一个标题</h1> <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
尝试一下 »
现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。
HTML 样式实例 - 文本对齐方式
使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：
实例
<h1 style="text-align:center;">居中对齐的标题</h1> <p>这是一个段落。</p>
尝试一下 »
文本对齐属性 text-align取代了旧标签 <center> 。
尝试一下
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
HTML 样式标签
| 标签 | 描述 |
|---|---|
| <style> | 定义文本样式 |
| <link> | 定义资源引用地址 |
已弃用的标签和属性
在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。
不建议使用的标签有: <font>, <center>, <strike>
不建议使用的属性: color 和 bgcolor.
HTML 超链接，HTML 样式- CSS相关推荐
- CSS a控制超链接文字样式
超链接的代码 <a href="http://www.divcss5.com/" target="_blank" title="关于div cs ...
- Web学习第四天——CSS简介、选择器，常用（文本、字体、列表、背景、超链接）样式
Web学习第四天--CSS简介.选择器,常用(文本.字体.列表.背景.超链接)样式 一.CSS简介 (一).什么是CSS? (二).CSS能够干什么? (三).CSS语法结构 (四).CSS的使用方式 ...
- html链接伪类设置鼠标悬停,链接伪类可以控制超链接的样式吗？是怎样实现的？...
定义超链接时,为了提高用户体验,经常需要为超链接指定不同的状态,使得超链接在点击前.点击后和鼠标悬停时的样式不同.在CSS中,通过链接伪类可以实现不同的链接状态,下面将对链接伪类控制超链接的样式进行详 ...
- css怎样通过超链接更改背景,css超链接的底色如何设置
css超链接底色的设置方法:首先创建一个HTML示例文件:然后通过对超链接添加css样式属性为"a:link {color:#FF0000;}a:visited {color:#00FF00 ...
- 打印样式CSS的技巧和要点
不经过任何处理而直接打印网站上的页面会得到一个不理想的效果.我们WEB开发人员可以简单的采用几个要点来使之达到较为合适的效果: 使用响应式布局设置打印的效果 打印背景图片和颜色,在合适的时候 添加显示 ...
- html语言怎么做超链接,html中如何设置超链接的样式_WEB前端开发
如何利用js实现水平移动与垂直移动效果_WEB前端开发 本文为大家实例介绍了如何利用js实现水平移动与垂直移动效果,具有一定的参考价值,希望可以帮助到大家.水平移动可以看成是一个物体的左边距变化,垂直 ...
- html如何设置四个链接,HTML基础（四）——设置超链接的样式示例
***设置超链接的样式示例 a:link超链接被点前状态 a:visited超链接点击后状态 a:hover悬停在超链接时 a:active点击超链接时 在定义这些状态时,有一个顺序l v h a 代 ...
- css球形颜色选择器,在CSS选择器中使用color颜色样式CSS代码
CSS颜色样式篇目录认识CSS 颜色(color) 网页颜色基础 两种方法设置对象颜色样式 文字颜色控制color 网页背景颜色color 边框颜色color 网页color RGB设置 网页colo ...
- HTML样式 - CSS
学习资料来源于HTML样式 - CSS 参考链接:HTML-CSS CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式 CSS(Cascading Style S ...
最新文章
- 使用pandas correlation函数批量删除相关性冗余特征、实现特征筛选（feature selection）
- Oracle-使用awrrpt.sql生成AWR报告
- Laravel Passport里的授权类型介绍
- 通过kubeadm安装kubernetes 1.7文档记录[docker容器方式]
- linux htb 源代码,LINUX TC:HTB相关源码
- java 蓝桥杯算法训练 数组查找及替换
- 森林怎么训练野人_138年前抓的“野人女孩”，最终命运如何？死前心愿让人心酸...
- MySQL建表时Incorrect table definition; there can be only one TIMESTAMP column with CURRENT_TIMESTAMP
- PL/SQL 调用JAVA使用UDP发送数据
- HCIE-Security Day27：IPSec：实验(二）两个网关之间通过手工方式创建IPSec PN隧道
- C# 7.0特性与vs2017
- 百度手机输入法，如何使用五笔98版？
- 单片机交通灯实训c语言编程,单片机交通灯程序（C语言）.docx
- python连接微信运动_用Python霸屏微信运动，横扫支付宝榜单 ！
- 此语言无法安装在此计算机上win10,如何解决Win10换成无法安装英文语言包的问题...
- 机器学习笔记 - 什么是先验算法(Apriori Algorithm)？
- 人际网络营销与网站运营、策划、推广一体化结合
- Take me to your heart 《吻别》英文版 已配了歌词
- 管理感悟：今后公司工作的建议
- 阿里云天池大赛赛题解析——深度学习篇