本文最后更新于：1 年前

CSS3笔记

什么是CSS？

页面美化+布局控制

概念：

Cascading Style Sheets层叠样式表
层叠：多个样式可以作用在同一个HTML的元素上

好处：

功能强大
将内容的展示和央视的控制分离
- 降低耦合度，解耦
- 让分工协作更容易
- 提高开发效率

如何学习CSS（快速入门）

CSS选择器（重点+难点）

美化网页（文字，阴影，超链接，列表，渐变）

盒子模型

浮动

定位

网页动画（特效）

什么是CSS

CSS是层叠样式表 (Cascading Style Sheets)
不是编程语言
告诉浏览器如何指定样式、布局等

CSS发展史

CSS1.0

CSS2.0 DIV(块)+CSS CSS与html结构分离的思想网页变得简单 SEO

CSS2.1 浮动，+定位

CSS3.0 圆角+阴影+动画… 浏览器兼容性~

快速入门

CSS的使用：CSS与HTML的结合方式

内联样式

在标签内使用style属性指定CSS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
内联样式
    在标签内使用style属性指定CSS代码
-->
<h1 style="color: red">我的第一个网页</h1>
</body>
</html>

内部样式

在head标签内，定义style标签，style标签体的内容就是CSS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    内部样式
        在head标签内使用style标签指定CSS代码
    -->
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>
<body>

<h1>我的第一个网页</h1>
</body>
</html>

外部样式(推荐)

定义CSS资源文件
1. 在项目里新建一个CSS文件夹，里面用于存放CSS文件

在head标签内，定义link标签，引入CSS文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<h1>我的第一个网页</h1>
</body>
</html>

在CSS文件内填入如下CSS代码

1
2
3

h1 {
    color: red;
}

注意：这三种方式，CSS的作用范围越来越大

内联样式：只作用于当前定义了CSS代码的标签
内部样式：作用于一类标签
外部样式：作用于整个html

引入外部标签的另一种方法(了解)

1
2
3

<style>
    @import "CSS/style.css"
</style>

CSS基本语法

语法格式：

选择器 {
      属性:属性值;
    	属性:属性值;
      ...
 }

选择器：筛选具有相似特征的元素
每一对属性要用;隔开，最后一对属性可以不加；

CSS语法

CSS选择器（重点）

分类：

基础选择器

id选择器：选择具体的id属性值的元素，建议id值唯一

语法：#id属性值{}
id选择器优先级最高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        #div1 {
            color: blue;
        }
    </style>
</head>
<body>
<div id="div1">基础选择器</div>
<div>id选择器</div>
</body>
</html>

元素选择器：选择具有相同标签名称的元素。

语法：标签名称{}
id选择器的优先级高于元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        #div1 {
            color: blue;
        }
        div {
            color: red;
        }
    </style>
</head>
<body>
<div id="div1">基础选择器</div>
<div>元素选择器</div>
</body>
</html>

类选择器：选择具有相同class属性值的元素。

语法：.class属性值{}
类选择器优先级低于id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .cls1{
            color:yellow;
        }
    </style>
</head>
<body>
<div id="div1">基础选择器</div>
<div class="cls1">类选择器</div>
<div class="cls1">Hello</div>
</body>
</html>

扩展选择器

选择所有元素
- 语法：*{}
并集选择器
- 语法：选择器1,选择器2{}

 3. 子选择器：筛选选择器1下的选择器2元素

 - 语法：选择器1 选择器2{}

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拓展选择器</title>
    <style>
        div p {
            color: red;
        }
    </style>
</head>
<body>
<div>
    <p>helloworld</p>
</div>
<p>你好世界</p>
</body>
</html>

父选择器：选择选择器2上面的选择器1元素

语法：选择器1>选择器2{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拓展选择器</title>
    <style>
        div p {
            color: red;
        }

        div > p {
            border: 1px solid;
        }
    </style>
</head>
<body>
<div>
    <p>helloworld</p>
</div>
<p>你好世界</p>
</body>
</html>

属性选择器：选择元素名称，属性名=属性值的元素

语法：元素名称[属性名=”属性值”]{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拓展选择器</title>
    <style>
        div p {
            color: red;
        }

        div > p {
            border: 1px solid;
        }
        
        input[type="text"]{
            border: 2px solid;
        }
    </style>
</head>
<body>
<div>
    <p>helloworld</p>
</div>
<p>你好世界</p>
<input type="text">
<input type="password">
</body>
</html>

伪类选择器：选择元素具有的状态

语法：元素:状态{}
例如：
- 状态：
  - link:初始化的状态
  - visited:被访问过的状态
  - active:正在访问的状态
  - hover:鼠标悬浮状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link {
            color: pink;
        }

        a:active {
            color: yellow;
        }

        a:visited {
            color: blue;
        }

        a:hover {
            color: green;
        }
    </style>
</head>
<body>
<a href="https://linsip.cn">我的个人博客</a>
</body>
</html>

CSS常用属性

字体、文本

字体（font）

属性	说明	CSS
font	在一个声明中设置所有字体属性	1
font-family	规定文本的字体系列	1
font-size	规定文本的字体尺寸	1

文本（Text）

属性	说明	CSS
color	设置文本的颜色	1
line-height	设置行高	1
text-align	规定文本的水平对齐方式	1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style>
        h1 {
            color: pink;
            font-size: 40px;
            text-align: center;
            line-height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

背景

background：设置背景，复合属性

属性	说明	CSS
background	复合属性。设置对象的背景特性。	1
background-color	设置或检索对象的颜色。	1
background-image	background-color	1

边框
- border：设置边框，复合属性
尺寸
- width：宽度
- height：高度
盒子模型：控制布局
- margin：外边距，相对概念
- padding：内边距，相对概念
  - 默认情况下设置内边距会影响盒子的大小
  - box-sizing: border-box;设置盒子的属性，让width和height就是最终盒子的大小。
- float：浮动

练习

注册页面

笔记

CSS

博主码字不易，本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

JavaScript笔记上一篇

HTML5笔记下一篇