一、认识CSS
1.CSS概述
CSS表示层叠样式表
(Cascading Style Sheet,简称:CSS,又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表),是为网页添加样式的代码。
◼ CSS是一种语言吗?(知道即可)
- MDN解释:CSS 也不是真正的编程语言,甚至不是标记语言。它是一门样式表语言;
- 维基百科解释:是一种计算机语言,但是不算是一种编程语言;
2.CSS的历史
◼ 早期的网页都是通过HTML来编写的,但是我们希望HTML页面可以更加丰富:
-
这个时候就增加了很多具备特殊样式的元素:比如i、strong、del等等;
-
后来也有不同的浏览器实现各自的样式语言,但是没有统一的规划;
-
1994年,哈肯·维姆·莱和伯特·波斯合作设计CSS,在1996年的时候发布了CSS1;
-
直到1997年初,W3C组织才专门成立了CSS的工作组,1998年5月发布了CSS2;
-
在2006~2009非常流行 “DIV+CSS”布局的方式来替代所有的html标签;
-
从CSS3开始,所有的CSS分成了不同的模块(modules),每一个“modules”都有于CSS2中额外增加的功能,以及向后兼容。
-
直到2011年6月7日,CSS 3 Color Module终于发布为W3C Recommendation。
◼ 总结:CSS的出现是为了美化HTML的,并且让结构(HTML)与样式(CSS)分离;
-
美化方式一:为HTML添加各种各样的样式,比如颜色、字体、大小、下划线等等;
-
美化方式二:对HTML进行布局,按照某种结构显示(CSS进行布局 – 浮动、flex、grid);
二、编写CSS样式
1.如何编写CSS样式
CSS语法:
◼ 声明(Declaration)一个单独的CSS规则,如 color: red; 用来指定添加的CSS样式。
-
属性名(Property name):要添加的css规则的名称;
-
属性值(Property value):要添加的css规则的值;
2.如何将CSS样式应用到元素上?
◼ CSS提供了3种方法,可以将CSS样式应用到元素上:
-
内联样式(inline style)
-
内部样式表(internal style sheet)、文档样式表(document style sheet)、内嵌样式表(embed style sheet)
-
外部样式表(external style sheet)
◼ 疑问:三种方式,学好哪一个呢?
- 每一个都很重要,目前开发中不同的场景都会用到
3.内联样式
◼ 内联样式(inline style),也有人翻译成行内样式。
- 内联样式表存在于HTML元素的style属性之中。
<div style="color: red; font-size: 20px;">我是Div元素</div>
<p style="color: green; background-color: red;">我是P元素</p>
◼ CSS样式之间用分号;
隔开,建议每条CSS样式后面都加上分号;
◼ 很多资料不推荐这种写法:
-
1.在原生的HTML编写过程中确实这种写法是
不推荐
的 -
2.在Vue的template中某些动态的样式是会使用内联样式的;
◼ 所以,内联样式的写法依然需要掌握。
4.内部样式表
◼ 内部样式表(internal style sheet)
- 将CSS放在HTML文件
<head>
元素里的<style>
元素之中。
<style>
div {
color: red;
font-size: 24px;
}
p {
color: white;
background-color: skyblue;
}
</style>
◼ 在Vue的开发过程中,每个组件也会有一个style元素,和内部样式表非常的相似(原理并不相同);
5.外部样式表
◼ 外部样式表(external style sheet) 是将css编写一个独立的文件中,并且通过<link>
元素引入进来;
◼ 使用外部样式表主要分成两个步骤:
-
第一步:将css样式在一个独立的css文件中编写(后缀名为.css);
-
第二步:通过
<link>
元素引入进来;
style.css
div {
color: red;
font-size: 24px;
}
p {
color: white;
background-color: skyblue;
}
index.html
<head>
<!-- 关联外部样式表 -->
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div>我是03div元素</div>
<p>我是03p元素</p>
</body>
◼ link元素的作用,参见番外篇。
6.@import
可以在style元素或者CSS文件中使用@import导入其他的CSS文件
index.css
@import url(./style.css);
@import url(./test.css);
div {
width: 200px;
}
三、CSS注释
◼ CSS代码也可以添加注释来方便阅读:
-
CSS的注释和HTML的注释是不一样的;
-
/* 注释内容 */
/* 这是一段注释 */
div {
/* 这是一段注释 */
width: 200px;
}
四、常见的CSS属性
1.字体相关属性
- font-family: 设置字体
- font-size: 字体大小,要注意绝对大小、相对大小、长度、百分比
- font-style: 正常体、斜体、倾斜体
- font-weight: 设置粗体
- font-variant: 用来将所有字体都变成大写,但是原来大写的字体要比默认的大一些
- font: 字体相关的所有属性综合
- line-height: 行高
- text-align: 对其方式
- text-decoration: 设置下划线
- text-indent: 缩进
- text-shadow: 字体阴影
- text-transform: 大小写切换
- text-overflow: 文本溢出的解析
- white-space: 设置如何处理元素中的空白,常设置属性normal、nowrap
- vertical-align: 垂直对齐方式
- word-spacing: 单词与单词之间的间距
- letter-spacing: 字与字之间的间距
- word-break: 文字换行
- color: 字体颜色、前景色
- opacity: 不透明度
2.盒子相关属性
- width: 设置盒子宽度
- height: 设置盒子高度
- max-width/max-height: 最大宽度、高度
- min-width/min-height: 最小宽度、高度
- margin: 外边距
- padding: 内边距
- border: 边框
- border-radius: 边框圆角
- outline: 边框(不占据空间)
- box-shadow: 边框阴影
3.背景相关属性
- backgroud: 背景相关属性大融合
- backgroud-color: 背景颜色
- backgroud-image: 背景图片
- backgroud-position: 背景位置
- backgroud-size: 背景大小
- backgroud-repeat: 重复次数
- backgroud-attachment: 背景图片位置是否固定
- backgroud-origin: 背景图片属性的相对区域
- backgroud-clip: 背景是否延申
4.定位相关属性
- position: 定位
- left/right/top/bottom: 设置定位位置
- z-index: 设定一个定位元素
- float: 浮动
- clear: 清除浮动
- display: 元素的内部、外部显示类型
- visibility: 元素显示
- overflow: 超出部分的显示
5.必须掌握的CSS属性
◼ 必须掌握的CSS属性
- 在开发中90+%的时间写的都是这些属性;
◼ 赶紧开始?
◼ 不要小看这几个CSS属性,里面涉及到的概念是非常多的;
◼ 你必须了解CSS的很多特性,才能真正理解里面的每个属性;
◼ 并且在遇到一些问题的时候知道如何去调试
5.1 CSS样式的规则顺序
1.定位和布局
- position
- top/bottom/left/right
- z-index
- float/clear
- flexbox
- flex-direction
- justify-content
- align-items
- …
2.展示与可见
- dispaly
- opacity
- visibility
3.盒子模型顺序
- margin
- box-shadow
- border
- border-radius
- width/height
- padding
4.背景设置
- backgroud
5.字体、文本
- font-family/font-size/font-weight/font-style
- line-height
- text-align/text-transform
- color
6.其他属性
- overflow
- clip
- cursor
- transform
- animation/transition
- white-space
6.CSS属性的官方文档
◼ CSS官方文档地址
- https://www.w3.org/TR/?tag=css
◼ CSS推荐文档地址:
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#%E5%85%B3%E9%94%AE%E5%AD%97%E7%B4%A2%E5%BC%95
◼ 由于浏览器版本、CSS版本等问题,查询某些CSS是否可用:
-
可以到https://caniuse.com/查询CSS属性的可用性;
-
这个网站在后续的browserlist工具中我们再详细说明;
7.目前需要掌握的CSS属性
◼ 要想深刻理解所有常用CSS属性,最好先学会以下几个最基础最常用的CSS属性
-
font-size:文字大小
-
color:前景色(文字颜色)
-
background-color:背景色
-
width :宽度
-
height:高度
7.1 CSS属性 - color
◼ color属性用来设置文本内容的前景色
- 包括
文字
、装饰线
、边框
、外轮廓
等的颜色
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
font-size: 36px;
background-color: #888;
color: #39ca39;
width: 300px;
height: 200px;
/* 验证color是设置前景色的,这里给文本添加装饰线 */
/* 装饰线 */
text-decoration: line-through;
/* 边框 */
border: 5px solid;
/* 外轮廓 */
outline: solid 5px;
}
</style>
</head>
<body>
<div>我是Div元素</div>
</body>
可见,装饰线、文本、边框、外轮廓都变成了color属性设置的绿色
五、案例练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item {
width: 400px;
display: inline-block;
vertical-align: top;
/* float: left; */
margin-right: 30px;
}
.album {
width: 400px;
}
.keyword {
background-color: orange;
color: white;
font-size: 24px;
}
</style>
</head>
<body>
<h1>星球介绍</h1>
<div class="item">
<h3>木星</h3>
<img class="album" src="../images/muxing.jpg" alt="木星">
<p><span class="keyword">木星(Jupiter)</span>是太阳系八大行星中体积最大,自转最快的行星,从内向外的第五颗行星。它的质量为太阳的干分之一,是太阳系中其它七大行星成量总和的25倍。由于木星与士星、天王星、海王星皆属气体行星,因此四者又合称类木行星(木星和士星合称气态巨行星)。木量是一个气态巨行星,占所有太妇系行星质量的70%,主费由氢组成,占其总质量的75%,其次为氮,占总历量的25%,岩核则含有其他校重的元素。人类所看到的通常是大气中云层的购端,压强比1个大气压略部</p>
</div>
<div class="item">
<h3>地球</h3>
<img class="album" src="../images/diqiu.jpg" alt="地球">
<p><span class="keyword">地球 (Earth)</span>是太阳系八大行星之一,按离太阳由近及远的次序排为第三颗,也是太阳系中直径、质量和密度最大的类地行星,距离太阳1.5亿公里。地球自西向东自转,同时围绕太阳公转。现有40~46亿岁,[1] 它有一个天然卫星一月球,二者组成一个天体系统地月系统。46亿年以前起源于原始太阳星云。</p>
</div>
</body>
</html>