0.1.5

CSS层叠样式表

September 22, 2017

woobamboo

CSS层叠样式表

1. 使用CSS样式的方式

1. HTML <!DOCTYPE>声明标签

定义和用法：<!DOCTYPE>声明必须是HTML文档的第一行，位于标签之前

声明不是HTML标签；它是指示web浏览器关于页面是使用哪个HTML版本进行编写的指令。 在HTML 4.01中，声明引用DTD，因为HTML 4.01基于SGML。DLD规定了标记语言的规则，这样浏览器才能正确的呈现内容。 HTML5不基于SGML，所以不需要引用DTD

各版本的声明：

  • HTML5

    <!DOCTYPE html>
<meta charset="utf-8">

  • HTML 4.01

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    该DTD包含所有HTML元素和属性，包括展示性的和弃用的元素(比如font)，不允许框架集(framesets)

    <meta http-equiv=Content-Type content="text/html;charset=utf-8">

    注意的规则：

    单标记必须闭合：比如<br>必须写为<br/> ``<input />

    单属性必须添加属性值：比如:<input type="radio" checked>必须写为<input type="radio" checked="checked"/>

    标记和属性必须使用小写：<Body>、<BODY>是错误的，必须写为<body>

    属性的属性值必须使用"":在HTML4.01之前可以使用<body bgcolor=red>,HTML 4.01必须写为<body bgcolor="red">

2. 内链样式表

<body style="background-color:green;margin:0;padding:0;"><body>

3. 嵌入式样式表

需要将样式放在中

<style type="text/css"></style>
<!--例如：-->
<head>
  <title>CSS的使用方式</title>
  <style type="text/css">
    body{
      background-color: green;
      color: red;
    }
    p{
      background-color: red;
      color: green;
    }
  </style>
</head>

4. 引入式样式表

<link rel="StyleSheet" type="text/css" href="style.css">

<!--例如：-->
<!DOCTYPE html>
<html>
<head>
  <title>CSS的使用方式</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="color:white;">CSS的使用方式</h1>
</body> 
</html>

<!--在当前文件夹下存在文件style.css,内容如下-->
body{background-color: red;color:#fff;}

2. 定义CSS样式表

俗称：CSS选择器

1. HTML标记定义

比如HTML文档中有<p>...</p>标记，我们可以直接写下面的来定义

的样式：

p{属性:属性值;属性1:属性值1;}

p可以叫做选择器，定义那个标记中的内容执行其中的样式

一个选择器可以控制若干个样式属性，它们之间需要用英语的","隔开，最后一个可以不加","

<!--在head中定义-->
<style type="text/css">
   p{color:red;font-size:28px;}
</style>

<!--而在body中定义了<p>-->
<p>这句话将会使用CSS的设置</p>

2. Class定义

<p class="p">...</p>
class 定义是以"."开始
.p{属性：属性值；属性1：属性值1}

<!--比如-->
<!--在head中定义-->
<style type="text/css">
   .p{color:green;font-size:28px;}
   .p p{color:red;}
</style>

<!--在body中定义了<p>-->
<div class="p">
   这个将会使用.p的标记
   <p>这句话将会使用.p p的设置</p>
</div>

.p p{color:red;}这个叫做子选择器;选择了class="p"下一层的"p".

当然也可以:<div><p class="pp">这个...</p></div>然后在