0200 | CSS | 基础笔记

最新推荐文章于 2022-05-26 02:06:45 发布

ShiningChow7

最新推荐文章于 2022-05-26 02:06:45 发布

阅读量423

点赞数

分类专栏： 02 CSS 文章标签： CSS

本文链接：https://blog.csdn.net/ShiningChow7/article/details/79338388

版权

02 CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DIV + CSS 布局美化

2.1 CSS 基础

2.1.1 CSS 简介

2.1.2 CSS 的特点

CSS 具有以下特点

（1）丰富的样式定义

（2）易于使用和修改

（3）多页面应用

（4）层叠

（5）页面压缩

2.1.3 CSS 的使用

CSS 可通过三种方式添加到 HTML 中：

（1）内联样式：在 HTML 元素中使用 “style”属性

（2）内部样式表：在 HTML 头部<head>区域中使用<style>元素来包含 CSS

<!DOCTYPE html >

<head>

<title> 选择器示范 </title>

<style>

【此处为 CSS 选择器及属性内容】

</style>

</head>

<body>

</body>

</html>

（3）外部引用：使用外部 CSS 文件

1，CSS 属性

要掌握一个属性的用法，需要掌握六个方面

（1）该属性的合法属性值（legal value）：比如 color 后面必须是颜色值等；

（2）该属性的默认值（initial value）：默认值；

（3）该属性所适用的元素（applies to）；

（4）该属性的值是否被下一集继承（inhreited）；

（5）如果该属性能取百分值（percentage），其百分比如何解释；

（6）该属性的媒介类型组（media groups）；

2，属性值

（1）整数和实数：CSS 中只能使用浮点数，不能使用科学计数法；

（2）长度量：由整数或实数加上长度单位组成（子级元素不能继承父级元素的相对长度值，只能继承实际计算值）；

（3）百分数量（percentages）：数字加上百分号，不能被子级元素继承

3，选择器

CSS 的几种选择器

（1）类型选择器：使用单个的元素名称进行使用。

语法：

元素名称{

CSS 标签：值；

其他 CSS 标签：值；

}

举例：

<style>

td {

font-size : 20 px ;

font-family : 微软雅黑 ;

}

</style>

此处则整个 HTML 文件中所有的 <td> 标签内容都会开始使用其中的样式，除非被更高优先级的选择器代替。

（2）class 选择器：允许向一组在 class 属性上具有相同值的元素应用声明（body内所有元素都有 class 属性）。

语法（以“.”一个点开头）：

.class属性名称{

CSS 属性名：属性值；

其他 CSS 属性名：属性值；

}

举例：

<!DOCTYPE html >

<head>

<title> 选择器示范 </title>

<style>

. mytable {

font-size : 20 px ;

font-family : 微软雅黑 ;

margin : 0 auto ;

}

</style>

</head>

<body>

<tr>

</tr>

</table>

</body>

</html>

则下方所有使用了 class= “mytable" 的表格或者内容都将优先考虑 .mytable 里面的格式，除非被更高优先级的选择器代替。

（3）id 选择器：操作与 class 选择器相似，但重要的区别是 class 选择器可以多次使用，但 id 选择器属性的值在整篇文档中必须是唯一的，只能使用一次。

语法（以“#”开头）：

#id属性名称{

CSS 属性名：属性值；

其他 CSS 属性名：属性值；

}

举例：

<!DOCTYPE html >

<head>

<title> 选择器示范 </title>

<style>

#top {

font-size : 20 px ;

font-family : 微软雅黑；

}

</style>

</head>

<body>

<tr>

</tr>

</table>

</body>

</html>

（4）style 选择器：直接定位到最靠近元素的地方直接使用，适合多个元素均不相同的情况。

语法：

<HTML标签 style=“CSS属性名：值；其他 CSS属性名：值；…… ”></HTML标签>

举例：

（5）组合选择器：将几种选择器组合使用

