CSS
一、CSS简介
1.语法规范
<style>
/* 选择器{样式} */
p {color: red;font-size: 12px;}
</style>
2.代码风格
(1)紧凑格式
(2)展开格式
二、基础选择器
1.选择器的作用
选择器(选择符)就是根据不同雪球把不同的标签选出来这就是选择器的作用。
2.标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
作用:标签选择器可以把某一类标签全部选择出来,比如有<div>标签和所有的<span>标签。
优点:能快速为页面中同类型的标签统一设置样式。
缺点:不能设置差异化样式,只能选择全部的当前标签。
3.类选择器
用于差异化不同标签的样式,单独选一个或几个标签。
类选择器在HTML中以class属性表示,在CSS中,类选择器以一个点“.”号表示。
注意:
类选择器使用“.”进行标识,后面紧跟类名(自定义,自己命名)
不要用纯数字、中午等命名,尽量使用英文字母
长名称或词组可以使用横线来为选择器命名
命名要有意义
4.类选择器的特殊使用——多类名
把标签元素相同样式放到一个分类里
多个类名中间必须用空格分开
节省代码量, 便于修改
5.id选择器
id 选择器可以为标由特定 id 的HTML 元素指定特定样式
HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以“#”来定义
id 属性只能在每个 HTML 文档中出现一次(只能调用一次)
6.通配符选择器
用 “ * ” 定义,表示选取页面中所有元素(标签)
通配符不需要调用
特殊情况使用,权重低于类选择器
7.基础选择器总结
三、CSS字体属性
1. font-family
设置字体系列
各种字体之间必须使用英文状态下的逗号隔开
如果有空格隔开的多个单词组成的字体加引号
尽量使用系统默认字体,保证在任何浏览器中都能正确显示
2.font-size 设置字体大小
px(像素)大小是网页最常用单位
谷歌浏览器默认文字大小为 16px
不同浏览器默认显示文字大小不一致,要确认一个明确值
可以给 body 指定整个页面文字大小
标题需要单独指定大小
3.font-weight设置字体粗细
normal 默认值400 bold 加粗700 number 不加单位
4.font-style设置字体样式
normal 默认值 italic 斜体
5.字体复合属性
使用 font 属性时,必须按照语法格式中的顺序书写,各个属性以空格隔开;
不需要设置的属性可以省略,但必须保留 font-size font-famil
y
属性,否则 font 属性不起作用;
顺序:font-style font-weigth font-size/line-height font-family
6.字体属性总结
四、CSS文本属性
CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
1.文本颜色color
表示方法:
2.文本对齐text-align
left 默认左对齐
right 右对齐
center 居中
3.文本装饰text-decoration
4.文本缩进text-indent
通常是段落的首行缩进,用2em表示
5.行间距line-height
<style> /* 设置行间距为25像素 */
line-height: 25px;
</style>
6.文本属性总结
四、CSS的引入方式
1.内部样式表
内部样式表(内嵌样式表)是写到html页面内部,是将所有CSS代码抽取出来,单独放到一个<style>标签中。
(1)<style> 标签理论上可以放在 HTML 文档的任何地方,但一般放在 <head>
标签中
(2)通过此种方式,可以方便的控制当前整个页面中的元素样式表
(3)代码结构清晰,单并没有实现结构样式分离
(4)是常用样式表
2.行内样式表
行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式,适合修改简单样式。
style其实就是标签的属性;
在双引号中间,写法要符合CSS规范;
可以控制当前的标签设置样式;
3.外部样式表
核心是把样式单独写到 CSS 文件中,之后把 CSS 文件引入到 HTML 页面中使用
引入外部样式表分为两步:
(1)新建一个后缀名为 .css 的样式文件,把所有代码都放入此文件中
(2)在 HTML 页面中,使用 <link>
标签引入这个文件
4.引入方式总结
五、Emmet语法
1.快速生成HTML结构语法
2.快速生成CSS样式
3.快速格式化代码
Vscode 快捷键:Shift + Alt +F
六、CSS复合选择器
1.简介:复合选择器是建立在基础选择器之上,对基础组合器进行组合形成的。
复合选择器可以更准确、更高效的选择目标元素
复合选择器是由多个基础选择器通过不同的方式组合而成
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器
2.后代选择器
后代选择器又称为包含选择器,可以选择父元素里的子元素,写法为:外层标签在前,内层标签在后,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
语法:元素1 元素2 {样式声明} /*选择元素1里面的所有元素2*
- 元素 1 与元素 2 中间用空格隔开
- 元素 1是父级,元素 2 是子级,最终选择元素 2
- 元素 1 和元素 2 可以是任意基础选择器
3.子选择器
子选择器只能选择作为某元素的最近一级子元素。
语法:元素1>元素2(样式声明)
元素 1 和元素 2 中间用>
大于号隔开
元素 1 是父级,元素 2 是子级,最终选择的是元素 2
元素 2 必须是亲儿子(最近一级)
4.并集选择器
并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过英文逗号连接而成,任何形式的选择器都可以作为并集选择器的一部分
语法: 元素1,元素2 { 样式声明 }
元素 1 和 元素 2 中间用,
逗号隔开
并集选择器通常用于集体声明
任何形式的选择器都可以作为并集选择器的一部分
5.伪类选择器
伪类选择器用于向某些选择器添加特殊效果,最大特点是用:
冒号表示,主要有链接伪类、结构伪类等。
5.1链接伪类
a:link
选择所有未被访问的链接
a:visited
选择所有已被访问的链接
a:hover
选择鼠标指针位于其上的链接
a:active
选择活动链接(鼠标按下未弹起)
注意:
务必按照 LVHA 的顺序声明,否则不生效
<a>
链接在浏览器中具有默认样式,所以我们需要给链接单独指定样式
在实际开发中大多只使用
5.2 focus
伪类
focus
伪类选择器用于选取获得焦点的表单元素
焦点就是光标,一般情况 <input>
类表单元素才能获取,因此这个选择器主要针对表单元素来说
6.复合选择器总结
七、CSS元素显示模式
元素显示模式转换:
转换为块元素:display:block
转换为行内元素:display:inline
转换为行内块:display:linline-block
例:
八、CSS背景
通过 CSS 背景属性,可以给页面元素添加背景样式
背景属性可以设置 背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
例: