HTML/CSS3

axihaihai

已于 2024-05-21 17:33:22 修改

阅读量411

点赞数 1

文章标签： html css3 前端

于 2024-05-07 16:29:48 首次发布

本文链接：https://blog.csdn.net/m0_71299382/article/details/138535069

版权

1.CSS

CSS的作用在于在HTML的基础上(决定网页的内容和结构)对网页进行排版布局对网页中的元素提供样式使得网页显得更加精美
CSS全称是cascading style sheets 即层叠样式表
CSS样式的书写格式：样式名: 样式值
- 例如：color: red
- 建议:之后进行空格
CSS样式应用到html元素的三种方法
- 内联样式(inline style)
  - 所谓内联其实就是将样式内置到标签中的意思
- 文档样式表(document style sheet)
  - 所谓文档其实就是将样式内置到文档中的意思
- 外部样式表(external style sheet)
  - 所谓外部其实就是将样式内置到外部的一个单独的css文件中

2.内联样式

实现：将CSS样式作为元素的style属性值
- 例如：<div style="color: blue; background-color: red;">文字内容</div>
- 多个CSS样式在属性值中以;进行隔开而且建议每个CSS样式之后都加上;

3.文档样式表

实现：将CSS样式内置head元素的style元素中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            color: blue;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
</body>
</html>

style元素中type属性的默认值为text/css 可省略
利用文档样式表可以统一设置、修改多个元素的相同样式

4.外部样式表

实现：将样式单独写在css文件中然后在当前网页的head元素中用link元素对css文件进行引用
利用外部样式表可以解决同时设置多个网页中公共部分样式时频繁使用文档样式表的弊端
rel属性不可或缺他表示链接者和被链接者之间的关系
而且一般rel一旦确定的话那么相应的type属性也会随之确定两者是一一对应的关系所以可以省略type
注意：css文件中的属性值可能出现中文为了避免中文乱码所以我们需要在css文件中设置一下编码方式和浏览器的一致设置的格式为：@charset “xxx”;

style.css

@charset "UTF-8";
div {
    color: red;
    background-color: blue;
}

page_01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
</body>
</html>

page_02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
</body>
</html>

5.三个样式的应用场景

内联样式：CSS样式作用于单个元素上
文档样式表：CSS样式作用于同一个文档中的若干个元素上(解决频繁使用内联样式表的弊端)
外部样式表：CSS样式作用于多个文档中的公共部分(解决频繁使用文档样式表的弊端)

6.@import指令

利用该指令我们可以实现link元素导入外部样式表一样的功能
该指令属于CSS语法所以需要内置到三种样式之中

以下演示了导入多张外部样式表的不同方式

我们可以通过多个link元素来导入多张外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style2.css">
</head>
<body>
<!-- div为红体蓝底的样式 -->
<div>我是div</div>
<!--p为紫体橙底的样式-->
<p>我是p</p>
</body>
</html>

我们可以通过多个@import来导入多张外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "css/style.css";
        @import "css/style2.css";
    </style>
</head>
<body>
<!-- div为红体蓝底的样式 -->
<div>我是div</div>
<!--p为紫体橙底的样式-->
<p>我是p</p>
</body>
</html>

我们可以通过将多张样式表的内容集成到一张样式表中然后通过link/@import的方式导入一张样式表即可

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "css/style3.css";
    </style>
</head>
<body>
<!-- div为红体蓝底的样式 -->
<div>我是div</div>
<!--p为紫体橙底的样式-->
<p>我是p</p>
</body>
</html>

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style3.css">
</head>
<body>
<!-- div为红体蓝底的样式 -->
<div>我是div</div>
<!--p为紫体橙底的样式-->
<p>我是p</p>
</body>
</html>

一般在开发过程当中 @import不使用大部分情况都是用的是link元素来导入外部样式表

7.细节

外部样式表、文档样式表比内联样式多了一个’表’字？原因在于内联样式只作用于一个元素而外部样式表/文档样式表可以作用于多个元素上
如下图所示为多个元素设置多个样式这就形成了一张样式表

8.CSS的注释

CSS的注释方式和HTML不一样其格式为：/* 注释内容 */

示例

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        strong {
            /* 这是一个注释 */
            color: green;
            background: pink;
        }
    </style>
</head>
<body>
<strong>我是strong</strong>
</body>
</html>

注意：不要在CSS环境中使用其他的注释比如：HTML注释() 这样会导致CSS的作用效果失效

示例

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!-- 这是一个注释 -->
        strong {
            /* 这是一个注释 */
            color: green;
            background: pink;
        }
    </style>
</head>
<body>
<strong>我是strong</strong>
</body>
</html>