使用举例：

<style>

td {

font-family : 微软雅黑 ;

font-size : 16 px ;

}

. table1 {

background-color : gray ;

width : 450 px ;

height : 100 px ;

border-spacing : 2 px ;

margin : 0 auto ;

border-radius : 15 px 15 px 0 px 0 px ;

}

. below {

background-color : gray ;

width : 450 px ;

border-spacing : 4 px ;

margin : 0 auto ;

text-align : center ;

}

. below td {

font-size : 20 px ;

width : 25 % ;

height : 70 px ;

background-color : #7effd5 ;

font-family : 微软雅黑 ;

color : black ;

border-radius : 5 px 5 px 5 px 5 px ;

}

</style>

此处 . below td 就是一个组合选择器，意思是使用 . below 的内容中所有 <td> 的内容格式都是用 . below td 中提供的格式（两者格式内容可重复，组合标签具有更高的优先级）。

（6）伪类和伪元素：

在超链接中提供了四个伪类：

a:link：超链接的默认显示样式；
a:hover：鼠标悬停时的样式；
a:active：鼠标点击下去不释放时的样式；
a:visited：超链接被访问后的样式；

细节会在 2.2.3 超链接中介绍。

2.2 CSS 样式

2.2.1 文本和图像

CSS的使用：

（1）属性与取值之间，需要使用冒号（：）进行分隔，而非等号；

（2）CSS 的不同属性之间，需要使用分号（；）进行分隔，否则会出错，且结尾也必须有分号。

CSS 有如下属性：

（1）font-size：文本字体大小，单位为像素；

（2）font-style：文本风格，normal 为正常显示，italic 为斜体；

（3）font-family：文本的字体名称，需要使用系统存在的字体名称；

（4）color：文本颜色，使用颜色名或者 #RGB 数值均可；

（5）font-weight：字重，bold 表示加粗；

（6）width 或 height：元素的宽度或者高度；

（7）border：设置元素的边框。这是一个组合属性，其实由三个属性共同构成：

border-style：sliod：边框为实线；dashed：边框为虚线；dotted：边框为点；

border-width：边框的宽度，如 “2px”；

border-color：边框的颜色；

（8）图像的 CSS 属性：width，height，vertial-align（垂直对齐），border 等

无论是文本还是图像，牵涉到格式化方面的，都可以使用 CSS 来完成这样可以更好的让布局和格式分离。

2.2.2 表格

我们就可以使用以上所学内容结合表格完成一个完整的 CSS 来简化 HTML 代码：

<!DOCTYPE html >

<head>

<title> 计算器效果 </title>

<style>

td {

font-family : 微软雅黑 ;

font-size : 16 px ;

}

. table1 {

background-color : gray ;

width : 450 px ;

height : 100 px ;

border-spacing : 2 px ;

margin : 0 auto ;

border-radius : 15 px 15 px 0 px 0 px ;

}

. table2 {

font-size : 20 px ;

}

. colorRed {

color : red ;

}

. colorGreen {

color : green ;

}

. colorBlue {

color : blue ;

}

. input {

background-color : red ;

height : 60 px ;

}

. input2 {

background-color : white ;

width : 445 px ;

height : 55 px ;

}

. below {

background-color : gray ;

width : 450 px ;

border-spacing : 4 px ;

margin : 0 auto ;

text-align : center ;

}

. below td {

font-size : 20 px ;

width : 25 % ;

height : 70 px ;

background-color : #7effd5 ;

font-family : 微软雅黑 ;

color : black ;

border-radius : 5 px 5 px 5 px 5 px ;

}

</style>

</head>

<body>

<tr>

</td>

</tr>

<td>

<table>

<tr>

</tr>

</table>

</td>

</tr>

</table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

<!--计算器宽度 450dpx--

2.2.3 超链接

在超链接中提供了四个伪类：

a:link:超链接的默认显示样式；
a:hover:鼠标悬停时的样式；
a:active:鼠标点击下去不释放时的样式；
a:visited:超链接被访问后的样式；

通常用户能够感知的是正常显示和鼠标悬停，所以我们把四个伪类组合为两种格式： a:link 和 a:visited 为一种样式，a:hover 和 a:active 为另一种样式：

a : link ,a : visited {

color : white ;

text-decoration : none ; // 无下划线

}

a : hover ,a : active {

color : #ff8cc ;

text-decoration : underline ; // 显示下划线

}

2.2.4 列表

略

2.2.5 表单

略

2.2.6 盒模型基础

W3C 盒模型从外到内包括 margin（外边距）、border（边框）、padding（内间距）、content（内容），且 content 不包括其他部分。

比喻：content 是盒子里的东西，padding 是东西与盒子之间的填充泡沫，border 是盒子，margin 是盒子与外界的空间。

针对 margin，padding 和 border 属性，因为都是组合属性，可以有如下方式设置上下左右的距离和宽度：

1，使用组合属性：

（1）margin：10px 10px 20px 20px（上、右、下、左的顺时针旋转的外边距）；

（2）padding： 10px 10px 20px 20px（上、右、下、左的顺时针旋转的内间距）；

（3）border-width：10px 10px 20px 20px（上、右、下、左的顺时针旋转的边框宽度）；

（4）margin：0px auto：上下外边距为 0px，左右边距自动，即水平居中。

（5）margin：100px：上下左右外边距均为 100px，其他两者相同。

2，使用单独属性：

（1）margin-top，margin-right，margin-bottom，margin-left；指某个方向的间距（如：margin-top：10px）

（2）padding-top，padding-right，padding-bottom，padding-left；

（3）border-top，border-right，border-bottom，border-left；

注意：

针对同一个元素，后一个属性的值将覆盖前一个属性的值；

针对同一个属性值，style 属性设置的样式将覆盖页面头部 <head> 中设置的值。

<body>是最大的盒子，所有盒模型相关的属性，同样适用于 <body>标签。

我们通常使用 <div> 来实施盒模型，让页面形成响应式布局。我们尝试对一个盒模型设置四大属性：

<!DOCTYPE html >

<head>

<title> 盒模型基础 </title>

<style>

body {

padding : 0 ;

margin : 0 ;

}

div {

width : 400 px ; /* div必须设置明确的高度和宽度 */

height : 200 px ;

margin : 40 px auto ; /* 上下边距为 40px，左右水平居中 */

padding : 30 px ; /* 边框距离内容上下边距为 30px */

border : solid 5 px #ff7e5b ;

color : black ; /* 内容字体颜色为白色 */

font-size : 30 px ;

text-align : center ; /* 内容水平居中 */

line-height : 200 px ; /* 使内容垂直居中，仅限一行内容时有效 */

}

</style>

</head>

<body>

<div> 你好，欢迎学习CSS </div>

</body>

</html>

效果图如下：

2.2.7 盒模型浮动

<div> 容器被称为行级元素，默认独占一行。如果需要在同一行显示，需要使用 float:left 进行设置。我们在上述 <div> 的 CSS 属性中添加一行新的属性：

float : left ; // 容器靠左对齐

则为现在的效果：

此即为浮动效果，如果浏览器的宽度较低，则仍然会两排显示。注意是对本身要浮动的元素设置 float 属性，而非他们的父容器。

此时 margin:40px auto，上下边距 40px，左右边距自动，所以无法让两者居中显示。我们的处理方式是在这两个容器的外面嵌套一个更大的容器。

<!DOCTYPE html >

<head>

<title> 盒模型嵌套 </title>

<style>

/* id属性在同一页面中不允许重复，class 属性可以多次使用 */

#outer {

width : 620 px ;

height : 210 px ;

border : solid 5 px #565aff ;

margin : auto ;

}

. inner {

width : 300 px ;

height : 200 px ;

border : solid 5 px #ff7448 ;

float : left ;

}

</style>

</head>

<body>

</div>

</body>

</html>

实际效果如下：

2.2.8 盒模型内容

如果不设置 div 的长和宽，则 div 默认宽度为 100%，高度会随内容的增加而增加。如果仅仅为 div 设置高度而内容本身超过了它的高度则内容会自动超出边界，为了处理这个问题，我们可以使用 overflow 属性对其进行处理：

<style>

. outer {

border : solid 5 px orange ;

height : 200 px ;

overflow : hidden ;

}

</style>

overflow:hidden;（设置超出部分自动隐藏）

overflow:scroll;（设置超出部分增加滚动条）

2.2.9 盒模型嵌套

盒模型嵌套指的是在 <div>中嵌套<div>，但此处 CSS 有 bug，嵌套 <div> 时，内层 <div> 设置 margin-top 会使得外层会有相应的 margin-top 值，而内层无效；解决方案有三种：

（1）对外层 <div> 设置 border = 1，即一个像素的边框

（2）设置外层 overflow:hidden；内层属性保持不变

让内容垂直居中的方式：

（1）vertical-align

（2）line-height 的值为这个 <div> 的高度；

（3）嵌套 <div> 并设置 margin-top 属性，且要小心 CSS 的 bug

2.2.10 盒模型定位

有时候需要对 <div> 设置特殊的定位（比如固定在窗口的某个位置），此时需要使用 CSS 的 position 属性，position 有五个取值：

值	描述
absolute	绝对定位，相对于默认之外的第一个父元素进行定位，元素通过 top，left，right 和 bottom属性进行规定，如父容器没有定位则依据浏览器定位（此时与fixed效果相同），absolute 定位会随滚动条移动
fixed	固定定位，相对于浏览器窗口 body 进行定位，元素通过 top，left，right 和 bottom属性进行规定，fixed 定位不会随滚动条移动而移动
relative	相对定位，div 只是相对地脱离了原本的位置，并不会脱离文档流
static	默认值，没有定位，元素出现在正常的文档流中
inherit	从父容器中继承 position 属性的值，前提是父容器必须有 position 的属性值。一般不建议使用

3.1 动画效果

