【CSS3】CSS3 学习笔记（1w字+）

最新推荐文章于 2022-11-12 14:34:45 发布

Artlex

最新推荐文章于 2022-11-12 14:34:45 发布

阅读量291

点赞数

分类专栏：前端文章标签： css html css3 html5

本文链接：https://blog.csdn.net/weixin_42159233/article/details/109146661

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS3 学习笔记

一 l CSS 基础
二 l CSS 选择器
三 l CSS 样式
四 l CSS 动画
五 l CSS 常用操作

一 l CSS 基础

（一）CSS 介绍

CSS指层叠样式表，堆叠样式的工具

小范围的样式定义层级高于大范围的样式定义

1、CSS 教程

本文参考教程：[H5+CSS+JS视频教程]
一般当字典用：[CSS 教程（菜鸟教程）]

2、CSS 编写规范

[CSS 规范易读版]
[Google HTML/CSS 规范]

（二）CSS 基础语法

/* 单属性 */
selector {
  property: value;
}

/* 多属性 */
selector {
  property1: value1;
  property2: value2;
}

二 l CSS 选择器

（一）元素选择器

选择页面的某种元素

body {
}
示例解释：选择器选择了body元素

（二）选择器分组（多个选择器使用同一个样式）

selector1,
selector2,
selector3 {
 property: value;
}
示例解释：这里选择了3个选择器

* {
}
示例解释：这里使用通配符选择了所有元素 【规范代码中不允许使用】

（三）类选择器

类选择器以".类名"选择元素

类选择器可以和派生选择器一起用，将标签名换成".类名"就好

1、全选相同类名

<div class="divclass">hello css</div>

.divclass {
 color: #f00;
}

2、结合元素选择器（选择指定标签下的指定类名）

<div class="classname">div</div>
<a class="classname">a</a>
a.classname {
 color: #f00;
}
示例解释：这里只选择了a标签的classname，没有选择div标签 【规范代码中不推荐使用】

3、多类选择器（通过多个类名选择）

<p class="p1">sthis is my web page</p>
<p class="p2">this is my web page</p>
<p class="p1 p2">this is my web page</p>
.p1 {
 color: blue;
}
.p2 {
 font-size: 30px;
}
.p1.p2 {
 font-style: italic;
}
示例解释：当类定义为"p1 p2"时，会同时拥有两个类定义的效果，此时定义独属于自己的样式时要调用".p1.p2"

（四）id选择器

id选择器以"#id名"来定义，为标有id的HTML元素指定样式

id选择器可以和派生选择器一起用，将标签名换成"#id名"就好

<div id="divid">hello css</p>

#divid {
 color: #f00;
}

（五）属性选择器

对带有指定属性的HTML元素设置样式

<div title="t">hello css</p>
[title] {
}
[title="te"] {
}
[title~="te"] {
}
示例解释：[title]选择设置了title属性的HTML元素；[title="te"]选择设置了title="te"属性的HTML元素；[title~="te"]选择设置了title="X"且X包含"te"属性的HTML元素

（六）补充与扩展

1、补充

补充1：继承（小标签如果没定义样式，会自动使用大标签的css配置）
body {
 color: #f00;
}
示例解释：<body>内的标签如果没有定义，都会默认使用红色。

补充2：id选择器与class选择器差别
id选择器：名称 不可重复 ，通常在搭建框架时使用，先加载内容再加载样式，不能结合使用，使用js时会用到id
class选择器：名称 可重复 ，通常在具体实现时使用，先加载样式再加载内容，可以结合使用（指定有多个class的元素）

2、【扩展】派生选择器（后代选择器）（速度快）

通过依据元素在其位置的上下文关系来定义样式，选择某元素后代的元素，允许跨代

<p>a<strong>b<i>c</i>d</strong>e</p>

/* 查找子代，bcd会变为红色 */
p strong {
 color: #f00;
}
/* 跨代查找，c会变为红色 */
p i {
 color: #f00;
}
/* 等价于p i，c会变为红色 */
p strong i {
 color: #f00;
}

3、【补充】子元素选择器

子元素选择器只能选择作为某元素子元素的元素，跨代需要查找多次

<p>a<strong>b<i>c</i>d</strong>e</p>

/* 查找子代，bcd会变为红色 */
p > strong {
 color: #f00;
}
/* 跨代查找，报错 */
p > i {
 color: #f00;
}
/* c会变为红色 */
p > strong > i {
 color: #f00;
}

4、【补充】相邻兄弟选择器（不常用）

可选择紧接在另一个元素后的元素，且二者有相同父元素

<div>
 <ul>
   <li>List item 1</li>
   <li>List item 2</li>
   <li>List item 3</li>
 </ul>
 <ol>
   <li>List item 1</li>
   <li>List item 2</li>
   <li>List item 3</li>
 </ol>
</div>

li + li {
 font-weight: bold;
}

示例解释：选择前面有<li>的<li>，所每个 List item 2 和 List item 3 都会加粗，因为它们之前都有<li>标签

三 l CSS 样式

样式是大括号中的内容

（一）CSS 常用样式

下文中几乎所有Xpx都可以改为Xem、X%、auto

常用样式属性	解释
`width: Xpx;`	设置样式宽度
`heigth: Xpx;`	设置样式高度
`padding: Xpx;`	设置样式外边框大小（内边距）
`margin: (四周Xpx) / (上下Xpx 左右Xpx);`	设置样式外边距大小
`text-align: left / center / right;`	设置文本对齐方式（左 / 中 / 右）
`color: 颜色X;`	设置文本颜色（会继承给子标签）
`background-color: 颜色;`	设置背景颜色

（二）CSS 背景

允许纯色、图片等创建背景

背景样式属性	解释
`background-attachment: scroll(默认) / fixed;`	设置背景图像位置（固定页面绝对位置 / 固定浏览器绝对位置）
`background-color: 颜色;`	设置背景颜色
`background-image: url(图片地址);`	设置背景图片
`background-position: 显示位置 (显示中心);`	设置背景图片的起始位置（只填写显示位置时，显示中心默认为center）显示位置 (显示中心)表示法用英文如right top表示；左上端点定位法用像素右下偏移量如100px 100px表示或50% 50%表示。
`background-repeat: no-repeat / repeat(默认) / repeat-x / repeat-y;`	设置背景图片是否及如何重复（不允许 / 允许(默认) / 允许x轴 / 允许y轴）

背景样式属性（CSS3）	解释
`background-size: 宽度px 高度px;`	设置背景图片的尺寸
background-origin	设置背景图片的定位区域
background-clip	设置背景的绘制区域

（三）CSS 文字样式（字体、文本、链接）

1、字体

字体样式属性	解释
`font-family: 字体名;`	设置字体系列
`font-size: Xpx;`	设置字体尺寸
font-style	设置字体风格
font-variant	以小型大写字体或正常字体显示文本
font-weight	设置字体的粗细

外部引入字体（CSS3）【不推荐】：

@font-face {
  font-family: 字体名（可以自定义）;
  src: url(字体链接);
}

2、文本

文本样式属性	解释
`color: 颜色X;`	设置文本颜色（会继承给子标签）
`text-align: left / center / right;`	设置文本的对齐方式（左 / 中 / 右）
`text-indent: Xem / X%;`	设置文本的首行缩进
`text-transform: capitalize / lowercase / uppercase;`	设置字母大小写转换（首字母大写 / 全小写 / 全大写）
direction	设置文本方向
line-height	设置行高
letter-spacing	设置字符间距
text-decoration	设置文本修饰
unicode-bidi	设置文本方向
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

文本样式属性（CSS3）	解释
`text-shadow: 阴影向右偏移Xpx 阴影向下偏移Xpx 阴影模糊度Xpx 阴影背景颜色#ff0000;`	设置文本阴影
word-wrap	设置文本换行

3、链接

（1）链接的四种状态（都是选择器名）

/* 普通的、未被访问的链接*/
a:link {
}

/* 用户已访问的链接 */
a:visited {
}

/* 鼠标指针位于链接的上方 */
a:hover {
}

/* 链接被点击的时刻 */
a:active {
}

（2）常见的链接样式

链接样式属性	解释
text-decoration	设置链接是否显示下划线（默认显示 / 不显示none）
`background-color: 颜色;`	设置背景颜色

（四）CSS 文字外样式（列表、表格、轮廓）

1、列表

CSS列表属性允许你放置、改变列表标志，或者将图像作为列表项标志

列表样式属性	解释
list-style	简写列表项
list-style-type	设置列表项行头显示类型（实心圆、空心圆等）
`list-style-image: url(图片地址);`	设置列表项行头显示图片
`list-style-position: inside / outside;`	列表标志位置（上一个元素缩进加一 / 一缩进）

2、表格

CSS表格属性可以帮助我们极大的改善表格的外观。

表格样式属性	解释
`border: 粗细Xpx 外边框solid 边框颜色X;`	设置表格边框
`border-collapse: collapse;`	设置折叠边框（将两条平行线合并）
`width: Xpx;` `heigth: Xpx;`	设置表格总宽高【非表格独有样式】
`text-align: left / center / right;`	设置表格文本对齐（左 / 中 / 右）【非表格独有样式】
`background-color: 颜色;`	设置表格颜色【非表格独有样式】
`padding: Xpx;`	设置表格内边距【非表格独有样式】

3、轮廓

轮廓样式属性	解释
outline	设置轮廓属性
outline-color	设置轮廓的颜色
outline-style	设置轮廓的样式
outine-width	设置轮廓的宽度

（五）CSS 定位

改变元素在页面上的位置。

CSS定位机制：
普通流：元素按照其在HTML中的位置顺序决定排布的过程
浮动：在单独的浮动层
绝对布局：固定在浏览器或网页的固定位置

1、定位属性

定位样式属性	解释
`position: static / relative / absolute / fixed;`	【定位】static静态的（不能重叠，偏移量不起效果）、 relative相对的（可以重叠，偏移量起效果）、 absolute绝对的（可以重叠，固定在页面绝对位置，不会与其他元素顺序排列）、 fixed固定的（固定在浏览器绝对位置，不会与其他元素顺序排列）
top	元素向上的偏移量
left	元素向左的偏移量
right	元素向右的偏移量
bottom	元素向下的偏移量
overflow	设置元素溢出其区域发生的事情
clip	设置元素显示的形状
vertical-align	设置元素垂直对齐方式
`z-index: X;`	设置元素的堆叠顺序（X越大显示越在前面）

2、浮动属性

浮动是将元素设置在浮动画布上（显示在其他元素之前），浮动元素会跟浮动元素排列，浮动元素的父元素也会有浮动性质，浮动可以用来实现文字环绕的效果。

浮动样式属性	解释
`float: left / right / none / inherit;`	【浮动】（向左浮动 / 向右浮动 / 不浮动 / 继承父级浮动设置）
`clear: left / right / both / inherit;`	【去除浮动】（去除左浮动 / 去除右浮动 / 去除两边浮动 / 继承父级去除浮动设置）

（六）CSS 盒子模型

每一个元素外面包裹着由内到外为内边距padding(默认无值)、边框border(默认无值)、外边距margin(默值不同但透明)三层结构的盒子。

内边距样式属性	解释
`padding: Xpx;`	设置四周内边距，样式扩展（设置上边距padding-top、设置下边距padding-bottom、设置左边距padding-left、设置右边距padding-right）

边框样式属性	解释
`border: 边框粗度Xpx 外边框solid 边框颜色X;`	设置边框粗细
`border-width: 边框宽度Xpx;`	设置边框宽度，样式扩展：（设置上边框宽度border-top-width、设置下边框宽度border-bottom-width、设置左边框宽度border-left-width、设置右边框宽度border-right-width）
`border-style: 边框样式;`	设置四周边框样式，样式扩展：（设置上边框样式border-top-style、设置下边框样式border-bottom-style、设置左边框样式border-left-style、设置右边框样式border-right-style）
`border-color: 边框颜色X;`	设置四周边框颜色，样式扩展：（设置上边框颜色border-top-color、设置下边框颜色border-bottom-color、设置左边框颜色border-left-color、设置右边框颜色border-right-color）
`border-radius: 圆角程度Xpx;`	设置圆角边框
`box-shadow: 向右移动Xpx 向下移动Xpx 透明度Xpx 颜色X;`	设置边框阴影
border-image	设置边框图片

外边距样式属性	解释
`margin: Xpx;`	设置四周外边距（单参数设置四周边距，双参数设置左右边距和上下边距），样式扩展：（设置上边距margin-top、设置下边距margin-bottom、设置左边距margin-left、设置右边距margin-right）

注意：
两元素间的外边距不会叠加，只会取两者外边距较大值。

四 l CSS 动画

（一）2D、3D转换

通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸

transform样式属性可以使用如下方法：

