HTML学习：CSS的使用

2018-08-05 本文已影响269人虞锦雯

一、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>

内联样式.png

（二）内联样式表

<!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>

内联样式表.png

（三）外部链接

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>

外部链接.png

（四）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>

CSS 实例.png