CSS基础知识

基础

简介

CSS (Cascading Style Sheets)[层叠样式表]
CSS可以同时控制多张网页的布局
样式表可以写在行内、头部或css文件

行内样式

使用：

<!DOCTYPE html>
<html>
  <head>
    <title>文档标题</title>
  </head>
  <body>
    <div style="background-color:red;color:#fff;">行内样式</div>
  </body>
</html>

头部样式

使用：

<!DOCTYPE html>
<html>
  <head>
    <title>文档标题</title>
    <style>
      #head{
          background-color:red;
        color:#fff;
      }
    </style>
  </head>
  <body>
    <div id="head">头部样式</div>
  </body>
</html>

外部引入样式

使用：

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>文档标题</title>
    <!-- index.html和index.css在同一个文件夹 -->
    <link rel="stylesheet" href="./index.css" type="text/css" >
  </head>
  <body>
    <div id="outside">引入外部样式</div>
  </body>
</html>

index.css

#outside{
        background-color:red;
    color:#fff;
}

CSS语法

CSS语法的构成:

选择器{属性: 值; }

例：

#outside{color:#fff;}

ps: 行内样式只需要属性和值

CSS选择器

通用选择器

选取所有元素
基本使用：

* {
  color: red;
}

元素选择器(分组选择器)

直接选取元素，设置属于该元素名的样式
基本使用：

p {
  color: red;   /* 所有的p标签里面的字体颜色为:red */
}

基础选择器

根据名id、类名来选取元素
注意：id具有唯一性且一个文档里面不可重复使用，类名可以重复使用
基本使用：

#id {
  color: red;  /* 只有唯一id里面的字体颜色为:red */
}
.class {
  color: red;     /* 所有的叫class的类名里面的字体颜色为:red */
}

组合器选择器

根据它们之间的特定关系来选取元素
基本使用：

p.class {
  color: red; /* 所有p标签下面类名叫class的元素里面的字体颜色为:red */
}

伪类选择器

根据特定状态选取元素
基本使用：

a:link { /* 未访问的链接 */
  color: red;
}
a:hover { /* 鼠标悬停链接 */
  color: red;
}
a:visited { /* 已访问的链接 */
  color: red;
}
a:active { /* 已选择的链接 */
  color: red;
}

伪元素选择器

根据特定状态选取元素
使用规则：

p::after                    在每个 <p> 元素之后插入内容。
p::before                    在每个 <p> 元素之前插入内容。
p::first-letter        选择每个 <p> 元素的首字母。
p::first-line            选择每个 <p> 元素的首行。
p::selection            选择用户选择的元素部分。

属性选择器

根据属性或属性值来选取元素
基本使用：

div,span{
    color: red; /* 所有的div标签和span标签里面的字体颜色为：red */
}

前端入门教程

CSS