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