safari / chrome浏览器使用：-webkit-transform: xxx;
IE浏览器使用：-ms-trans form: xxx;
opera浏览器使用：-o-transform: xxx;
Firefox浏览器使用：-moz-transform: xxx;

1、2D转换方法

转换方法	解释
translate(右移Xpx, 下移Xpx)	平移
rotate(顺时针旋转Xdeg)	顺时针旋转（deg：度）
scale(宽度倍数X, 高度倍数X)	缩放
skew(x轴旋转角度Xdeg, y轴旋转角度Xdeg)	倾斜
matrix()	矩阵

2、3D转换方法

转换方法	解释
rotateX(Xdeg)	X轴旋转
rotateY(Xdeg)	Y轴旋转

（二）过渡

CSS3过渡是元素从一种样式转换成另一种样式

过渡样式属性	解释
`transition: width Xs(水平过渡时间), height Xs(垂直过渡时间), transform Xs(平移时间);`	设置四个过渡属性
transition-property	设置过渡的名称
transition-duration	设置过渡效果花费的时间
transition-timing-function	设置过渡效果的时间曲线
`transition-delay: Xs(延时时间);`	设置过渡效果延时开始时间

/* 原矩形100px*100px，蓝色填充，动画时间2秒 */
div {
 width: 100px;
 height: 100px;
 background-color: #00f;
 -webkit-transition: width 2s,height 2s,-webkit-transform 2s;
 transition: width 2s, height 2s, transform 2s;
}
/* 鼠标放在矩形上后变为200px*200px；顺时针旋转360度 */
/* 鼠标挪走后，会执行相反的动画返回之前的状态 */
div:hover {
 width: 200px;
 height: 200px;
 transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
}

（三）动画

CSS3的动画需要遵循@keyframes规则，即需要规定动画的名称和时长

动画样式属性	解释
`animation: X(动画名称) Xs(动画时长) infinite(无限次) alternate(带反向动画);`	定义动画
animation-name	设置需要绑定到选择器的keyframe名称
animation-duration	设置完成动画所花费的时间，以秒或室秒计
animation-timing-function	设置动画的速度曲线
animation-delay	设置在动画开始之前的延迟
animation-iteration-count	设置动画应该播放的次数
animation-direction	设置是否应该轮流反向播放动画

定义完样式属性后需要定义一个@keyframes X的选择器，具体示例如下：

/* 动画名为"anim"，动画时间为5秒；-webkit-浏览器前缀 */
div {
  width: 100px;
  height: 100px;
  background-color: #f00;
  position: relative;
  animation: anim 5s infinite alternate;
  -webkit-animation: anim 5s infinite alternate;
}
@keyframes anim {
  0%{
    background: #0f0;
    left: 0;
    top: 0;
  }
  25%{
    background: #00f;
    left: 200px;
    top: 0;
  }
  50%{
    background: #cfc;
    left: 200px;
    top: 200px;
  }
  75%{
    background: #0ff;
    left: 0;
    top: 200px;
  }
  100%{
    background: red;
    left: 0;
    top: 0;
  }
}
@-webkit-keyframes anim {
  0%{
    background: #0f0;
    left: 0;
    top: 0;
  }
  25%{
    background: #00f;
    left: 200px;
    top: 0;
  }
  50%{
    background: #cfc;
    left: 200px;
    top: 200px;
  }
  75%{
    background: #0ff;
    left: 0;
    top: 200px;
  }
  100%{
    background: red;
    left: 0;
    top: 0;
  }
}

（四）多列

自动将行排布的元素改为列排布（即超过一定长度自动换列）

多列样式属性	解释
column-count	设置分列数量
column-gap	设置列间距
column-rule	设置列间隔线属性

<body>
  <div class="div1">
    假装有很多很多句子
  </div>
</body>

/* 分为3列；列间隔50px；间隔线粗5px，颜色为红色 */
.div1 {
  column-count: 3;
  column-gap: 50px;
  column-rule: 5px outset #f00;
}

五 l CSS 常用操作

（一）对齐操作

margin：

/* 居中对齐 */
selector {
  margin-left: auto;
  margin-right: right;
}
/* 居中对齐 */
selector {
  margin: 0 auto;
}

position：

/* 向左对齐 */
selector {
  position: absolute;
  left: 0;
}
/* 向右对齐 */
selector {
  position: absolute;
  right: 0;
}

float：

/* 向左对齐 */
selector {
  float: left;
}
/* 向右对齐 */
selector {
  float: right;
}

（二）尺寸操作

尺寸样式属性	解释
height	设置元素高度
line-height	设置行高
max-height	设置元素最大高度
min-height	设置元素最小高度
width	设置元素宽度
max-width	设置元素最大宽度
min-width	设置元素最小宽度

（三）分类操作

分类样式属性	解释
position	把元素放置到一个静态的、相对的、绝对的、固定的位置
float	设置元素向哪个方向浮动
clear	设置一个元素的侧面是否允许其他的浮动元素
cursor	设置指向某元素之上时显示的指针形状
display	设置是否及如何显示元素（如将列表变为横向排布作为导航栏）
`visibility: visible / hidden;`	设置元素是否可见或不可见（可见 / 不可见）

（四）导航栏简单示例

HTML代码：

<body>
  <ul>
    <li><a href="#">导航1</a></li>
    <li><a href="#">导航2</a></li>
    <li><a href="#">导航3</a></li>
    <li><a href="#">导航4</a></li>
  </ul>
</body>

垂直导航栏的CSS代码：

/* 内外边距为0，列表去除项头标记 */
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
/* 未点击和点击过时；展示为块；宽度为50px；字体颜色为白色，居中，去除下划线；背景颜色为红色 */
a:link, a:visited {
  display: block;
  width: 50px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #f00;
}
/* 鼠标放上选项后为蓝色 */
a:active, a:hover {
  background-color: #00f;
}

水平导航栏的CSS代码：

/* 内外边距为0，列表去除项头标记 */
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
/* 未点击和点击过时；宽度为50px；字体颜色为白色，居中，去除下划线；背景颜色为红色 */
a:link, a:visited {
  width: 50px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #f00;
}
/* 鼠标放上选项后为蓝色 */
a:active, a:hover {
  background-color: #00f;
}
/* 水平摆放 */
li {
  display: inline;
}

（五）图片页简单示例

HTML代码：

<body>
  <div class="container">
    <div class="image">
      <!-- 跳转自己 -->
      <a href="#" target="_self">
        <!-- 注释为“风景” -->
        <img src="1.jpg" alt="风景" width="200px" height="200px">
      </a>
      <!-- 文本为“8月份的维多利亚” -->
      <div class="text">8月份的维多利亚</div>
    </div>
  </div>
</body>

CSS代码：

body{
  margin: 18px auto;
  width: 70%;
  height: auto;
}
.image{
  float: left;
  border: 1px solid #f00;
  margin: 5px;
  width: auto;
  height: auto;
  text-align: center;
}
img {
  margin: 5px;
  opacity: 1;
}
.text {
  margin-bottom: 5px;
  font-size: 12px;
}

（六）图片页瀑布流简单示例

HTML代码：

<body>
  <div class="container">
    <div><img src="img/1.jpg"></div>
    <div><img src="img/2.jpg"></div>
    <div><img src="img/3.jpg"></div>
    <div><img src="img/4.jpg"></div>
    <div><img src="img/5.jpg"></div>
    <div><img src="img/6.jpg"></div>
    <div><img src="img/7.jpg"></div>
    <div><img src="img/8.jpg"></div>
    <div><img src="img/9.jpg"></div>
  </div>
</body>

CSS代码：

/* 每列宽度为250px；列间距为5px */
.container {
  column-width: 250px;
  column-gap: 5px;
}
/* 每个图片固定宽度为250px；上下外边距5px，左右外边距0px */
.container div {
  width: 250px;
  margin: 5px 0;
}

Artlex

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【CSS3】CSS3 学习笔记（1w字+）

CSS3 学习笔记一 l  CSS 基础（一）CSS 介绍1、CSS 教程（菜鸟教程）（二）CSS 基础语法（三）CSS 高级语法1、选择器分组（多个选择器使用同一个样式）2、继承（小标签如果没定义样式，会自动使用大标签的css配置）（四）CSS 派生选择器（五）CSS id选择器（六）CSS 类选择器（七）CSS 属性选择器二 l  CSS 样式（一）CSS 背景（二）CSS 文本（三）CSS 字体（四）CSS 链接（五）CSS 列表（六）CSS 表格（七）CSS 轮廓学习教程：
复制链接

扫一扫

专栏目录