为网页添加样式
css中注释用 /* */
术语解释
h1{
color: aqua;字体颜色
background-color: cadetblue;背景色
text-align: center;布局
}
整个代码叫做CSS规则
CSS规则=选择器(大括号前面的)+声明块
选择器
选择器:选中元素,确定样式的范围
-
ID选择器:选中的是对应ID值的元素(选择范围太窄)
-
元素选择器(只要是这个元素,不管在页面的什么位置都会被选中)(选择范围太广)
-
类选择器(常用)
声明块
出现在大括号中
声明块中包含了很多声明(属性),每一个声明表达了某一方面的样式。
CSS代码书写位置
-
内部样式表
代码书写在style元素中(最好写在head中,使浏览器最先读取到样式)
当样式比较少的时候可以用,可以少读一个CSS文件,浏览器读页面时,可以少读一个文件,提高加载速度。 -
内联样式表,元素样式表
直接写到元素的style属性里面,不需要写选择器 -
外部样式表(用的最多)
将样式书写到独立的CSS文件中
<link rel="stylesheet" href="./index.css">
需要用到这个元素链接样式表
- 外部样式表可以解决多页面样式重复的问题
- 有利于浏览器缓存从而提高页面相应速度,当页面第一次读到外部的CSS文件会将这个文件缓存起来,下一次再次遇到时不用重新读一次,直接用上次缓存的数据。
- 有利于代码分离(HTML和CSS代码),更容易阅读和维护。
常见样式声明
- color
元素内部颜色
可以直接在Google页面上点击右键属性,选中要测试的地方,在右边直接书写代码进行测试,但是这个只用于测试,刷新后样式会回到之前。
预设值:定义好的单词
三原色 色值光学三原色(红绿蓝)通过这三种颜色来组合成其他颜色,每个颜色可以使用0-255之间的数字来表达,叫做色值
rgb表示法
rgb(0,255,0)(这个颜色表示绿色)(中间是三个数字)
hex表示法(16进制)
hex:#红绿蓝(一个颜色两个数字(十六进制的数字,所以可能有字母))
比如 color: #008c8c;
- 淘宝红:#ff4400(三个颜色的两个数字都相同时,可以简写只写一个 #f40)
- 黑色 :#000000 #000
- 白色:#ffffff #fff
- red: #ff0000 #f00
- green: #00ff00 #0f0
- blue: #0000ff #00f
- purple:#f0f
- 青色:#0ff
- yellow: #ff0
- 灰色:#ccc
- background-color
元素背景颜色
- font-size
元素内部文字大小
1)px:像素,绝对单位。
2)em :相对单位,相对于父元素的字体大小的倍数,比如父元素大小为10px,子元素大小为2em,那就是父元素的两倍像素大小即20px。
每个元素必须有字体大小,如果没有申请则直接使用父元素的字体大小,如果没有父元素的字体大小,就使用基准字号(浏览器里设置的字体大小)
user agent UA用户代理(浏览器)
- font-weight
文字粗细程度,可以取数字,可以取预设值,也可以设置为单词bold(700),(默认值是normal 400)
strong元素 默认加粗:表示重要的不能忽略的内容
- font-family
文字类型:必须是用户计算机内存在的字体才会有效。
使用多个字体以匹配不同环境
ziti{
font-family: Arial, Helvetica, sans-serif;设置多个字体
}
sans-serif:非衬线字体,边缘没有经过修饰,在最后加上,防止前面的字体都无效,让电脑选择一个非衬线字体
- font-style
字体样式:通常用来设置斜体italic
i元素 默认样式是倾斜字体;实际使用的时候,通常用它来表示一个图标icon
em元素 默认斜体 表示强调的内容
- text-decoration
文本修饰:给文字加线
a元素就是浏览器默认样式中加了一个 text-decoration:underline
del元素:错误的内容 默认加了一个text-decoration:line-through
s元素:过期的内容(比如淘宝上过期的活动)
- line-height
行高:每行文本的高度 可以用px
多行文字最好使用相对单位(可以用em 最好用直接写纯数字,表示相对于当前文字的字体大小)
设置行高为容器的高度,可以让单行文本垂直居中
- width
宽度
- height
高度
- letter-space
文字间隙 (可以用em px)
- text-align
元素内部文字的排列方式(靠左,靠右,居中……)
- text-indent
首行文本缩进 :可以写px ,可以写em,2em 就是缩进两个字符(中文)
选择器
选择器:帮助你精准的选中想要的元素。
简单选择器
- ID选择器
- 元素选择器
- 类选择器
- 通配符选择器
选中所有元素
- 伪类选择器(用的很多)
选中某些元素的某种状态
hover:光标悬停状态
active:激活状态,鼠标按下去的状态
link:超链接未访问时的状态
visited:超链接访问过的状态
a:hover{
}
如果四个伪类都要写的话 按照如下顺序来书写:
link、visited、hover、active 爱恨法则(love hate)
- 伪元素选择器
生成并选中某个元素内部的第一个子元素或最后一个子元素
::before
::after
span::before{
}
- 属性选择器
根据属性名和属性的值
选择器的组合
- 后代元素 ——空格
- 子元素—— >
- 相邻兄弟元素 —— +
- 后面出现的所有兄弟元素 —— ~
- 并且
两个选择器不加任何东西直接写在一起
p元素的类样式
p.red.center.big
<p class="red center big"></p>
组合
p.red{
color: red;
}
选择器的并列
多个选择器并列,用逗号分隔
层叠
声明冲突:不同样式多次运用到同一个元素
层叠:解决声明冲突的过程(浏览器自动处理)
1.比较重要性
重要性从高到低:
1)作者样式表中的!important样式(不建议加)
作者样式表:开发者的书写样式
<style>
a{
color:blueviolet !important;
}
</style>
2)作者样式表中的普通样式
3)浏览器默认样式表
2.比较特殊性
第一步比较完后还有冲突
总体规则:看选择器,选择器选中的范围越窄,越特殊
具体规则:通过选择器计算出一个四位数(xxxx)(不考虑进位问题,不是逢十进一)
- 千位:如果是内联样式 记1 否则为0(特殊性最高)
- 百位:等于选择器中所有ID选择器中的数量
- 十位:等于选择器中所有类选择器,属性选择器,伪类选择器数量
- 个位:等于选择器中所有元素选择器,伪元素选择器的数量
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
:visited 伪类
id 选择器以 “#” 来定义。
在 CSS 中,类选择器以一个点号显示:
.center {text-align: center}
3.比较源次序
代码书写靠后的胜出
应用
- 重置样式表
书写一些作者样式表,覆盖浏览器的默认样式(不同的浏览器有不同的默认效果)
重置样式表->浏览器默认样式表
常见的充值样式表:normalize.css、reset.css、meyer.css - 爱恨法则
继承
子元素会继承父元素的某些CSS属性
可以在MDN里面查询,或者在浏览器检查哪里看。
通常与文字内容相关的属性都能被继承:
color(颜色,a元素除外)
direction(方向)
font(字体)
font-family(字体系列)
font-size(字体大小)
font-style(用于设置斜体)
font-variant(用于设置小型大写字母)
font-weight(用于设置粗体)
letter-spacing(字母间距)
line-height(行高)
text-align(用于设置对齐方式)
text-indent(用于设置首航缩进)
text-transform(用于修改大小写)
visibility(可见性)
white-space(用于指定如何处理空格)
word-spacing(字间距)
属性值的计算过程
一个元素一个元素一次渲染,按照页面文档的树形目录结构进行。
渲染每个元素的前提条件:该元素的所有CSS属性必须有值
一个元素从所有属性都没有值到所有的属性都有值,这个计算过程,叫做属性值计算过程。
属性计算过程简介:
- 确定声明值:参考样式表中没有冲突的声明,直接作为CSS属性值。
- 层叠冲突:对样式表有冲突的声明使用层叠规则,确定CSS属性值。
- 使用继承:对仍然没有值的属性,若可以继承,则继承父元素的值。
- 使用默认值:对仍然没有值的属性,使用默认值。
a元素不继承,p元素会继承
要a元素继承:
强制继承:color:inherit(在第二部就会继承了,不用到第三步)
特殊的两个CSS取值:
inherit:手动(强制)继承,将父元素的值去除应用到该元素
initial:初始值,将该属性设置为默认值
.mydiv{
background:initial;设置为默认值
}
盒模型(重要)
box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)
盒子类型:
- 行盒,display等于inline的元素
- 块盒,display等于block的元素
行盒在页面中不换行,块盒独占一行
(h1,p,div:display=block独占一行)
display默认属性为inline(不继承)
浏览器默认样式表设置的块盒:容器元素、h1-6、p
常见的行盒:span、a、img、video、audio
盒子的组成部分
无论是行盒还是块盒,都由以下几个部分组成,从内到外分别是:
- 内容 content
width、height,设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
- 填充 padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottle
padding:简写属性
padding:上 右 下 左(从上面顺时针转一圈)(如果四个值一样可以只写一个)
填充区+内容区=填充盒子(padding-box)
- 边框 border
边框=边框样式+边框宽度+边框颜色
统一设置四个方向的:border :style width color
border-style 默认值是none 没有样式那么边框就没有办法显示(要设置了样式,其他两个才能够显示出来)
border-width 跟padding是一样的,可以一起设置,可以顺时针分别设置
border-color 默认值是字体颜色 跟padding一样 可以分别设置
边框盒(border-box)=边框+内容区+填充区
- 外边距 margin
边框到其他盒子的距离
margin-top、-left、–right、-bottle
统一设置和padding一样
盒模型应用
改变宽高范围
默认情况系下,width和height设置的是内容盒的宽高。
页面重构师:将psd文件(设计稿)制作为静态页面
衡量设计稿尺寸的时候,往往使用的是边框盒,但设置width和height则设置的是内容盒
- 精确计算
- CSS3 :box-sizing :border-box 将宽高影响的范围从内容盒改到边框盒
改变背景覆盖范围
默认情况下背景覆盖边框盒
可以通过background-clip进行修改
溢出处理
overflow,控制内容溢出边框盒后的处理方式,默认情况是可见的(overflow:visible)
hidden隐藏 scroll生成滚动条(x,y方向) overflow:auto 需要滚动条时自动出现,不需要时不出现
断词规则
显示不下的时候换行:由断词规则决定,word-break会影响文字在什么位置被截断换行
-
normal:普通 对于cjk字符(Chinese、Japanese、Korean)文字位置阶段,非cjk字符,在单词位置截断
-
break-all:截断所有,所有字符都在文字处截断
-
keep-all:保持所有,所有文字都在单词处截断(在空格处截断)
空白处理
-
white-space:nowrap空白位置的处理规则是不换行,溢出后设置overflow:hidden,将溢出部分隐藏,text-overflow:eclipse;(文本溢出,表示显示不完的位置出现三个点)(!!!只能控制单行文本,多行文本要用js来处理)
-
white-space:pre 所有的空白部分不会折叠
默认是normal 空白折叠
行盒的盒模型
常见的行盒:包含具体内容的元素
span 、strong、em、i、img、video、audio
显著特点
- 盒子沿着内容延伸
- 行盒不能设置宽高,宽高无效,取决于内容(字体大小,行高,字体类型)简介调整
- 内边距(填充区)水平方向有效,垂直方向仅会影响背景,不会实际占据空间(上下的文字距离不发生变化)
- 边框 和内边距一样,仅在水平方向有效
- 外边距 仅在水平方向有效
行块盒
display:inline-block的盒子
- 不独占一行
- 盒模型中所有尺寸都有效
空白折叠会发生在 行盒内部(包含行块盒) 和 行盒之间(包含行块盒)
可替换元素和非可替换元素
-
大部分元素,页面上显示的结果,取决于元素内容称为非可替换元素
-
少部分元素,页面上显示的结果,取决于元素属性,称为可替换元素
-
可替换元素:img、video、audio
object-fit 在视频或者图片中,该图片或视频的适应方式
(contain:不打破图片的宽高比例且不能溢出 默认取值是fill:填充满,不能保持比例 cover:保持比例且要填充满 可能会溢出)
图片中宽度高度是自适应,只设置宽度,高度会按比例增加
绝大部分可替换元素是行盒,类似于行块盒,盒模型中所有尺寸都有效。
常规流
盒模型:规定单个盒子的规则
视觉格式化模型(布局规则):页面中的多个盒子排列规则
视觉格式化模型大体上将页面中盒子的排列方式分为三种方式:
- 常规流
- 浮动
- 定位
常规流布局
常规流 文档流 普通文档流 常规流
所有元素默认情况下都属于常规流布局
总体规则:块盒独占一行,行盒水平依次排列
包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域(活动区域)。
绝大部分情况下,盒子的包含块,为其父元素的内容盒
块盒
- 每个块盒的总宽度(margin+border+padding+content),必须刚好等于包含块的宽度(父元素的内容盒)
宽度的默认值是auto;margin的取值也可以是auto,默认值是0;padding默认值为0
auto:将剩余空间吸收掉(用总宽度减去已经设置的宽度)
width吸收能力强于margin
若宽度、边框、内边距计算后任然有剩余空间,该剩余空间被margin-right全部吸收
在常规流中,块盒在其包含块中居中,可以定宽,然后左右margin设置为auto
- 每个块盒垂直方向上的auto值
height:auto 适应内容的高度
margin:auto 表示0
- 百分比取值
padding、宽、margin可以取值为百分比。
以上所有百分比相对于包含块的宽度(跟高度没有关系!!)
高度的百分比:
1)包含块的高度是否取决于子元素的高度,设置百分比无效(比如子元素设置百分比50%,但是父元素没有设置高度)
2)包含块的高度不取决与子元素的高度,百分比相对于父元素高度。
- 上下外边距的合并
两个常规流块盒,上下外边距相邻,会进行合并。(比如两个div margin上下都是50,按理说上下相邻的div应该相距100,但是看到的两个div上下相邻是50,就是因为进行了合并)(父子元素也会合并,比如父元素margin-top=50px,子元素margin-top=50px,按理说子元素的顶部应该与父元素有一段距离,但是实际没有,因为上边距相邻了,所以进行合并,子元素与父元素间无距离)要想他不合并,让他不相邻就可以了,比如说加一个border或者改一下margin。
两个外边距取最大值。
浮动
应用场景
- 文字环绕
- 横向排列
浮动的基本特点
修改float属性值为:
- left:左浮动,元素靠上靠左排列
- right:右浮动,元素靠上靠右排列
默认值为none
- 当一个元素浮动后,元素必定为块盒。(更改display属性为block)
- 浮动元素包含块和常规流一样,为父元素的内容盒
盒子尺寸
- 宽度为auto时,适应内容宽度
- 高度为auto时,适应内容高度(与常规流一样)
- margin为auto时,为0
- 边框、内边距、百分比设置与常规流一样
盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子靠上靠右排列
- 浮动盒子在包含块中排列时会避开常规流块盒子
- 常规流块盒在排列时无视浮动盒子
- 行盒在排列时会避开浮动盒子
如果文字没有在行盒中,浏览器会自动生成一个行盒包裹这个盒子。该行盒叫做匿名行盒。
高度坍塌
高度坍塌的根源:常规流盒子的自动高度,在计算时,不会考虑浮动盒子,(只会考虑常规流盒子)。
解决该问题:清除浮动,涉及CSS属性:clear
- 默认值none
- left:清除左浮动:该元素必须出现在前面所有左浮动盒子的下方(排列的时候考虑一下浮动盒子的位置)
- right:清除右浮动
- both:清除左右浮动
<div class="clearfix"></div> 在高度坍塌的容器中设置属性
给他加一个最后的子元素:
.clearfix::after{
content:"";
display:block;
clear: both;
}
定位
定位:手动控制元素在包含块中的精准位置
涉及的CSS属性:position
position
- 默认值:static,静态定位(不定位)
- relative:相对定位
- absolute:绝对定位
- fixd:固定定位
一个元素只要position的取值不是static,认为该元素是一个定位元素
定位元素会脱离文档流(相对定位除外)
一个脱离了文档流的元素:
- 文档流中的元素摆放时会忽略脱离了文档流的元素。
- 文档流中元素计算自动高度时,会忽略脱离了文档流的元素。
相对定位
不会导致元素脱离文档流,只是让元素在原来位置上进行偏离。
可以通过四个css属性设置其位置:
- left
- right
- top
- bottom
盒子的偏移不会对其他的盒子造成影响。
绝对定位
- 宽高为auto,适应内容
- 包含块变化:找祖先元素中第一个定位元素,该元素的填充盒为其包含块。若找不到,则它的包含块为真个网页(初始化包含块)
(相对定位通常为绝对定位提供包含块)
固定定位
其他情况和绝对定位完全一样。
包含块不同:固定为视口(浏览器的可视窗口(滚动的时候位置不随网页移动))
定位下的居中
某个方向居中:
- 定宽(水平)或者定高(垂直方向)
- 将左右上下距离设置为0
- 将左右上下margin设置为auto
绝对定位和固定定位时,margin为auto时,会自动吸收剩余空间
多个定位元素重叠时
堆叠上下文
设置z-index,通常情况下,该值越大,越靠近用户
只有定位元素设置z-index有效
z-index可以是负数,如果是负数,则遇到常规流、浮动元素会被其覆盖
补充
- 绝对定位、固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动(当同时设置了float=left 和position=absolute的时候,float会强制转为none)
- 没有外边距合并
半透明效果
每个颜色都具有透明通道0~1(0全透明)
- rgba(红,绿,蓝,alpha)
- hex:#红绿蓝透(透明也是两个数字表示)
更多的选择器
更多伪类选择器
- first-child
选中第一个子元素
li:first-child {
/* 选中li中的第一个子元素,必须是li元素且必须是第一个子元素 */
}
first-of-type :选中子元素中第一个特定类型的元素
- last-child
last-of-type
- nth-child
选中指定的第几个子元素
a:nth-child(5)
/* 必须是a元素且必须是第五个子元素 */
括号内可以写变量(n)
even:关键字 等同于2n
odd:关键字 等同于2n+1
- nth-of-type
选中指定的子元素中第几个某类型的元素
更多伪元素选择器
- first-letter
选中元素中的第一个字母(文字)
- first-line
选中元素中第一行的元素
- selection
选中被用户框选的文字(用鼠标框选)
更多的样式
透明度
- opacity,设置的是整个元素的透明度,他的取值是0~1
- 在颜色位置设置颜色通道(rgba)
鼠标
使用cursor设置
- pointer(小手)
- 默认值是auto,让浏览器来控制
- 如果想用图片来做鼠标样式 ,一般将图片设置为.ico为后置,或者.cur
cursor: url("imgs/cat.ico"),auto; (auto就是当图片加载失败时,用浏览器默认)
盒子隐藏
- display:none 不生成盒子
- visibility:hidden,生成盒子,只是从视觉上移除盒子,盒子仍然占据空间
背景图
和img元素的区别
img元素时属于HTML的概念
背景图属于CSS概念
- 当图片属于网页内容的时候,必须使用img元素
- 当图片仅用于美化页面时,必须使用背景图
涉及的CSS属性
- background-image
div{
width: 500px;
height: 500px;
border: 2px solid ;
background-image: url("pink.jpg");
}
如果是单独写在css文件里面的话,写的时候要先写一个…/ 要先返回上一级
默认情况下,背景图会在横坐标和纵坐标中进行重复
- background-repeat
no-repeat:不重复出现
repeat-x:只在x方向重复
- background-size
背景图的尺寸
预设值:类似于object-fit
contain:保证图片完整显示,且比例不变(有可能不能占满空间)
cover:保证图片占满区域且比例不变(图片有些地方会被隐藏)
数值或百分比
background-size:100% ;表示横向一定要撑满,纵向按比例缩放
background-size:100% 100%;表示横纵向都撑满(比例可能发生变化)
background-size:300px 300px;控制横纵向尺寸
- background-position
设置背景图的位置。
预设值:top 、bottom、center、left、right
center:横向居中且纵向居中
center top:横向居中,纵向靠上
数值或百分比
background-position(0px,0px)分别表示离盒子的左边,离盒子的上边的距离
雪碧图(精灵图)(spirit)
将很多小图标合并成一张图片,当要取出其中一个小图标的时候,就可以利用背景图的位置
-
现将要取出的图标移到左上角(利用谷歌浏览器)
-
设置盒子的宽高
-
取出
-
background-attachment
通常用它控制背景图是否固定
翻动网页的时候背景图不要动,类似于(固定定位)
background-attachment:fixed;相对于视口固定
- 背景图和背景颜色混用
当背景图尺寸不够的时候,会出现白边,这时候可以再设置背景颜色来填充白边部分
- 速写(简写)background
background:url() no-repeat 50% 50%/100% fixed #000
因为位置和size都有可能出现数值,要求先写position 再加一个/ 再写size
每个位置可以不写,不写的时候就是默认值