9.HTML和CSS的编写建议

建议内容/结构和样式分离

不要通过html标签的属性去设置样式
不推荐以下写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
</head>
<body bgcolor="orange">

</body>
</html>

推荐以下写法

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

</body>
</html>

在没有CSS的年代都是利用font标签为html元素设置样式的而CSS的出现就是为了解放html设置元素所以更加不建议通过html去设置样式
你可以发现在h5标准下 font标签是不建议使用的(deprecated 即废弃)

10.设置网页图标

我们可以通过link元素设置网页图标并且网页图标仅支持.ico、.png格式的图片 rel也要设置正确(rel一旦设置 type也就随之确定所以可省略)
- 示例(自定义网页图标为京东图标)
```
	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="https://www.jd.com/favicon.ico">
</head>
<body>

</body>
</html>
```

11.最常用的CSS属性

color：前景色(含义：覆盖在背景之上的颜色包括文本颜色、下划线颜色以及边框颜色等等)
background-color：背景色
width：宽度
height：高度
font-size：文字大小

12.span元素

在默认情况下 span包含的文本和普通文本没有区别
span元素用于区分特殊文本和普通文本用于显示一些关键字

默认不设置块级元素的情况下 span的width属性是无法改变默认包含内容的宽度的

13.div元素

所谓的div元素其实就是一个父容器包含了很多子元素并且其将网页划分成了多个部分

如果你想要知道一个元素在一个网页中使用的频率的话比如：div元素那么你就可以通过检查自定义div元素的样式通过显式的方式展示该元素在网页中的使用频率

14.CSS属性的可用性

由于浏览器版本、CSS版本等问题导致有些CSS属性无法正常使用

WebStorm的智能提示标识了CSS属性的可用性问题

15.颜色

对于CSS中的颜色有几种表示方法：1.颜色关键字 2.RGB颜色 3.RGBA颜色

1.颜色关键字

只提供了上百种的颜色关键字来表示颜色所能表示的颜色数量较少

red：红色
black：黑色
yellow：黄色

2.RGB

通过R(红色)、G(绿色)、B(蓝色)三种颜色的变化、叠加而产生各式各样的颜色每一种颜色的取值范围为0-255 提供了256256256种颜色

RGB有两种表示形式
- 十进制 rgb(red, green, blue) 每一种颜色的取值范围为0-255 即一个字节
  - rgb(255, 0, 0)：红色
  - rgb(0, 255, 0)：绿色
  - rgb(0, 0, 255)：蓝色
  - rgb(255, 255, 0)：黄色
  - rgb(0, 0, 0)：黑色(什么颜色的没有自然是黑色)
  - rgb(255, 255, 255)：白色(和黑色对立的就是白色)
  - 注意点1：如果参数中某一个参数的值超出了取值范围的话那么会被转换为最大值/最小值比如red为300就会被转换为255
  - 注意点2：参数也可以以百分号的形式展示比如red为100%表示255 20%表示51
- 十六进制 #rrggbb 每一种颜色的取值范围为00-ff 对应着十进制取值范围0-255 即一个字节
  - #ff0000：红色
  - #00ff00：绿色
  - #0000ff：蓝色
  - #ffff00：黄色
  - #000000：黑色
  - #ffffff：白色
  - 注意点1：我们可以#rgb来简化#rrggbb的写法所见CSS代码的体积从而减小文件大小加快网页响应速度比如#f00替代#ff0000用以表示红色(体积的差距在CSS样式多了以后效果更明显)
  - 注意点2：n进制有几个特点 1.所有数字都是由0-(n - 1)这个n个数字组合而成的 2.遵循逢n进一的原则比如八进制中7+1的结果中个位变为0 十位进一得到10
RGB规律
- RGB颜色值越大越靠近白色
- RGB颜色值越小越靠近黑色
- RGB颜色值一样的话一般是灰色
如果有取色需求可以使用colors lite这款软件

3.RGBA

RGBA在RGB的基础上加了个alpha 即不透明度

rgba(red, green, blue, alpha) 其中前三个参数的取值范围依然是0-255 alpha的取值范围则是0.0-1.0
对于alpha 其表示不透明度 0为完全透明 1为完全不透明
关键字transparent等价于rgba(0, 0, 0, 0) 完全透明
不支持十六进制表示形式

16.CSS属性-text-decoration

用于设置文本的装饰线

none：无任何装饰线
- 可用于去除a元素的默认下划线
underline：下划线
overline：上划线
line-through：中划线/删除线

一些元素的text-decoration拥有默认的属性值

u、ins元素默认设置了text-decoration为underline
你可以从浏览器检查中的user agent stylesheet看到这些浏览器的默认样式

