HTML+CSS学习笔记

一、html和CSS的关系

1.HTML是超文本格式，它可以包含普通文字，图画，视频，声音的网页；CSS是HTML网页中文字的大小，颜色，边框的大小，颜色的修饰，总的来说CSS就相当于是HTML的外衣；

二、HTML引入CSS的四种方法

1.行内式
行内式是在标HTML标签的style属性中写CSS样式。这种方法层级效应最高。

 <div style="color:red">行内式</div>

2.嵌入式:

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head>
    <style>
       .item{
           color: green;
       }
    </style>
</head>
<body>
        <div class="item">嵌入式</div>
</body>

3.链接式

将一个.css格式的外部文件引入到HTML文件中，一般我们使用这种方法，语法如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <link href="mystyle.css" rel="stylesheet" />
</head>

<body>

</body>

</html>

4.导入式

将一个.css格式的外部文件导入HTML文件当中

<!DOCTYPE html>
<html lang="en">

<head>
    <style type="text/css">
        @import"style.css";
    </style>
</head>

<body>

</body>

</html>

三、CSS选择器

1.元素选择器------格式如下（HTML文件中的所有DIV标签跟P标签样式将被设置一下样式）

<style type="text/css">
      div{
          color: black;
      }
      p{
          color: red;
      }
    </style>

2.类选择器-------格式如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <style type="text/css">
      .item{
          color: black;
      }
      .item-one{
          color: green;
      }
    </style>
</head>

<body>
     <div class="item">类选择器</div>
     <div class="item-one">类选择器</div>
</body>

</html>

3.id选择器-------格式如下（id选择器在同一个HTML文件中的名字是独一无二的，不能存在两个相同名字的id）

<!DOCTYPE html>
<html lang="en">

<head>
    <style type="text/css">
      #my-id{
          color: black;
      }
    </style>
</head>

<body>
     <div id="my-id">id选择器</div>
</body>

</html>

编不下去了。。。。。。。。。