CSS 有三大动画属性：animation（ [,ænɪ’meʃən] ），transfrom（发音：[trænsˈfɔ:rm] ）和 transition（发音： [træn'zɪʃən] ）。

3.1.1 Animation

使用方式：（因为都是 CSS 样式，所以都写在 <style> 内）

<!DOCTYPE html >

<head>

<style>

div {

width : 300 px ;

height : 300 px ;

background-color : red ;

margin : 0 px ;

/* 定义animation属性，名称为 move，时间为 2s，是组合属性 */

animation : move 2 s ;

}

/* 定义关键帧，这里只有两帧，即开始状态和结束状态 */

@keyframes move {

from {

/* 定义刚开始时的一些处理，通常我们直接使用原始样式，即可不写 */

}

to {

margin-left : 500 px ;

background-color : blue ;

}

</style>

</head>

<body>

</body>

</html>

@keyframes move { from { } to { } } 为一种常见的写法，另一种是用百分比的方式：

@keyframes move {

0% {

/* 定义刚开始时的一些处理，通常我们直接使用原始样式，即可不写 */

}

25% {

margin-left : 200 px ;

background-color : darkcyan ;

}

100% {

margin-left : 500 px ;

background-color : blue ;

}

此时百分比为时间的百分比，可以控制动画的一些中间过程。

CSS 的 animation 有一些较为重要的属性：

1，animation-name：动画名称：此处的 name 必须与 @Keyframes 中的动画名称一致，否则不会有任何动画效果。默认值为 none（无任何动画）。这个属性可以同时附多个 animation 的名称给同一个元素，只需用“，”隔开即可，这样可实现更加复杂的动画效果；

2，animation-duration：指定动画播放时长，单位为 s（秒），默认值为 0；

3，animation-timing-function：元素根据时间推进来改变属性值的变换速率，即动画播放方式。具有六种变换方式：

（1）linear（匀速变化）：等同于贝塞尔曲线（0，0，1.0，1.0）；

（2）ease（先快后慢）：默认值，等同于贝塞尔曲线（0.25，0.1，0.25，1.0）；

（2）ease-in（逐渐加速）：等同于贝塞尔曲线（0.42，0，1.0，1.0）；

（2）ease-out（逐渐减速）：等同于贝塞尔曲线（0，0，0.58，1.0）；

（2）ease-in-out（先加速后减速）：等同于贝塞尔曲线（0.42，0，0.58，1.0）；

（2）cubic-bezier（自定义时间曲线）：贝塞尔曲线（x1，y1，x2，y2），四个值特定于曲线上点 p1 和 p2，所有值必须在 [0,1]之间，否则无效；

4，animation-delay：指定打开网页后动画开始的时间（与 animation-duration 不同），单位为 s（秒），默认值为 0；

5，animation-iteration-count：指定元素播放动画循环的次数，取值为 <number> 中的数字，默认值为 1，infinite 为无限次循环；

6，animation-direction：指定元素动画播放的方向，只有两个值：

（1）默认值为 normal，动画每次循环都是向前（就是动画本身的时间顺序）播放；

（2）alternate，作用是动画在第偶数次向前播放，奇数次反过来播放。

7，animation-paly-style：控制元素的播放状态，主要有两个值：

（1）running：将暂停的动画继续从原来的位置播放；

（2）paused：将播放的动画暂停；

如果利用组合属性，可以将上方的属性写在一起：

<!DOCTYPE html >

<head>

<style>

div {

width : 300 px ;

height : 300 px ;

background-color : red ;

margin : 0 px ;

/* 动画关键帧名称为 move，持续时间为 20s，播放方式为先加速后减速，延迟时间为 2s，无限次播放，来回轮流播放 */

animation : move 20 s ease-in-out 2 s infinite alternate ;

}

/* 定义关键帧，这里只有两帧，即开始状态和结束状态 */

@keyframes move {

0% {

/* 定义刚开始时的一些处理，通常我们直接使用原始样式，即可不写 */

}

100% {

margin-left : 500 px ;

background-color : blue ;

}

</style>

</head>

<body>

</body>

</html>

3.1.2 transform

在 CSS3 中 transform 主要包括 rotate（ [‘rotet]，旋转），translate（ [træns’let]，移动），scale（ [skel]，缩放），skew（ [skju]，斜切）和 matrix（ [‘metrɪks]，矩阵变形）这几个属性值参数，且通过空格分隔我们还可以一次实现多种变换效果。

1，rotate（旋转）：通过指定的角度进行 2D 旋转，单位为角度（<angle>）,正数为顺时针旋转，负数为逆时针。需要现有 transform-origin 定义旋转的锚点。如：

transform : rotate ( 30 deg ) ;

2，translate（移动）：移动分为三种情况：translate ( x , y )：水平竖直同时移动、translateX（ x ）：仅水平方向移动和 translateY（ y ）：仅竖直方向移动

（1）translate：水平竖直同时移动，如：

transform : translate ( 100 px 200 px ) ;

（2）translateX()：只向 X 轴方向进行移动元素，基点同样是元素中心点，负数为反方向。如：

transform : translate ( 100 px ) ;

（3）translateY()：只向 Y 轴方向进行移动元素，基点同样是元素中心点，负数为反方向。如：

transform : translateY ( 100 px ) ;

3，scale（缩放）：与 translate 类似，有三种情况：scale(x,y)（水平竖直同时缩放）、scaleX(x)（仅水平方向缩放），scaleY(y)（仅竖直方向缩放）。其值如果大于 1 则被放大，[ 0,1 ] 则被缩小。如：

transform : scale ( 2 , 1.5 ) ; /* 水平方向放大 2 倍，竖直方向放大 1.5 倍 */

单独使用的格式与 translate 相同，不再赘述。

4，skew（扭曲，斜切）：同样以元素中心为基准点进行斜切，单位为角度。同样有三种情况：skew(x,y)（水平竖直同时斜切），skewX(x)（水平方向斜切），skewY(y)（竖直方向斜切），如：

transform : skew ( 20 deg , 30 deg ) ; /* 水平方向斜切 20 度，竖直方向斜切 30 度 */

单独使用与 translate 相同，不再赘述。如果斜切的位置不好确定，可以使用 transform-origin 确定元素斜切基准点。

5，matrix（矩阵）：以一个含有六个数值的变换矩阵形式指定一个二维变换，较为复杂，不作赘述。

0，重要属性：transform-origin(x,y)：设置元素运动的基点（参照点，锚点）。其中 x，y可以为百分比、em 或者 px。x 的值还可设置为 left、canter 和 right，y 的值可以设置为 top、center 和 bottom。如：

transform-origin : left top ; /* 以左上角为锚点 */

transform-origin : right ; /* 以右方中点为锚点 */

transform-origin : 25 % 75 % ; /* 以距离左边缘 25%、距离上边缘 75% 的点为锚点 */

接下来我们尝试展示一个简单的相册变换：

<!DOCTYPE html >

<head>

#trans-1 {

margin : 20 px ;

width : 400 px ;

height : 200 px ;

background-color : aquamarine ;

text-align : center ;

animation : ratateit 5 s ;

}

@keyframes ratateit {

from {} to {

transform : rotate (- 3380 deg ) ;

}

</style>

</head>

<body>

</body>

</html>

3.1.3 transition

transition 允许 CSS 属性在一定时间内平滑过渡，这种效果在鼠标点击、获得焦点、被点击或对元素进行触发的时候使用，可以圆滑地改变 CSS 属性的值。

transition 属性包含四个属性值：transition-property（执行变换的属性）；transition-duration（变换延续的时间）；transition-timing-function（在持续的时间段变换的速率）；transition-delay（变换延迟的时间）。

1，transition-property（执行变换的属性）：指定当元素的其中一个属性改变时执行 transition 效果，主要有以下几个值：none（没有属性改变）、all（所有属性都改变，这个值也是默认值）和 indent（元素属性名）。

（1）当其值为 none 时，transition 立马停止执行；

（2）当指定为 all 时，则元素产生任何属性值变化都将执行 transition 效果；

（3）ident 是可以指定元素的某一个属性值，对应类型很多，具体什么 CSS 属性可以实现 transition 效果，可以去 W3C 官网查看。

2，transition-duration（变换延续的时间）：指定元素转换过程持续的时间，可作用于所有元素，单位为 s（秒）或 ms（毫秒）。

3，transition-timing-function（在持续的时间段变换的速率）：根据时间的推进改变变换速率，与我们的 animation-timing-function 属性一致，取值也一致。

4，transition-delay（变换延迟的时间）：用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多久开始执行 transition 效果。取值同样是时间。默认大小为 0。

有时我们需要改变多个 CSS 效果属性，可以将以上四者写在一起：如：

transition : all 5 s ease-in-out 1 s ;

此处注意要将 transition-duration 写在前面，transition-delay 写在后面，不能出错。

具体的实例：

<!DOCTYPE html >

<head>

<title> 鼠标悬停时 div 变换 </title>

<style>

div {

width : 100 px ;

height : 100 px ;

background : #005982 ;

transition : all 2 s ;

}

div : hover {

width : 100 px ;

height : 100 px ;

background : #6BC4E0 ;

}

</style>

</head>

<body>

</body>

</html>