上一节:
下一节:

  HTML CSS

  • CSS设置HTML样式

    CSS可以通过3种方式添加到HTML元素：
    • 内联 - 通过在HTML元素中使用style属性
    • 内部 - 通过使用<style>元素在<head>元素内定义
    • 外部 - 使用外部CSS文件
    添加CSS的最常用方法是将样式保存在单独的CSS文件中。但是，在这里我们将使用内联和内部样式，因为这更容易演示，并且您更容易自己尝试。
    提示：您可以在我们的CSS教程中学习更多关于CSS的知识。

  • 内联CSS

    内联CSS用于将单一样式应用于单个HTML元素。 内联CSS使用HTML元素的style属性。 此示例将<h1>元素的文本颜色设置为蓝色： 
    <h1 style="color:blue;">欢迎来到菜鸟教程</h1>
    尝试一下

  • 内部CSS

    内部CSS用于为单个HTML页面定义样式。 内部CSS在HTML页面的<head>元素中一个<style>元素中定义： 
    <!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>PHP是世界上最好的语言！</h1>
<p>Java表示不服！</p>

</body>
</html>
    尝试一下

  • 外部CSS

    外部样式表用于定义许多HTML页面的样式。 使用外部样式表，您可以通过更改一个文件来更改整个网站的外观！ 要使用外部CSS，请在HTML页面的<head>部分中添加指向它的链接： 
    <!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="css/styles.css">
</head>
<body>

<h1>欢迎来到菜鸟教程！</h1>
<p>Java比C++如何？</p>

</body>
</html>
    尝试一下
    注意：外部css可以用绝对路径，也可以用相当路径（相对当前html文档的路径）。
    相对路径： 
    <link rel="stylesheet" href="css/styles.css">
    绝对路径： 
    <link rel="stylesheet" href="https://www.cainiaoya.com/css/styles.css">

  • CSS字体

    CSS color属性定义要使用的文本颜色。 CSS font-family属性定义要使用的字体。 CSS font-size属性定义要使用的文本大小。 
    <!DOCTYPE html>
<html>
<head>
<style>
h1 {
   color: blue;
   font-family: verdana;
   font-size: 300%;
}
p  {
   color: red;
   font-family: courier;
   font-size: 160%;
}
</style>
</head>
<body>

<h1>欢迎来到菜鸟教程！</h1>
<p>PHP和Java的Fans掐架了！</p>

</body>
</html>
    尝试一下

  • CSS边框

    CSS border属性定义HTML元素周围的边框： 
    <!DOCTYPE html>
<html>
<head>
<style>
p {
   border: 1px solid powderblue;
}
</style>
</head>
<body>

<h1>这是标题</h1>

<p>这是段落1</p>
<p>这是段落2</p>
<p>这是段落3</p>

</body>
</html>
    尝试一下

  • CSS内边距

    CSS padding属性定义文本和边框之间的填充： html_5 
    <!DOCTYPE html>
<html>
<head>
<style>
p {
   border: 1px solid powderblue;
   padding: 30px;
}
</style>
</head>
<body>

<h1>这是标题</h1>

<p>这是段落1</p>
<p>这是段落2</p>
<p>这是段落3</p>

</body>
</html>
    尝试一下

  • CSS外边距

    CSS margin属性定义边框外的边距的填充： 
    <!DOCTYPE html>
<html>
<head>
<style>
p {
   border: 1px solid powderblue;
   margin: 50px;
}
</style>
</head>
<body>

<h1>这是标题</h1>

<p>这是段落1</p>
<p>这是段落2</p>
<p>这是段落3</p>

</body>
</html>
    尝试一下

  • id属性

    要为一个特殊元素定义特定样式，请为该元素添加一个id属性： 
    <!DOCTYPE html>
<html>
<head>
<style>
#p_third {
   color:blue;
}
</style>
</head>
<body>

<h1>这是标题</h1>

<p>这是段落1</p>
<p>这是段落2</p>
<p id="p_third">这是段落3</p>

</body>
</html>
    尝试一下
    注意：元素的id名称在页面中应该是唯一的，因为id选择器用于选择一个唯一元素！

  • class属性

    要为特殊类型的元素定义样式，请为元素添加class属性： 
    <!DOCTYPE html>
<html>
<head>
<style>
.warning {
   color:red;
}
</style>
</head>
<body>

<h1>这是标题</h1>

<p class="warning">这是段落1</p>
<p class="warning">这是段落2</p>
<p>这是段落3</p>

</body>
</html>
    尝试一下

  • 章节总结

    • 使用HTML style属性进行内联样式设置
    • 使用HTML <style>元素定义内部CSS
    • 使用HTML <link>元素引用外部CSS文件
    • 使用HTML <head>元素和<style>元素包含<link>元素
    • 将CSS color属性用于文本颜色
    • 将CSS font-family属性用于文本字体
    • 将CSS font-size属性用于文本大小
    • 使用CSS border属性作为边框
    • 将CSS padding属性用于边框内的空间
    • 将CSS margin属性用于边框外的空间
上一节:
下一节: