CSS 的全称为:层叠样式表 ( Cascading Style Sheets )
CSS 也是一种标记语言,用于给 HTML 结构设置样式,例如:文字大小、颜色、元素宽高等等
CSS的编写位置
(1)行内样式
写在标签的 style 属性中,(又称:内联样式)
语法:<h1 style="color:red;font-size:60px;">欢迎来到北京</h1>
注意点:
-
style 属性的值不能随便写,写要符合 CSS 语法规范,是 名:值; 的形式
-
行内样式表,只能控制当前标签的样式,对其他标签无效
(2)内部样式
写在 html 页面内部,将所有的 CSS 代码提取出来,单独放在 <style> 标签中
<style>
h1 {color: red;
font-size: 40px;}
</style>
注意点:
-
<style> 标签理论上可以放在 HTML 文档的任何地方,但一般都放在 <head> 标签中
-
此种写法:样式可以复用、代码结构清晰
(3)外部样式
写在单独的 .css 文件中,随后在 HTML 文件中引入使用
语法:
新建一个扩展名为 .css 的样式文件,把所有 CSS 代码都放入此文件中
h1{
color: red;
font-size: 40px;
}
在 HTML 文件中引入 .css 文件
<link rel="stylesheet" href="./xxx.css">
注意点:
-
<link> 标签要写在 <head> 标签中
-
<link> 标签属性说明:href :引入的文档来自于哪里
rel :( relation :关系)说明引入的文档与当前文档之间的关系
-
外部样式的优势:样式可以复用、结构清晰、可触发浏览器的缓存机制,提高访问速度 ,实现了结构与样式的完全分离。
-
实际开发中,几乎都使用外部样式,这是最推荐的使用方式
样式表的优先级
优先级规则:行内样式 > 内部样式 = 外部样式
分类 | 优点 | 缺点 | 使用频率 | 作用范围 |
行内样式 | 优先级最高 | 结构与样式未分离 代码结构混乱 央视不能复用 | 很低 | 当前标签 |
内部样式 | 样式可复用 代码结构清晰 | 结构与样式分离 样式不能多页面复用 | 一般 | 当前页面 |
外部样式 | 样式可多页面复用 代码结构清晰 可触发浏览器的缓存机制 结构与样式彻底分离 | 需要引入才能使用 | 最高 | 多个页面 |
CSS语法规范
构成:选择器:找到要添加样式的元素
声明块:设置具体的样式(声明块是由一个或多个声明组成的),声明的格式为: 属性名: 属性值;
备注:最后一个声明后的分号理论上能省略,但最好还是写上
选择器与声明块之间,属性名与属性值之间,均有一个空格,理论上能省略,但最好还是写上
CSS选择器
(1)CSS基本选择器
通配选择器
作用:可以选中所有的 HTML 元素。
*{ color: red;}
元素选择器
作用:为页面中 某种元素 统一设置样式
h1 {
color: red;
font-size: 40px;
}
p{
color: orange;
font-size: 40px;
}
类选择器
作用:根据元素的 class 值,来选中某些元素。
/* 选中所有class值为speak的元素 */
.speak {
color: red;
}
/* 选中所有class值为answer的元素 */
.answer {
color: blue;
}
注意点:
-
元素的 class 属性值不带 . 但 CSS 的类选择器要带 .
-
class 值,是我们自定义的,按照标准:不要使用纯数字、不要使用中文、尽量使用英文与数字的组合,若由多个单词组成,使用 - 做连接,例如: left-menu
-
一个元素不能写多个 class 属性,下面是 错误示例:<h1 class="speak" class="big">你好啊</h1>
-
一个元素的 class 属性,能写多个值,要用空格隔开,例如:<h1 class="speak big">你好啊</h1>
ID选择器
作用:根据元素的 id 属性值,来精准的选中某个元素。
/* 选中id值为earthy的那个元素 */
#earthy {
color: red;
font-size: 60px;
}
注意:
id 属性值:尽量由字母、数字、下划线( _ )、短杠( - )组成,最好以字母开头、不要包含空格、区分大小写。
一个元素只能拥有一个 id 属性,多个元素的 id 属性值不能相同。
一个元素可以同时拥有 id 和 class 属性。
基本选择器总结
基本选择器 | 特点 | 用法 |
通配选择器 | 选中所有标签,一般用于清除样式 | *{color:red} |
元素选择器 | 选中所有同种标签,但是不能差异化选择 | h1{color:red} |
类选择器 | 选中所有特定类名(class值)的元素 | .say{color:red} |
ID选择器 | 选中特定id值的元素 | #earthy{coloe:red} |
CSS复合选择器
(1)交集选择器
作用:选中同时符合多个条件的元素
/* 选中:类名为beauty的p元素,为此种写法用的非常多!!!! */
p.beauty {
color: blue;
}
/* 选中:类名包含rich和beauty的元素 */
.rich.beauty {
color: green;
}
注意:
1. 有标签名,标签名必须写在前面
2. id 选择器、通配选择器,理论上可以作为交集的条件,但实际应用中几乎不用 —— 因为没有意义
3. 交集选择器中不可能出现两个元素选择器,因为一个元素,不可能即是 p 元素又是 span 元素
4. 用的最多的交集选择器是:元素选择器配合类名选择器,例如: p.beauty
(2)并集选择器
作用:选中多个选择器对应的元素,又称:分组选择器,多个选择器通过 , 连接,此处 , 的含义就是:或。
/* 选中id为peiqi,或类名为rich,或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
font-size: 40px;
background-color: skyblue;
width: 200px;
}
注意:
-
并集选择器,我们一般竖着写。
-
任何形式的选择器,都可以作为并集选择器的一部分 。
-
并集选择器,通常用于集体声明,可以缩小样式表体积。
(3) HTML元素间的关系
分为:①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素
-
父元素:直接包裹某个元素的元素,就是该元素的父元素
-
子元素:被父元素直接包含的元素(简记:儿子元素)
-
祖先元素:父亲的父亲......,一直往外找,都是祖先
-
后代元素:儿子的儿子......,一直往里找,都是后代
-
兄弟元素:具有相同父元素的元素,互为兄弟元素
(4)后代选择器
作用:选中指定元素中,符合要求的后代元素
语法:选择器1 选择器2 选择器3 ...... 选择器n {} (先写祖先,再写后代)
/* 选中ul中的所有li,包括儿子/孙子/重孙子 */
ul li {
color: red;
}
/* 选中ul中所有li中的a */
ul li a {
color: orange;
}
/* 选中类名为subject元素中的所有li */
.subject li {
color: blue;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
color: blue;
}
注意:后代选择器,最终选择的是后代。结构一定要符合之前讲的 HTML 嵌套要求,例如:不能 p 中写 h1 ~ h6
(5)子代选择器
作用:选中指定元素中,符合要求的子元素(儿子元素)。(先写父,再写子)
语法:选择器1 > 选择器2 > 选择器3 > ...... 选择器n {}
选择器之间,用 > 隔开, > 可以理解为:" xxx 的子代",其实就是儿子的意思
选择器 1234....n ,可以是我们之前学的任何一种选择器
/* div中的子代a元素 只包括儿子*/
div>a {
color: red;
}
/* 类名为persons的元素中的子代a元素 */
.persons>a{
color: red;
}
注意:子代选择器,最终选择的是子代,不是父级。子、孙子、重孙子 ...... 统称后代!,子就是指子子
(6)兄弟选择器
-
相邻兄弟选择器:
作用:选中指定元素后,符合条件的相邻兄弟元素。
所谓相邻,就是紧挨着他的下一个
语法: 选择器1+选择器2 {}
/* 选中div后相邻的兄弟p元素 */
div+p {
color:red;
}
-
通用兄弟选择器:
作用:选中指定元素后,符合条件的所有兄弟元素
语法: 选择器1~选择器2 {}
/* 选中div后的所有的兄弟p元素 */
div~p {
color:red;
}
注意:两种兄弟选择器,选择的是下面的兄弟
(7)属性选择器
作用:选中属性值符合一定要求的元素
语法:
-
[属性名] 选中具有某个属性的元素
-
[属性名="值"] 选中包含某个属性,且属性值等于指定值的元素。
-
[属性名^="值"] 选中包含某个属性,且属性值以指定的值开头的元素。
-
[属性名$="值"] 选中包含某个属性,且属性值以指定的值结尾的元素。
-
[属性名*=“值”] 选择包含某个属性,属性值包含指定值的元素。
举例:
/* 选中具有title属性的元素 */
div[title]{color:red;}
/* 选中title属性值为atguigu的元素 */
div[title="atguigu"]{color:red;}
/* 选中title属性值以a开头的元素 */
div[title^="a"]{color:red;}
/* 选中title属性值以u结尾的元素 */
div[title$="u"]{color:red;}
/* 选中title属性值包含g的元素 */
div[title*="g"]{color:red;}
(8)伪类选择器
作用:选中特殊状态的元素
如何理解“伪类”? — 像类( class ),但不是类,是元素的一种特殊状态的描述
常用的伪类选择器:
动态伪类:
-
标签名:link 超链接未被访问的状态
-
:visited 超链接访问过的状态
-
:hover 鼠标悬停在元素上的状态
-
:active 元素激活的状态,什么是激活?—— 按下鼠标不松开
注意点:遵循 LVHA 的顺序,即: link 、 visited 、 hover 、 active
-
:focus 获取焦点的元素
表单类元素才能使用 :focus 伪类
当用户:点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式,选择元素时,就是获得焦点
结构伪类:
常用的:
-
:first-child 所有兄弟元素中的第一个
-
:last-child 所有兄弟元素中的最后一个
-
:nth-child(n) 所有兄弟元素中的第 n 个
-
:first-of-type 所有同类型兄弟元素中的第一个
-
:last-of-type 所有同类型兄弟元素中的最后一个
-
:nth-of-type(n) 所有同类型兄弟元素中的 第n个
关于 n 的值:
-
0 或 不写 :什么都选不中 —— 几乎不用
-
n :选中所有子元素 —— 几乎不用
-
1~正无穷的整数 :选中对应序号的子元素
-
2n 或 even :选中序号为偶数的子元素
-
2n+1 或 odd :选中序号为奇数的子元素
-
-n+3 :选中的是前 3 个
了解即可:
1. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个
2. :nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个
3. :only-child 选择没有兄弟的元素(独生子女)
4. :only-of-type 选择没有同类型兄弟的元素
5. :root 根元素
6. :empty 内容为空元素(空格也算内容)
否定伪类:
:not(选择器) 排除满足括号中条件的元素
UI伪类:
-
:checked 被选中的复选框或单选按钮
-
:enable 可用的表单元素(没有 disabled 属性)
-
:disabled 不可用的表单元素(有 disabled 属性)
目标伪类(了解)
:target 选中锚点指向的元素
语言伪类(了解)
:lang() 根据指定的语言选择元素(本质是看 lang 属性的值)
(9)伪元素选择器
作用:选中元素中的一些特殊位置
常用伪元素:
::first-letter 选中元素中的第一个文字。
::first-line 选中元素中的第一行文字。
::selection 选中被鼠标选中的内容。
::placeholder 选中输入框的提示文字。
::before 在元素最开始的位置,创建一个子元素(必须用 content 属性指定内容)。
::after 在元素最后的位置,创建一个子元素(必须用 content 属性指定内容)。
选择器的优先级
通过不同的选择器,选中相同的元素 ,并且为相同的样式名设置不同的值时,就发生了样式的冲突,到底应用哪个样式,此时就需要看优先级了
简单描述:行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器
详细描述:
-
计算方式:每个选择器,都可计算出一组权重,格式为: (a,b,c)
a : ID 选择器的个数。
b : 类、伪类、属性 选择器的个数。
c : 元素、伪元素 选择器的个数。
例如:
选择器 权重
ul>li (0,0,2)
div ul>li p a span (0,0,6)
#atguigu .slogan (1,1,0)
#atguigu .slogan a (1,1,1)
#atguigu .slogan a:hover (1,2,1)
-
比较规则:按照从左到右的顺序,依次比较大小,当前位胜出后,后面的不再对比,例如:
(1,0,0) > (0,2,2)
(1,1,0) > (1,0,3)
(1,1,3) > (1,1,2)
-
特殊规则:行内样式权重大于所有选择器
!important 的权重,大于行内样式,大于所有选择器,权重最高!
CSS三大特性
-
层叠性
概念:如果发生了样式冲突,那就会根据一定的规则(选择器优先级),进行样式的层叠(覆盖)
什么是样式冲突? ——— 元素的同一个样式名,被设置了不同的值,这就是冲突
-
继承性
概念:元素会自动拥有其父元素、或其祖先元素上所设置的某些样式
规则:优先继承离得近的
常见的可继承属性:text-?? , font-?? , line-?? 、 color ......
备注:参照MDN网站,可查询属性是否可被继承
-
优先级
简单聊: !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式
详细聊:需要计算权重
计算权重时需要注意:并集选择器的每一个部分是分开算的
像素的概念
概念:我们的电脑屏幕是,是由一个一个“小点”组成的,每个“小点”,就是一个像素(px)
规律:像素点越小,呈现的内容就越清晰、越细腻
颜色的表示
(1)颜色名
编写方式:直接使用颜色对应的英文单词,编写比较简单,例如:red,green,blue......
颜色名这种方式,表达的颜色比较单一,所以用的并不多
具体颜色名参考 MDN 官方文档:https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
(2)rgb 或 rgba
编写方式:使用 红、黄、蓝 这三种光的三原色进行组合
r 表示 红色
g 表示 绿色
b 表示 蓝色
a 表示 透明度
举例:
/* 使用 0~255 之间的数字表示一种颜色 */
color: rgb(255, 0, 0);/* 红色 */
color: rgb(0, 255, 0);/* 绿色 */
color: rgb(0, 0, 255);/* 蓝色 */
color: rgb(0, 0, 0);/* 黑色 */
color: rgb(255, 255, 255);/* 白色 */
/* 混合出任意一种颜色 */
color:rgb(138, 43, 226) /* 紫罗兰色 */
color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */
/* 也可以使用百分比表示一种颜色(用的少) */
color: rgb(100%, 0%, 0%);/* 红色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */
小规律:
-
若三种颜色值相同,呈现的是灰色,值越大,灰色越浅。
-
rgb(0, 0, 0) 是黑色, rgb(255, 255,255) 是白色。
-
对于 rbga 来说,前三位的 rgb 形式要保持一致,要么都是 0~255 的数字,要么都是百分比 。
(3)HEX 或 HEXA
HEX 的原理同与 rgb 一样,依然是通过:红、绿、蓝色 进行组合,只不过要用 6位(分成3组) 来表达
格式为:# rrggbb
每一位数字的取值范围是: 0 ~ f ,即:( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c,d, e, f )
所以每一种光的最小值是: 00 ,最大值是: ff
color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */
/* 如果每种颜色的两位都是相同的,就可以简写*/
color: #ff9988;/* 可简为:#f98 */
/* 但要注意前三位简写了,那么透明度就也要简写 */
color: #ff998866;/* 可简为:#f986 */
注意点: IE 浏览器不支持 HEXA ,但支持 HEX 。
(4)HSL 或 HSLA
HSL 是通过:色相、饱和度、亮度,来表示一个颜色的,格式为: hsl(色相,饱和度,亮度)
色相:取值范围是 0~360 度,具体度数对应的颜色如下图:
饱和度:取值范围是 0%~100% 。(向色相中对应颜色中添加灰色, 0% 全灰, 100% 没有灰)
亮度:取值范围是 0%~100% 。( 0% 亮度没了,所以就是黑色。 100% 亮度太强,所以就是白色了)
HSLA 其实就是在 HSL 的基础上,添加了透明度
CSS字体属性
(1)字体大小
属性名: font-size
作用:控制字体的大小
语法:div{ font-size: 40px; }
注意点:Chrome 浏览器支持的最小文字为 12px ,默认的文字大小为 16px ,并且 0px 会自动消失
不同浏览器默认的字体大小可能不一致,所以最好给一个明确的值,不要用默认大小
通常以给 body 设置 font-size 属性,这样 body 中的其他元素就都可以继承了
借助控制台看样式:
(2)字体族
属性名: font-family
作用:控制字体类型。
语法:div { font-family: "STCaiyun","Microsoft YaHei",sans-serif }
注意:使用字体的英文名字兼容性会更好,具体的英文名可以自行查询,或在电脑的设置-字体
如果字体名包含空格,必须使用引号包裹起来
可以设置多个字体,按照从左到右的顺序逐个查找,找到就用,没有找到就使用后面的,且通常在最后写上 serif (衬线字体)或 sans-serif (非衬线字体)
windows 系统中,默认的字体就是微软雅
(3)字体风格
属性名: font-style
作用:控制字体是否为斜体
常用值:normal :正常(默认值)
italic :斜体(使用字体自带的斜体效果)更推荐使用
oblique :斜体(强制倾斜产生的斜体效果)
语法:div { font-style: italic; }
(4)字体粗细
属性名: font-weight
作用:控制字体的粗细
常用值:
关键词:lighter :细 normal : 正常
bold :粗 bolder :很粗 (多数字体不支持)
数值:100~1000 且无单位,数值越大,字体越粗 (或一样粗,具体得看字体设计时的精确程度)
100~300 等同于 lighter , 400~500 等同于 normal , 600 及以上等同于bold
语法:div { font-weight: bold; }
div { font-weight: 600; }
(5)字体复合写法
属性名: font ,可以把上述字体样式合并成一个属性
作用:将上述所有字体相关的属性复合在一起编写
编写规则:字体大小、字体族必须都写上
字体族必须是最后一位、字体大小必须是倒数第二位
各个属性间用空格隔开
实际开发中更推荐复合写法,但这也不是绝对的,比如只想设置字体大小,那就直接用 font-size 属性
CSS文本属性
(1)文本颜色
属性名: color
作用:控制文字的颜色
可选值:颜色名、rgb 或 rgba、HEX 或 HEXA (十六进制)、HSL 或 HSLA
开发中常用的是: rgb/rgba 或 HEX/HEXA (十六进制)
举例:div { color: rgb(112,45,78); }
(2)文本间距
字母间距: letter-spacing
单词间距: word-spacing (通过空格识别词)
属性值为像素( px ),正值让间距增大,负值让间距缩小。
(3)文本修饰
属性名: text-decoration
作用:控制文本的各种装饰线
可选值:none : 无装饰线(常用) underline :下划线(常用)
overline : 上划线 line-through : 删除线
可搭配如下值使用:dotted :虚线 wavy :波浪线 也可以指定颜色
举例:a { text-decoration: none; }
(4)文本缩进
属性名: text-indent
作用:控制文本首字母的缩进
属性值: css 中的长度单位,例如: px
举例:div {text-indent:40px;}
(5) 文本对齐_水平
属性名: text-align
作用:控制文本的水平对齐方式
常用值:left :左对齐(默认值) right :右对齐 center :居中对齐
举例:div { text-align: center; }
(6)细说 font-size
由于字体设计原因,文字最终呈现的大小,并不一定与 font-size 的值一致,可能大,也可能小
例如: font-size 设为 40px ,最终呈现的文字,可能比 40px 大,也可能比 40px小
通常情况下,文字相对字体设计框,并不是垂直居中的,通常都靠下一些
(7) 行高
属性名: line-height
作用:控制一行文字的高度
可选值:
-
normal :由浏览器根据文字大小决定的一个默认值
-
像素( px )
-
数字:参考自身 font-size 的倍数(很常用)
-
百分比:参考自身 font-size 的百分比
备注:由于字体设计原因,文字在一行中,并不是绝对垂直居中,若一行中都是文字,不会太影响观感
举例: div {
line-height: 60px;
line-height: 1.5;
line-height: 150%; }
行高注意事项:
-
line-height 过小会怎样?—— 文字产生重叠,且最小值是 0 ,不能为负数
-
line-height 是可以继承的,且为了能更好的呈现文字,最好写数值
-
line-height 和 height 是什么关系?
设置了 height ,那么高度就是 height 的值
不设置 height 的时候,会根据 line-height 计算高度
应用场景:
-
对于多行文字:控制行与行之间的距离
-
对于单行文字:让 height 等于 line-height ,可以实现文字垂直居中
备注:由于字体设计原因,靠上述办法实现的居中,并不是绝对的垂直居中,但如果一行中都是文字,不会太影响观感
(8) 文本对齐_垂直
-
顶部:无需任何属性,在垂直方向上,默认就是顶部对齐。
-
居中:对于单行文字,让 height = line-height 即可。
问题:多行文字垂直居中怎么办?—— 后面我们用定位去做。
-
底部:对于单行文字,目前一个临时的方式:
让 line-height = ( height × 2 ) - font-size - x
备注: x 是根据字体族,动态决定的一个值
(9) vertical-align
属性名: vertical-align
作用:用于指定同一行元素之间,或 表格单元格 内文字的 垂直对齐方式
常用值:baseline (默认值):使元素的基线与父元素的基线对齐
top :使元素的顶部与其所在行的顶部对齐
middle :使元素的中部与父元素的基线加上父元素字母 x 的一半对齐
bottom :使元素的底部与其所在行的底部对齐
特别注意: vertical-align 不能控制块元素
CSS列表属性
列表相关的属性,可以作用在 ul 、 ol 、 li 元素上
CSS属性名 | 功能 | 属性值 |
list-style-type | 设置列表符号 | 常用值如下: none :不显示前面的标识(很常用!) square :实心方块 disc :圆形 decimal :数字 lower-roman :小写罗马字 upper-roman :大写罗马字 lower-alpha :小写字母 upper-alpha :大写字母 |
list-style-position | 设置列表符号的位置 | inside :在 li 的里面 outside :在 li 的外边 |
list-style-image | 自定义列表符号 | url(图片地址) |
list-style | 复合属性 | 没有数量、顺序要求 |
CSS表格属性
-
边框相关属性(其他元素也能用):
CSS属性名 | 功能 | 属性值 |
border-width | 边框宽度 | CSS中可用的长度值 |
border-color | 边框颜色 | CSS中可用得颜色值 |
border-style | 边框风格 | none 默认值 solid 实线 dashed 虚线 dotted 点线 double 双实线 |
border | 边框复合属性 | 没有数量、顺序得要求 |
注意:以上 4 个边框相关的属性,其他元素也可以用,这是我们第一次遇见它们
在后面的盒子模型中,我们会详细讲解边框相关的知识
-
表格独有属性(只有 table 标签才能使用):
以下 5 个属性,只有表格才能使用,即: <table> 标签
CSS属性名 | 功能 | 属性值 |
table-layout | 设置列宽度 | auto :自动,列宽根据内容计算(默认值) fixed :固定列宽,平均分 |
border-spacing | 单元格间距 | CSS 中可用的长度值 生效的前提:单元格边框不能合并 |
border-collapse | 合并单元格边框 | collapse :合并 separate :不合并 |
empty-cells | 隐藏没有内容的单元格 | show :显示,默认 hide :隐藏 生效前提:单元格不能合并 |
caption-side | 设置表格标题位置 | top :上面(默认值) bottom :在表格下面 |
CSS 背景属性
CSS属性名 | 功能 | 属性值 |
background-color | 设置背景颜色 | 符合 CSS 中颜色规范的值 默认背景颜色是 transparent |
background-image | 设置背景图片 | url(图片地址) |
background-repeat | 设置北京重复方式 | repeat :重复,铺满整个元素,默认值 repeat-x :只在水平方向重复 repeat-y :只在垂直方向重复 no-repeat :不重复 |
background-position | 设置北京图片位置 | 通过关键字设置位置: 写两个值,用空格隔开 水平: left 、 center 、 right 垂直: top 、 center 、 bottom 如果只写一个值,另一个方向的值取 center 通过长度指定坐标位置: 以元素左上角,为坐标原点,设置图片左上角的位置 两个值,分别是 x 坐标和 y 坐标 只写一个值,会被当做 x 坐标, y 坐标取center |
background | 复合属性 | 没有数量和 顺序要求 |
CSS鼠标属性
扩展:自定义鼠标图标:
/* 自定义鼠标光标 */
cursor: url("./arrow.png"),pointer;
CSS属性名 | 功能 | 属性值 |
cursor | 设置鼠标光标样式 | pointer :小手 move :移动图标 text :文字选择器 crosshair :十字架 wait :等待 help :帮助 |
长度单位
px :像素
em :相对元素 font-size 的倍数
rem :相对根字体大小,html标签就是根
% :相对父元素计算
注意: CSS 中设置长度,必须加单位,否则样式无效
元素的显示模式
块元素(block)
又称:块级元素
特点:在页面中独占一行,不会与任何元素共用一行,是从上到下排列的
默认宽度:撑满父元素
默认高度:由内容撑开
可以通过 CSS 设置宽高
行内元素(inline)
又称:内联元素
特点:在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排列
默认宽度:由内容撑开
/* 自定义鼠标光标 */cursor: url("./arrow.png"),pointer;
默认高度:由内容撑开。
无法通过 CSS 设置宽高。
行内块元素(inline-block)
又称:内联块元素
特点:在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排列
默认宽度:由内容撑开
默认高度:由内容撑开
可以通过 CSS 设置宽高
总结各元素的显示模式
块元素(block)
主体结构标签: <html> 、 <body>
排版标签: <h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>
列表标签: <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>
表格相关标签: <table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、<caption>
<form> 与 <option>
行内元素(inline)
文本标签: <br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins>
<a> 与 <label>
行内块元素(inline-block)
图片: <img>
单元格: <td> 、 <th>
表单控件: <input> 、 <textarea> 、 <select> 、 <button>
框架标签: <iframe>
修改元素的显示模式
通过 CSS 中的 display 属性可以修改元素的默认显示模式,常用值如下:
值 描述
none 元素会被隐藏
block 元素将作为块级元素显示
inline 元素将作为内联元素显示
inline-block 元素将作为行内块元素显示
盒子模型的组成
CSS 会把所有的 HTML 元素都看成一个盒子,所有的样式也都是基于这个盒子
margin(外边距): 盒子与外界的距离
border(边框): 盒子的边框
padding(内边距): 紧贴内容的补白区域
content(内容):元素中的文本或后代元素都是它的内容
图示如下:
盒子的大小 = content + 左右 padding + 左右 border
注意:外边距 margin 不会影响盒子的大小,但会影响盒子的位置
盒子内容区(content)
max-width 、 min-width 一般不与 width 一起使用
max-height 、 min-height 一般不与 height 一起使用
CSS 属性名 | 功能 | 属性值 |
width | 设置内容区域宽度 | 长度 |
max-width | 设置内容区域的最大宽度 | 长度 |
min-width | 设置内容区域的最小宽度 | 长度 |
height | 设置内容区域的高度 | 长度 |
max-height | 设置内容区域的最大高度 | 长度 |
min-height | 设置内容区域的最小高度 | 长度 |
关于默认宽度
所谓的默认宽度,就是不设置 width 属性时,元素所呈现出来的宽度
总宽度 = 父的 content — 自身的左右 margin
内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右padding
盒子内边距(padding)
CSS 属性名 | 功能 | 属性值 |
padding-top | 上内边距 | 长度 |
padding-right | 右内边距 | 长度 |
padding-bottom | 下内边距 | 长度 |
padding-left | 左内边距 | 长度 |
padding | 复合属性 长度,可以设置 1 ~ 4 个值 | 长度 |
padding 复合属性的使用规则:
padding: 10px; 四个方向内边距都是 10px
padding: 10px 20px; 上 10px ,左右 20px (上下、左右)
padding: 10px 20px 30px; 上 10px ,左右 20px ,下 30px (上、左右、下)
padding: 10px 20px 30px 40px; 上 10px ,右 20px ,下 30px ,左 40px (上、右、下、左)
注意点:padding 的值不能为负数
行内元素 的 左右内边距是没问题的,上下内边距不能完美的设置
块级元素、行内块元素,四个方向内边距都可以完美设置
盒子边框(border)
边框相关属性共 20 个
border-style 、 border-width 、 border-color 其实也是复合属性
CSS 属性名 | 功能 | 属性值 |
border-style | 边框线风格 复合了四个方向的边框风格 | none : 默认值 solid : 实线 dashed : 虚线 dotted : 点线 double : 双实线 |
border-width | 边框线宽度 复合了四个方向的边框宽度 | 长度,默认 3px |
border-color | 边框线颜色 复合了四个方向的边框颜色 | 颜色,默认黑色 |
border | 复合属性 | 值没有顺序和数量要求 |
border-left border-left-style border-left-width border-left-color border-right border-right-style border-right-width border-right-color border-top border-top-style border-top-width border-top-color border-bottom border-bottom-style border-bottom-width border-bottom-color | 分别设置各个方向的边框 | 同上 |
盒子外边距_margin
CSS 属性名 | 功能 | 属性值 |
margin-left | 左外边距 | CSS 中的长度值 |
margin-right | 右外边距 | CSS 中的长度值 |
margin-top | 上外边距 | CSS 中的长度值 |
margin-bottom | 下外边距 | CSS 中的长度值 |
margin | 复合属性,可以写 1~4 个值,规律同 padding (顺时针) | CSS 中的长度值 |
margin 注意事项
1.子元素的 margin ,是参考父元素的 content 计算的。(因为是父亲的 content 中承装着子元素)
2.上 margin 、左 margin :影响自己的位置;下 margin 、右 margin :影响后面兄弟元素的位置
3.块级元素、行内块元素,均可以完美地设置四个方向的 margin ;但行内元素,左右margin 可以完美设置,上下 margin 设置无效
4.margin 的值也可以是 auto ,如果给一个块级元素设置左右 margin 都为 auto ,该块级元素会在父元素中水平居中
5.margin 的值可以是负值
margin 塌陷问题
1.什么是 margin 塌陷?
第一个子元素的上 margin 会作用在父元素上,最后一个子元素的下 margin 会作用在父元素上
2.如何解决 margin 塌陷?
方案一: 给父元素设置不为 0 的 padding
方案二: 给父元素设置宽度不为 0 的 border
方案三:给父元素设置 css 样式 overflow:hidden
margin 合并问题
1.什么是 margin 合并?
上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并,取一个最大的值,而不是相加。
2.如何解决 margin 塌陷?
无需解决,布局的时候上下的兄弟元素,只给一个设置上下外边距就可以了
CSS 属性名 功能 属性值
overflow 溢出内容的处理方式
visible :显示,默认值
hidden :隐藏
scroll :显示滚动条,不论内容是否溢出
auto :自动显示滚动条,内容不溢出不显示
overflow-x:水平方向溢出内容的处理方式 同 overflow
overflow-y:垂直方向溢出内容给的处理方式同 overflow
处理内容溢出
CSS 属性名 | 功能 | 属性值 |
overflow | 溢出内容的处理方式 | visible :显示,默认值 hidden :隐藏 scroll :显示滚动条,不论内容是否溢出 auto :自动显示滚动条,内容不溢出不显 |
overflow-x | 水平方向溢出内容的处理方式 | 同 overflow |
overflow-y | 竖直方向溢出内容的处理方式 | 同 overflow |
注意:overflow-x 、 overflow-y 不能一个是 hidden ,一个是 visible ,是实验性属性,不建议使用
overflow 常用的值是 hidden 和 auto ,除了能处理溢出的显示方式,还可以解决很多疑难杂症
隐藏元素的方式
方式一:visibility 属性
visibility 属性默认值是 show ,如果设置为 hidden ,元素会隐藏
元素看不见了,还占有原来的位置(元素的大小依然保持)
方式二: display 属性
设置 display:none ,就可以让元素隐藏
彻底地隐藏,不但看不见,也不占用任何位置,没有大小宽高
样式的继承
有些样式会继承,元素如果本身设置了某个样式,就使用本身设置的样式;但如果本身没有设置某个样式,会从父元素开始一级一级继承(优先继承离得近的祖先元素)
会继承的 css 属性:字体属性、文本属性(除了vertical-align)、文字颜色 等
不会继承的 css 属性:边框、背景、内边距、外边距、宽高、溢出方式 等
一个规律:能继承的属性,都是不影响布局的,简单说:都是和盒子模型没关系的
默认样式
元素一般都些默认的样式,例如:
<a> 元素:下划线、字体颜色、鼠标小手
<h1> ~ <h6> 元素: 文字加粗、文字大小、上下外边距
<p> 元素:上下外边距
<ul> 、<ol> 元素:左内边距
body 元素: 8px 外边距(4个方向)
......
优先级:元素的默认样式 > 继承的样式,所以如果要重置元素的默认样式,选择器一定要直接选择器到该元素
布局小技巧
-
行内元素、行内块元素,可以被父元素当做文本处理
即:可以像处理文本对齐一样,去处理:行内、行内块在父元素中的对齐
例如: text-align 、 line-height 、 text-indent 等
-
如何让子元素,在父亲中 水平居中:
若子元素为块元素,给父元素加上: margin:0 auto;
若子元素为行内元素、行内块元素,给父元素加上: text-align:center
-
如何让子元素,在父亲中 垂直居中:
若子元素为块元素,给子元素加上: margin-top ,值为:(父元素 content -子元素盒子总高) / 2
若子元素为行内元素、行内块元素:让父元素的 height = line-height ,每个子元素都加上: vertical-align:middle; 补充:若想绝对垂直居中,父元素 font-size 设置为 0
元素之间的空白问题
产生的原因:
行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符
解决方案:方案一: 去掉换行和空格(不推荐)
方案二: 给父元素设置 font-size:0 ,再给需要显示文字的元素,单独设置字体大小(推荐)
行内块的幽灵空白问题
产生原因:行内块元素与文本的基线对齐,而文本的基线与文本最底端之间是有一定距离的
解决方案:方案一: 给行内块设置 vertical ,值不为 baseline 即可,设置为 middel 、 bottom 、top 均可
方案二: 若父元素中只有一张图片,设置图片为 display:block
方案三: 给父元素设置 font-size: 0 ,如果该行内块内部还有文本,则需单独设置 font-size
浮动的简介
在最初,浮动是用来实现文字环绕图片效果的,现在浮动是主流的页面布局方式之一
语法:float:left
元素浮动后的特点
脱离文档流
不管浮动前是什么元素,浮动后:默认宽与高都是被内容撑开(尽可能小),而且可以设置宽高
不会独占一行,可以与其他元素共用一行
不会 margin 合并,也不会 margin 塌陷,能够完美的设置四个方向的 margin 和 padding
不会像行内块一样被当做文本处理(没有行内块的空白问题)
浮动小练习
练习1:盒子1右浮动,效果如下 box1{ float:right}
练习2:盒子1左浮动,效果如下 box1{ float:left }
练习3:所有盒子都浮动,效果如下 box{ float:left }
练习4:所有盒子浮动后,盒子3落下来,效果如下
练习5:所有盒子浮动后,盒子3卡住了,效果如下
解决浮动产生的影响
4.1 元素浮动后会有哪些影响
对兄弟元素的影响: 后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面;对前面的兄弟无影响
对父元素的影响: 不能撑起父元素的高度,导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元素
4.2 解决浮动产生的影响(清除浮动)
解决方案:
方案一: 给父元素指定高度
方案二: 给父元素也设置浮动,带来其他影响
方案三: 给父元素设置 overflow:hidden
方案四: 在所有浮动元素的最后面,添加一个块级元素,并给该块级元素设置 clear:both
方案五: 给浮动元素的父元素,设置伪元素,通过伪元素清除浮动,原理与方案四相同===> 推
荐使用布局中的一个原则:设置浮动的时候,兄弟元素要么全都浮动,要么全都不浮动
.parent::after {
content: "";
display: block;
clear:both;
}
浮动布局小练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>06_浮动布局小练习</title>
<style>
* {
margin: 0;
padding: 0;
}
.leftfix {
float: left;
}
.rightfix {
float: right;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.container {
width: 960px;
margin: 0 auto;
text-align: center;
}
.logo {
width: 200px;
}
.banner1 {
width: 540px;
margin: 0 10px;
}
.banner2 {
width: 200px;
}
.logo,.banner1,.banner2 {
height: 80px;
line-height: 80px;
background-color: #ccc;
}
.menu {
height: 30px;
background-color: #ccc;
margin-top: 10px;
line-height: 30px;
}
.item1,.item2 {
width: 368px;
height: 198px;
line-height: 198px;
border: 1px solid black;
margin-right: 10px;
}
.content {
margin-top: 10px;
}
.item3,.item4,.item5,.item6 {
width: 178px;
height: 198px;
line-height: 198px;
border: 1px solid black;
margin-right: 10px;
}
.bottom {
margin-top: 10px;
}
.item7,.item8,.item9 {
width: 198px;
height: 128px;
line-height: 128px;
border: 1px solid black;
}
.item8 {
margin: 10px 0;
}
.footer {
height: 60px;
background-color: #ccc;
margin-top: 10px;
line-height: 60px;
}
</style>
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="page-header clearfix">
<div class="logo leftfix">logo</div>
<div class="banner1 leftfix">banner1</div>
<div class="banner2 leftfix">banner2</div>
</div>
<!-- 菜单 -->
<div class="menu">菜单</div>
<!-- 内容区 -->
<div class="content clearfix">
<!-- 左侧 -->
<div class="left leftfix">
<!-- 上 -->
<div class="top clearfix">
<div class="item1 leftfix">栏目一</div>
<div class="item2 leftfix">栏目二</div>
</div>
<!-- 下 -->
<div class="bottom clearfix">
<div class="item3 leftfix">栏目三</div>
<div class="item4 leftfix">栏目四</div>
<div class="item5 leftfix">栏目五</div>
<div class="item6 leftfix">栏目六</div>
</div>
</div>
<!-- 右侧 -->
<div class="right rightfix">
<div class="item7">栏目七</div>
<div class="item8">栏目八</div>
<div class="item9">栏目九</div>
</div>
</div>
<!-- 页脚 -->
<div class="footer">页脚</div>
</div>
</body>
</html>
相对定位
1.1 如何设置相对定位?
给元素设置 position:relative 即可实现相对定位
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置
1.2 相对定位的参考点在哪里?
相对自己原来的位置
1.3 相对定位的特点:
(1)不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响
(2)定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的
默认规则是:定位的元素会盖在普通元素之上
都发生定位的两个元素,后写的元素会盖在先写的元素之上
(3)left 不能和 right 一起设置, top 和 bottom 不能一起设置
(4)相对定位的元素,也能继续浮动,但不推荐这样做
(5)相对行为的元素,也能通过 margin 调整位置,但不推荐这样做
注意:绝大多数情况下,相对定位,会与绝对定位配合使用
绝对定位
2.1 如何设置绝对定位?
给元素设置 position: absolute 即可实现绝对定位
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置
2.2 绝对定位的参考点在哪里?
参考它的包含块
什么是包含块?
(1)对于没有脱离文档流的元素:包含块就是父元素
(2)对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没定位,那包含块就是整个页面)
2.3 绝对定位元素的特点:
(1)脱离文档流,会对后面的兄弟元素、父元素有影响
(2)left 不能和 right 一起设置, top 和 bottom 不能一起设置
(3)绝对定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主
(4)绝对定位的元素,也能通过 margin 调整位置,但不推荐这样做
(5)无论是什么元素(行内、行内块、块级)设置为绝对定位之后,都变成了定位元素
何为定位元素? —— 默认宽、高都被内容所撑开,且能自由设置宽高
固定定位
3.1 如何设置为固定定位?
给元素设置 position: fixed 即可实现固定定位
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置
3.2 固定定位的参考点在哪里?
参考它的视口
什么是视口?—— 对于 PC 浏览器来说,视口就是我们看网页的那扇“窗户”
3.3 固定定位元素的特点
(1)脱离文档流,会对后面的兄弟元素、父元素有影响
(2)left 不能和 right 一起设置, top 和 bottom 不能一起设置
(3)固定定位和浮动不能同时设置,如果同时设置,浮动失效,以固定定位为主
(4)固定定位的元素,也能通过 margin 调整位置,但不推荐这样做
(5)无论是什么元素(行内、行内块、块级)设置为固定定位之后,都变成了定位元素
粘性定位
4.1 如何设置为粘性定位?
给元素设置 position:sticky 即可实现粘性定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置,不过最常用的是 top 值。
4.2 粘性定位的参考点在哪里?
离它最近的一个拥有“滚动机制”的祖先元素,即便这个祖先不是最近的真实可滚动祖先
4.3 粘性定位元素的特点
(1)不会脱离文档流,它是一种专门用于窗口滚动时的新的定位方式
(2)最常用的值是 top 值
(3)粘性定位和浮动可以同时设置,但不推荐这样做
(4)粘性定位的元素,也能通过 margin 调整位置,但不推荐这样做
(5)粘性定位和相对定位的特点基本一致,不同的是:粘性定位可以在元素到达某个位置时将其固定。
定位层级
(1)定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的
(2)如果位置发生重叠,默认情况是:后面的元素,会显示在前面元素之上
(3)可以通过 css 属性 z-index 调整元素的显示层级
(4)z-index 的属性值是数字,没有单位,值越大显示层级越高
(5)只有定位的元素设置 z-index 才有效
(6)如果 z-index 值大的元素,依然没有覆盖掉 z-index 值小的元素,那么请检查其包含块的层级
定位的特殊应用
注意:发生固定定位、绝对定位后,元素都变成了定位元素,默认宽高被内容撑开,且依然可以设置宽高
发生相对定位后,元素依然是之前的显示模式
以下所说的特殊应用,只针对 绝对定位 和 固定定位 的元素,不包括相对定位的元素
让定位元素的宽充满包含块
(1)块宽想与包含块一致,可以给定位元素同时设置 left 和 right 为 0
(2)高度想与包含块一致, top 和 bottom 设置为 0
让定位元素在包含块中居中
注意:该定位的元素必须设置宽高!!!
方案一:
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
方案二:
left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;
版心
在 PC 端网页中,一般都会有一个固定宽度且水平居中的盒子,来显示网页的主要内容,这是网页的版心
版心的宽度一般是 960 ~ 1200 像素之间
版心可以是一个,也可以是多个
常用布局名词
位置 | |
顶部导航条 | topbar |
页头 | header 、 page-header |
导航 | nav 、 navigator 、 navbar |
搜索框 | search 、 search-box |
横幅、广告、宣传图 | banner |
主要内容 | content 、 main |
侧边栏 | aside 、 sidebar |
页脚 | footer 、 page-footer |
重置默认样式
很多元素都有默认样式,比如:
-
p 元素有默认的上下 margin
-
h1~h6 标题也有上下 margin ,且字体加粗
-
body 元素有默认的 8px 外边距
-
超链接有默认的文字颜色和下划线
-
ul 元素有默认的左 pading
-
.......
在早期,元素默认样式,能够让我们快速的绘制网页,但如今网页的设计越来越复杂,内容越来越多,而且很精细,这些默认样式会给我们绘制页面带来麻烦;而且这些默认样式,在不同的浏览器上呈现出来的效果也不一样,所以我们需要重置这些默认样式
方案一:使用全局选择器
*{ margin: 0;
padding: 0;
......}
此种方法,实际开发中不会使用,因为 * 选择的是所有元素,而并不是所有的元素都有默认样式;而且我们重置时,有时候是需要做特定处理的,比如:想让 a 元素的文字是灰色,其他元素文字是蓝色
方案二:reset.css
选择到具有默认样式的元素,清空其默认的样式
经过 reset 后的网页,好似“一张白纸”,开发人员可根据设计稿,精细的去添加具体的样式
方案三:Normalize.css
Normalize.css 是一种最新方案,它在清除默认样式的基础上,保留了一些有价值的默认样式
官网地址:http://necolas.github.io/normalize.css/
相对于 reset.css , Normalize.css 有如下优点:
(1)保护了有价值的默认样式,而不是完全去掉它们
(2)为大部分HTML元素提供一般化的样式
(3)新增对 HTML5 元素的设置
(4)对并集选择器的使用比较谨慎,有效避免调试工具杂乱
备注: Normalize.css 的重置,和 reset.css 相比,更加的温和,开发时可根据实际情况进行选择