一、HTML 样式- CSS
CSS(Cascading Style Sheets)可译为“层叠样式表”或“级联样式表”,它定义如何显示 HTML 元素,用于控制 Web 页面的外观。
CSS 用于渲染HTML元素标签的样式。样式存储在样式表中,通常放在<head>部分或存储在外部CSS文件中。
二、使用 CSS
CSS 可以通过以下方式添加到 HTML 中:
- 内联样式
在HTML元素中使用style
属性 - 内部样式表
在HTML文档头部<head>
区域使用<style>
元素来包含CSS - 外部引用
使用外部 CSS 文件(最好的方式)
(一)内联样式
<h1>标题一</h1>
<p>段落一。。。。。。</p>
<a href="http://www.baidu.com/" style="text-decoration:none;">访问百度</a>
<p style="color:blue;margin-left:20px;">段落二。。。。。。</p>
(二)内联样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<meta charset="utf-8">
<style type="text/css">
h1 {color:green;}
p {color:yellowgreen;}
</style>
</head>
<body>
<h1>标题一</h1>
<p>段落一。。。。。。</p>
<a href="http://www.baidu.com/" style="text-decoration:none;">访问百度</a>
</body>
</html>
(三)外部链接
CSS文件
h1 {color:blueviolet;}
p {color:greenyellow;}
外部链接实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/PRO_Python3/Python学习/Test2018/TestCSS/CSS01.css">
</head>
<body>
<h1>标题一</h1>
<p>段落一。。。。。。</p>
<a href="http://www.baidu.com/" style="text-decoration:none;">访问百度</a>
</body>
</html>
(四)CSS 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/PRO_Python3/Python学习/Test2018/TestCSS/CSS01.css">
</head>
<body style="background-color:lightskyblue;">
<h1 style="font-family:verdana;text-align:center;">标题一</h1>
<p>段落一。。。。。。</p>
<a href="http://www.baidu.com/" style="text-decoration:none;">访问百度</a>
<p style="background-color:greenyellow;color:blue;margin-left:20px;">段落二。。。。。。</p>
</body>
</html>