17.CSS属性-letter-spacing、word-spacing

letter-spacing用于设置字母(包括中文字符等其他语言的字符)的间距
word-spacing用于设置单词(连续的文本为一个单词)的间距

默认为0 可以是负数

18.CSS属性-text-transform

该属性用于设置文本的大小写转换

capitalize：将每个单词的首字符变为大写
uppercase：将每个单词的所有字符变为大写
lowercase：将每个单词的所有字符变为小写
none：没有任何影响

建议不要直接直接在文本中固定死大小写而是通过CSS的text-transform去控制文本的大小写

19.CSS属性-text-indent

该属性用于设置第一行内容的缩进

绝对单位：px
相对单位：em 相对于font-size(px)进行计算比如2em = font-size(px) * 2 结果为px
如果你有首行缩进两个文本文字的需求那么设置text-indent为2em即可

20.CSS属性-text-align

该属性用于设置元素内容在元素中的水平对齐方式其内容有可能是文本也有可能是单个/多个子元素

有些元素的宽度默认包裹内容因此导致text-align属性值不管设置为什么最终效果都是一样的诸如此类特点的元素有：span、strong、a
有些元素的宽度则默认占据整个父元素比如：div、p、h1-h6
该属性常用的属性值
- center：水平居中
- left：左对齐
- right：右对齐
- justify：两端对齐

21.CSS属性-font

1.font-size

通过该属性可以设置文字大小

有两种常见的方式
- 数值+单位
  - 10px 绝对单位
  - 10em 相对单位相对px进行计算
- 百分比
  - 类似于em 也是相对于px进行计算
注意点：如果当前元素的width是以em设置的而且】当前元素的font-size和父元素的font-size同时存在那么根据就近原则 width是相对于当前元素的font-size计算的
一般给body设置font-size表示网页的默认文本大小
- 如果你有整体放大/缩小网页中所有元素的需求的话并且放大/缩小过程中比例保持不变那么你可以以绝对单位的形式设置body的font-size 然后其他元素可以通过相对单位的形式基于直接父元素设置字体大小

2.font-family

该属性用于设置字体的名称

可以设置一个或者多个字体名称(匹配是从左往右进行的直到找到可用的字体为止)
字体的可用性
- 一般情况下英文字体只适用于英文而中文字体可以同时适用于中文和英文所以如果希望中英文设置不同的字体那么应将英文字体置于中文字体之前
该属性的属性值可以加双引号也可以省略双引号
- 加双引号适用于属性值为中文字体或者多个单词的英文字体
- 省略双引号则适用于属性值为单个单词的英文字体

3.@font-face

@font-face可以让网页支持网络字体(发布到网上的字体) 不再局限于系统自带的字体

常见的字体文件后缀名
- TrueType字体：.ttf
- OpenType字体：.ttf、.otf
- ……
@font-face的使用(其中我们将网络字体文件放置在项目下的fonts文件夹中实际上对于html以外的其他文件我们都可以用专门的文件夹存放比如：图片、js文件等等)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="https://www.jd.com/favicon.ico">
    <style>
        @font-face {
            font-family: 仓耳丽园;
            src: url("fonts/cangeliyuan.ttf");
        }
        span {
            font-family: 仓耳丽园;
        }
    </style>
</head>
<body>
<span>我是span</span>
</body>
</html>

4.font-weight

该属性用于设置文字的粗细(重量重量和粗细好似一种正比关系)

属性值
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900：每一个数字表示一个重量
- normal：等于400
- bold：等于700
默认浏览器样式
- 一些元素将font-weight作为默认的浏览器样式并体现在user agent stylesheet
- 比如：strong、b、h1-h6等元素将font-weight作为默认的浏览器样式而且默认值为bold 即700

5.font-style

该属性用于设置文字的常规、斜体显示

属性值
- normal：常规显示
- italic：用字体的斜体显示
- oblique：文本倾斜显示
italic和oblique的区别：italic和字体有关假使字体不支持斜体显示的话那么italic就不起作用但是oblique完全没有这个困惑他与字体无关就算字体不支持斜体显示的话它也可以起作用
默认浏览器样式
- 一些元素将font-style作为默认的浏览器样式并体现在user agent stylesheet
- 比如：em、i、cite等元素将font-style作为默认的浏览器样式而且默认值为italic

6.font-variant

该属性可以影响小写字母的显示样式

属性值

normal：常规显示
small-caps：将小写字母替换为缩小过的大写字母

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="https://www.jd.com/favicon.ico">
    <style>
       span {
           font-variant: small-caps;
       }
    </style>
</head>
<body>
<span>What's your name?</span>
</body>
</html>