♀♀♀♀

CSS总结

`CSS`总结

一、`CSS`重点知识

一条css样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明：

选择器是您需要改变样式的对象（上图的规则就一级标题生效）。

每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS的注释为 /**/

三种选择器

1）包括元素选择器、id选择器、class选择器

2）id选择器

/* 注意：id选择器前有 # 号。 */
#sky{
       
  color: blue;
}

<p id="sky">蓝色的天空p>
<p id="forest">绿色的森林p>

（解释：“蓝色的天空”这几个字将会是蓝色的）

3）class选择器

/* 注意：class选择器前有 . 号。 */
.center{
     
  text-align: center;
}
.large{
     
  font-size: 30px;
}
.red{
     
  color: red;
}

(解释：以上代码定义了三条规则，分别应用于页面上对应的元素，如只要页面上某元素的class为red，那么就让它呈现红色）

CSS生效的三种方法：外部样式表、内部样式表、内联样式

（一）外部样式表

需要新建一个HTML文件（后缀名为.html），然后在同一目录下新建一个样式表文件（后缀名为css）

例如下：

HTML文件


<html>
<head>
  <meta charset="utf-8">
  
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题title>
head>
<body>
  <h1>我是有样式的h1>
  <hr>
  <p class="haha">还是有点丑：)p>
body>
html>

mycss.css文件

body {
     
  background-color: linen;
  text-align: center;
}
h1 {
     
  color: red;
}
.haha {
     
  margin-top: 100px;
  color: chocolate;
  font-size: 50px;
}

（二）内部样式表

将样式放入HTML文件中


<html>
<head>
  <meta charset="utf-8">
  
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题title>
  <style>
    body {
      
      background-color: linen;
      text-align: center;
    }
    h1 {
      
      color: red;
    }
    .haha {
      
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  style>
head>
<body>
  <h1>我是有样式的h1>
  <hr>
  <p class="haha">还是有点丑：)p>
body>
html>

注意：在元素中引入了

CSS总结

CSS总结

一、CSS重点知识

`CSS`总结

一、`CSS`重点知识