前端内容之CSS层叠样式表

CSS（Cascading Style Sheet层叠样式表）

把HTML认为是网页的骨架

那么CSS就是用于对HTML骨架进行修饰,比如加背景色、显示方式、位置等等属性

CSS语法形式：

一个完整的CSS样式需要具备选择器、声明两大部分，括号内的一条语句就是一个声明

前端内容之CSS层叠样式表

CSS三种引入方式

1、第一种：行内折叠括号内修饰：

<select name="" id="" style="background: #4ed6ff">
            <option value="admin">管理员</option>
            <option value="user">普通用户</option>
        </select>

在<select> 内的 style="background: #4ed6ff" 即对其进行的CSS样式定义

这种通常不建议大规模使用，代码繁琐且维护起来困难

2、第二种：HTML在<head></head>内定义，如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            color: #4ed6ff;
        }
    </style>
</head>
<body>
    <p>
        今天天气很好！
    </p>
</body>
</html>

3、第三种：外部样式文件引入，通过在<head></head>中使用link标签进行引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <p>
        今天天气很好！
    </p>
</body>
</html>

CSS之选择器：

1、基本选择器

元素选择器

前端内容之CSS层叠样式表

ID选择器

前端内容之CSS层叠样式表

类选择器

前端内容之CSS层叠样式表

图中 u1 是class的值不是ul

***用类选择器时，类名不应定义为数字开头，浏览器兼容性问题可能会导致某些浏览器不识别

***标签中的class属性如果有多个，要用空格分隔

通用选择器

前端内容之CSS层叠样式表

2、组合选择器

后代选择器

前端内容之CSS层叠样式表

儿子选择器

前端内容之CSS层叠样式表

毗邻选择器

前端内容之CSS层叠样式表

弟弟选择器

前端内容之CSS层叠样式表

3、属性选择器

前端内容之CSS层叠样式表

/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
  color: green;
}

模糊匹配的属性选择器