CSS简介
CSS 是 层叠样式表
的简称。也会称之为 CSS样式表
或 级联样式表
。
CSS 是一种 标记语言
。
语法规范
CSS 规则由两个主要的部分构成:选择器
以及 声明
。
选择器
是用于选出需要设置 CSS 样式的 HTML 标签,选择器后跟的花括号内是对该对象设置的具体样式属性
和属性值
以 “键值对” 的形式出现属性: 属性值;
- 属性是对指定的对象设置的样式属性,例如:字体大小、文本颜色等
- 属性和属性值之间用英文
:
分开 - 多个 “键值对” 之间用英文
;
进行区分(末尾的键值对可以不加;
)
标签内,表示是样式表。
一般写到
里。h4 {
color: bule;
font-size: 100px;
}
注:
标签可以写到其他标签内部并作用与该标签区域内,但是强烈不推荐这种写法!
type="text/css"
可以省略。
- 样式格式推荐展开
h3 { color: deeppink; font-size: 20px; }
- 样式大小推荐小写:样式选择器,属性名,属性值关键字全部使用小写字母,特殊情况除外。
h3 { color: pink; }
- 空格保留
- 属性值前面,冒号后面,保留一个空格
- 选择器(标签)和前花括号中间,保留一个空格
h3 { color: pink; }
选择器分为
基础选择器
和 复合选择器
两个大类。标签选择器
标签选择器
(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。作用:
标签选择器可以把某一类标签全部选择出来,比如所有的
标签和所有的
标签。【CSS基础总结01】优点:
能快速为页面中同类型的标签统一设置样式。
缺点:
不能设计差异化样式,只能选择全部的当前标签。
基础选择器之标签选择器 - 锐客网 /* 会对所有的该标签元素运用样式,优点:快速统一,缺点:无法差异化设置 */
p {
color: green;
}
div {
color: pink;
}男
男
男
女生
女生
女生
类选择器
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用
类选择器
。类选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器以一个
.
号显示。变红色
注意:
- 类选择器使用
.
(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的) - 可以理解为给这个标签起了一个别名来表示
- 长名称或词组可以使用中横线
-
来为类命名 - 不能使用已有的关键字作为类名
- 不要使用纯数字、中文等命名,尽量使用英文字母来表示
- 命名要有意义,尽量使别人一眼就知道这个类名的目的(可读性第一,长度第二,推荐使用英语,如果是使用拼音请使用全拼)
- 命名规范:见附件(CSS 命名规范.md)
基础选择器之类选择器 - 锐客网 /* 类选择器口诀:样式 . 定义,结构 class 调用,一个或多个,开发最常用 */
.red {
width: 100px;
height: 100px;
background-color: red;
}.green {
width: 100px;
height: 100px;
background-color: green;
}
多类名
我们可以给一个标签指定多个类名,从而达到更多的选择目的,这些类名都可以选出这个标签,简单理解就是一个标签有多个名字。
基础选择器之类选择器 - 锐客网 /* 一个标签可以运用多个类选择器,之间用空格隔开 */
.red {
color: red;
}.font35 {
font-size: 35px;
}
zhoujirui
多类名开发中使用场景
- 可以把一些标签元素相同的样式(共同的部分)放到一个类里面
- 这些标签都可以调用这个公共的类,然后再调用自己独有的类
- 从而节省 CSS 代码,统一修改也非常方便(模块化、可重用化)
基础选择器之类选择器 - 锐客网 /* 类选择器最大的优势在于:复用 */
.box {
width: 100px;
height: 100px;
}.red {
background-color: red;
}.green {
background-color: green;
}
id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以
#
来定义。注意:id 属性只能在每个 HTML 文档中出现一次。
基础选择器之id选择器 - 锐客网 /* id 选择器口诀:样式 # 定义,结构 id 调用,只能调用一次,别人切勿使用 */
#pink {
color: pink;
}
zhoujirui
id 选择器和类选择器的区别:
- 类选择器 (class) 可以重复,id 选择器不可重复(同一个 id 选择器只能调用一次)
- 类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 JavaScript 搭配使用
在 CSS 中,通配符选择器使用
*
定义,它表示选取页面中所有元素(标签)。- 通配符选择器不需要调用,自动就给所有的元素使用样式
- 特殊情况才使用
// 利用通配符选择器清除所有的元素标签的内外边距
* {
margin: 0;
padding: 0;
}
选择器总结
基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如:p | 不能差异化选择 | 较多 | p {color: red;
} |
类选择器 | 可以选出 1 个或者 多个 标签 | 可以根据需求选择 | 非常多 | .nav {color: red;
} |
id 选择器 | 一次只能选择 1 个标签 | ID 属性只能在每个 HTML 文档中出现一次,也只能调用一次 | 一般和 js 搭配 | #nav {color: red;
} |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 特殊情况使用 | * {color: red;
} |
字体系列
、大小
、粗细
、和 文字样式
(如:斜体)。字体系列
CSS 使用 font-family 属性定义文本的字体系列。
p {
font-family: "Microsoft YaHei";
}div {
font-family: Arial, "Microsoft YaHei";
}
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下,如果有空格隔开的多个单词组成的字体,加引号
- 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
- 最常用的字体:
body {font-family: "Microsoft YaHei", tahoma, arial, sans-serif, "Hiragino Sans GB"; }
/* 浏览器会从第一个字体开始进行适配,如果本机可以适配的话,那么就使用该字体,否则看下一个字体,
如果都不可以,那么浏览器会使用自带的默认字体,所以实际开发中一般建议使用比较标准化的字体 */
h2 {
/* font-family: '微软雅黑';
可以使用中文,但不建议 */
font-family: "Microsoft YaHei", Arial, sans-serif;
}p {
font-family: "Times New Roman", Times, serif;
}
/* 一些情况下,如果要全局设置字体可以直接在 body 标签选择器中指明 */
body {
font-family: "Microsoft YaHei", Arial, sans-serif;
}
注意:浏览器字体是依据用户操作系统来调用的。
字体大小
CSS 使用 font-size 属性定义字体大小。
p {
font-size: 20px;
}
- px(像素)大小是我们网页的最常用的单位
- 谷歌浏览器默认的文字大小为:16px
- 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
- 可以给 body 指定整个页面文字的大小
/* 全局设置时,一般在 body 标签选择器中指定文字大小,谷歌浏览器默认 16px,
但是最好还是指定一个明确值,以保证在不同浏览器中的效果是一样的 */
body {
font-size: 24px;
}
/* 标题标签比较特殊,body 中的设置对其是不生效的,需要单独指定文字大小 */
h2 {
font-size: 54px;
}
字体粗细
CSS 使用 font-weight 属性设置文本字体的粗细。
p {
font-weight: bold;
}
属性值 | 描述 |
---|---|
normal |
默认值(不加粗的) |
bold |
定义粗体(加粗的) |
100-900 |
400 等同于 normal,而 700 等同于 bold,其它值一般不使用,注意这个数字后面不跟单位 |
- 学会让加粗标签(比如 h 和 strong 等)变为不加粗,或者让其他标签加粗
- 实际开发时,我们更喜欢用数字表示粗细
.bold {
/* font-weight: bold;
*/
/* 实际开发中,我们更提倡使用数字来表示加粗的效果 */
/* 这个 700 的后面不要跟单位 */
font-weight: 700;
}
/* 使文字不加粗 */
h2 {
/* font-weight: normal;
*/
font-weight: 400;
}
文字样式
CSS 使用 font-style 属性设置文本的风格。
p {
font-style: normal;
}
属性值 | 作用 |
---|---|
normal |
默认值,浏览器会显示标准的字体样式 font-style: normal; |
italic |
浏览器会显示斜体的字体样式 |
字体复合属性
字体属性可以把以上文字样式综合来写,这样可以更节约代码。
body {
font: font-style font-weight font-size/line-height font-family;
}body {
font: normal 400 font-size/line-height "Microsoft YaHei", Arial, sans-serif;
}
- 使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
- 不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用
CSS字体属性之复合属性 - 锐客网 /* 想要 div 文字变倾斜、加粗、字号设置为 16 像素,并且是微软雅黑 */
div {
/* font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft YaHei';
*//* 复合属性:简写的方式,里面的顺序不能打乱 以空格隔开 */
/* font: font-style font-weight font-size/line-height font-family;
*/
font: italic 700 16px 'Microsoft YaHei';
/* 注意:不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用 */
/* font: 20px 'Microsoft YaHei'; */
}
三生三世十里桃花,一心一意百行代码
字体属性总结
属性 | 表示 | 注意点 |
---|---|---|
font-size |
字号 | 我们通常用的单位是 px 像素,一定要跟上单位 |
font-family |
字体 | 实际工作中按照团队约定来写字体 |
font-weight |
字体属性 | 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 |
font-style |
字体样式 | 记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal |
font |
字体连写 | 1、字体连写是有顺序的不能随意换位置,2、其中字号和字体必须同时出现 |
外观
,比如:文本颜色
、文本对齐
、文本装饰
、文本缩进
、行间距
等。文本颜色
color
属性用于定义文本的颜色。div
color: deeppink;
/* color: #FF1493;
最常用 */
/* color: rgb(255, 20, 147);
*/
}
表示方式 | 属性值 |
---|---|
预定义的颜色值 | red,green,blue,black,white,gray |
十六进制 | #FF0000,#FF6600,#29D794(每两位对应:#红R绿G蓝B) |
RGB 代码 | rgb(255, 0, 0) 或 rgb(100%, 0%, 0%) |
text-align
属性只能作用于 块级元素
,并让该块级元素内的 行内元素
实现居中(不一定是文字)。div {
text-align: center;
}
属性值 | 解释 |
---|---|
left | 左对齐(默认值) |
rigth | 右对齐 |
center | 居中对齐 |
text-decoration
属性规定添加到文本的修饰,可以给文本添加 下划线
、删除线
、上划线
等。div {
text-decoration: underline;
}
属性值 | 描述 |
---|---|
none |
默认,没有装饰线(最常用) |
underline |
下划线,链接 a 自带下划线(常用) |
overline |
上划线(几乎不用) |
line-through |
删除线(不常用) |
text-indent
属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
div {
text-indent: 10px;
}
p {
font-size: 24px;
/* em 为相对于当前元素的大小单位 */
text-indent: 2em;
}
行间距(行高)
line-height
属性用于设置行间的距离(行高),可以控制文字行与行之间的距离。- 行间距 = 上间距 + 文本高度 + 下间距
- 上下间距 = (行间距 - 文本高度)/ 2
- 文本高度 = font-size
p {
line-height: 26px;
}
注:上一行文字的底部与本行文字的底部之间的距离就是行间距。
文本属性总结
属性 | 表示 | 注意点 |
---|---|---|
color |
文本颜色 | 我们通常用 十六进制 而且通常是简写形式 #fff(6 个一样可以简写) |
text-align |
文本对齐 | 可以设定文字水平的对齐方式 |
text-indent |
文本缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent: 2em; |
text-decoration |
文本修饰 | 牢记 添加下划线 underline 取消下划线 none |
line-height |
行高 | 控制行与行之间的距离 |
- 行内样式表(行内式)
- 内部样式表(嵌入式)
- 外部样式表(外链式)
行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式,适合于修改简单样式。
青春不常在,抓紧谈恋爱
style
其实就是标签的属性- 在双引号中间,写法要符合 CSS 规范
- 可以控制当前的标签设置样式
- 由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用
- 使用行内样式表设定 CSS,通常也被称为
行内式引入
内部样式表(嵌入样式表)时写到 HTML 页面内部,是将所有的 CSS 代码抽取出来,单独放到一个
标签中。
div {
color: red;
font-size: 12px;
}
标签理论上可以放在 HTML 文档的任何地方,但一般会放到文档的
标签中
- 目前的浏览器已经支持省略
type
属性 - 通过此种方式,可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰,但是并没有实现结构与样式完全分离
- 使用内部样式表设定 CSS,通常也被称为
嵌入式引入
,这种方式是我们练习时常用的方式
实际开发都是外部样式表,适合于样式比较多的情况,核心是:样式单独写到 CSS 文件中,之后把 CSS 文件引入到 HTML 页面中使用。
引入外部样式表分为两步:
- 新建一个后缀名为:
.css
的样式文件,把所有的 CSS 代码都放入此文件中 - 在 HTML 页面中,使用
标签引入这个文件
属性 | 作用 |
---|---|
rel |
定义当前文档与被链接文档之间的关系,在这里需要指定为 "stylesheet",表示被链接的文档是一个样式表文件 |
type |
定被链接文档的 MIME 类型,该属性最常见的 MIME 类型是 "text/css",该类型描述样式表,目前的浏览器已经支持省略 "type" 属性 |
href |
定义所链接外部样式表文件的 URL,可以是相对路径,也可以是绝对路径 |
- 复合选择器可以更准确、更高效的选择目标元素(标签)
- 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
- 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等
后代选择器
又称为 包含选择器
,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。元素1 元素2 { 样式声明 }
- 元素1 和 元素2 中间用 空格 隔开
- 元素1 是父级,元素2 是子级,最终选择的是 元素2,即:元素1 是不会生效样式的
- 元素2 可以是儿子,也可以是孙子等,只要是 元素1 的后代即可
- 元素1 和 元素2 可以是任意基础选择器
复合选择器之后代选择器 - 锐客网 /* 把 ol 里面的小 li 选出来改为 pink */
ol li {
color: pink;
}/* 把 ol 里面的小 a 选出来改为 red */
ol a {
color: red;
}/* 把 ul 里面的小 li 选出来改为 green */
ul li {
color: green;
}/* 把 nav 类中的 li 里面的 a 选出来改为 yellow */
.nav li a {
color: yellow;
}
- 我是 ol 的孩子
- 我是 ol 的孩子
- 我是 ol 的孩子
- 我是 ol 的孙子
- 我是 ul 的孩子
- 我是 ul 的孩子
- 我是 ul 的孩子
- 我是 ul 的孙子,但是我不会变化
子选择器
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素,简单理解就是选亲儿子元素。
注意:是最近一级而并非最近一个!
语法:
元素1>元素2 { 样式声明 }
上述语法表示选择元素1 里面的所有直接后代(子元素)元素2。
例如:
div>p { 样式声明 }/* 选择 div 里面所有最近一级 p 标签元素 */
- 元素1 和 元素2 中间用 大于号 隔开
- 元素1 是父级,元素2 是子级,最终选择的是元素2,即元素1 是不会生效样式的
- 元素2 必须是亲儿子,其孙子、重孙之类都不归他管,你也可以叫:亲儿子选择器
复合选择器之子元素选择器 - 锐客网 .nav>a {
color: red;
}我是儿子1我是孙子1
我是孙子2
我是儿子2
并集选择器
并集选择器
可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明。 并集选择器
是各选择器通过英文逗号 ,
连接而成,任何形式的选择器都可以作为并集选择器的一部分。语法:
元素1, 元素2, 元素3 { 样式声明 }
元素1,
元素2,
元素3 {
样式声明
}
/* 推荐写法,编码风格 */
上述语法表示选择元素1、元素2 和 元素3。
例如:
ul, div { 样式声明 }/* 选择 ul 和 div标签元素 */
- 元素1 和 元素2 中间用逗号隔开(最后一个不加逗号)
- 逗号可以理解为和的意思
- 并集选择器通常用于集体声明
复合选择器之并集选择器 - 锐客网 /* 要求1:请把熊大和熊二改为粉色 */
/* div,
p {
color: pink;
} *//* 要求2:请把熊大和熊二改为红色,还有小猪一家改为粉色 */
div,
p,
.pig li {
color: pink;
}
/* 语法规范:并集选择器通常竖着写 */
熊大熊二
光头强
- 小猪佩奇
- 猪爸爸
- 猪妈妈
伪类选择器
伪类选择器
用于向某些选择器添加特殊的效果,比如:给链接添加特殊效果(链接伪类),或选择第 n 个元素(结构伪类)。 伪类选择器
书写最大的特点是用冒号 :
表示,比如::hover
、:first-child
。 因为伪类选择器很多,比如:链接伪类
、结构伪类
等,所以这里先讲解常用的链接伪类选择器。伪类的由来:因为在页面中并没有这个真实存在的类,所以称为 “伪类”。链接伪类选择器
链接伪类选择器注意事项:
- 为了确保生效且不冲突,请按照
LVHA
的顺序声明:link
:visited
:hover
:active
- 因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式
复合选择器之链接伪类选择器 - 锐客网 /* 注意:要学会触类旁通,这里不只是可以改变颜色,当链接为图片时还可以改图片 */
/* 1、a:link 把没有点击过的(访问过的)链接选出来 */
a:link {
color: #333;
text-decoration: none;
}/* 2、a:visited 选择点击过的(访问过的)链接选出来 */
a:visited {
color: orange;
}/* 3、a:hover 选择鼠标经过(停留)的那个链接 */
a:hover {
color: skyblue;
}/* 4、a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active {
color: green;
}
小猪佩奇
注意:
:hover
:active
也适用于其他标签元素。focus伪类选择器
:focus
伪类选择器用于选取获得焦点的表单元素。焦点就是光标,一般情况
类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。input:focus {
background-color: yellow;
}
复合选择器总结
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
---|---|---|---|---|
后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是大于 .nav>p |
并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号 .nav , .header |
链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
:focus 选择器 |
选择获得光标的表单 | 跟表单相关 | 较少 | input:focus 记住这个写法 |
元素显示模式
元素显示模式
就是元素(标签)以什么方式进行显示,比如
自己占一行,比如一行可以放多个
。HTML 元素一般分为
块元素
和 行内元素
两种类型。块元素
常见的块元素有
-、、、、、- 、
、- 、
- 、
、、