能够用英语单词来表述的颜色,都是简单颜色。
红色:background-color: red
红色:background-color:rgb(255,0,0);
rgb(red、green、blue)表示三原色“红”“绿”“蓝”。光学显示器,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色。
用逗号隔开r,g,b的值,每个值的取值范围是0~255,一共256个值。
如果此项的值是255,那么就说明是纯色:
绿色:background-color:rgb(0,255,0)
蓝色:background-color:rgb(0,0,255)
黑色:background-color:rgb(0,0,0)
白色:background-color:rgb(255,255,255)
颜色可以叠加,比如黄色就是红色和黄色的叠加:
黄色:background-color:rgb(255,255,0)
紫色:background-color:rgb(255,0,255)
青色:background-color:rgb(0,255,255)
红色:background-color:#ff0000;
所有用#开头的值,都是16进制的。
#ff0000(ff表示r,00表示g,00表示b)
16进制表示法和rgb类似,也是两位两位的看,但是没有逗号隔开。
上述红色表示法中:ff就是10进制的255,00就是十进制的0,所以#ff0000相当于(255,0,0)
十六进制对照表:
任何一种十六进制表示法都能够换算成rgb表示法。也就是说,两个表示法能表示的颜色数量一样多,十六进制能够简化成3位,所有#rrggbb的形式,都可以写成#rgb;
比如,上述的红色可以写成background-color:#f00;
但是,如果要采用简化的方法,必须满足rrggbb格式才行。
几个特殊的要记住:
黑:#000
白:#fff
红:#f00
灰:#333
深灰:#222
浅灰:#ccc
background-image属性用于给盒子加上背景图片:
background-image:url(images/1.jpg)
url()表示网址。、
images/1.jpg就是相对路径。
背景会默认循环,平铺满整个盒子,padding的区域也会有背景图。
background-repeat属性用来设置背景图是否重复以及重复方式。
“repeat”表示“重复”。
默认为铺满,不用设置。
不重复:background-repeat:no-repeat;
横向重复:background-repeat:repeat-x;
纵向重复:background-repeat:repeat-y;
background-position:背景定位属性。
格式:background-position:向右移动量(100px) 向下移动量(200px)
向上向左移只需把移动量改成负数即可。
css精灵又叫“css雪碧”技术,是一种css图像拼合技术,该方法是将小图标和图像合并到一张图上,然后利用css背景定位来显示需要显示的图片部分。
css精灵的优点,就是减少了http请求。比如4张小图片,原本需要4个http请求。但是用了css精灵,小图片变为了一张图,http请求只有1个了。
background-position:描述左右的词 描述上下的词;
比如:background-position:right bottom:(右下角)
background-position:center center;(居中)
背景固定属性。
格式:background-attachment:fixed;
背景就会被固定住,不会被滚动条滚走。
background属性和border一样,是一个综合属性:
background:red url(1.jpg) no-repeat 100px 100px fixed;
等价于:
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;
可以任意省略部分:
background:red;
雪碧图被运用在众多使用了很多小图标的网站上。
相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更好。
一、使用雪碧图的优点有以下几点:
将多张图片合并到一张图片中,可以减小图片的总大小。
将多张图片合并成一张图片后,下载全部所需的资源,只需一次请求。可以减小建立连接的消耗。
二、雪碧图的制作与使用方法:
使用图像编辑软件如Photoshop将多张图放到同一个图层并导出。
使用自动化构建工具自动拼接合并后的图片。
引用图片时,图片地址为合并后的图片地址。
实际应用,更多的使用italic属性值
实际应用中, 行高的数值通过设计图获取, 量取数值时需要使用一些辅助软件工具
选中文字工具,属性选中:不消除锯齿
字体、 字号、 行高、 加粗、 斜体 都是font综合属性的单一属性。
font属性五个单一属性的值可以进行合写, 属性值可以有2到多个, 值之间用空格进行分隔。
font进行综合书写时, 必须有字号和字体参与, 而且必须字号在前, 字体在后, 不能颠倒顺序。
font属性经常对字体、 字号、 行高进行合写, 书写顺序必须是字号、 行高、 字体, 字号和行高之间必须用/进行分隔
如果font属性需要设置加粗和斜体, 两个属性值只能写在最前面, 两个值之间可以互换位置。 后面的字号、 行高、 字体不能更改位置
作用:设置文本整体是否有线条的装饰效果
作用:设置段落首行是否进行缩进
实际应用中,常用em
属性值区分正负, 正数表示向右缩进, 负数表示向左缩进
浏览器控制台中的盒模型图
作用: 设置可以添加元素内容的区域的宽度。
作用: 设置可以添加元素内容的区域的高度。
如果一个元素不添加 height 属性, 默认属性值为auto, 浏览器会自动计算出实际高度, 也就是是内部元素内容自动撑开的高度。 元素的高度自适应内部内容的高度。
书写四个方向单一属性时, 一般是按照顺时针规律书写: 上、 右、 下、 左
设置四个属性值, 分配方向上、 右、 下、 左。
设置三个值分配给上、 左右、 下。
设置两个值, 分配给上下、 左右 。
设置属性值只有一个, 四边的值相同。
作用: 设置边框的颜色。
属性值: 颜色名或颜色值, 整体类似 padding 综合属性写法。
每个单一属性都必须与复合属性 border 一致, 设置三个属性值。
书写四个方向单一属性时, 一般是按照顺时针规律书写: 上、 右、 下、 左
设置四个属性值, 分配方向上、 右、 下、 左。
设置三个值分配给上、 左右、 下。
设置两个值, 分配给上下、 左右 。
设置属性值只有一个, 四边的值相同。
给 <body>标签设置整体文字样式, 让大部分后代标签全部去继承
设计图中盒子高度占位是固定的, 后面同级元素在高度下面加载。多余内容会溢出盒子。
设置了高度的盒子, 如果内部元素的加载高度超过父级, 会溢出。可以通过一个溢出的属性 overflow, 进行溢出部分内容的显示效果设置。
要求盒子高度必须自适应内部内容的高度。
或者设置height的属性值是自动的。
一个元素内部嵌套的子元素, 在父元素中居中。
针对类似 <div>样式上必须独占一行的盒子, 如果子盒子宽度低于父盒子宽度, 可以设置子盒子的 margin 值, 水平方向的值都设置为 auto。
原因: auto 只在水平方向有作用, 水平方向的 margin 如果设置为 auto, 边距会自动无限增大, 直到撑满整个父元素除了子元素宽度之外剩余的区域, 如果两个水平方向都是 auto, 两边都要无限大, 只能达到一个平衡, 两边距离相同, 导致盒子居中。
一般情况下, 一个父元素内部可以放一个或多个子元素, 而且多个子元素要排成一行显示, 必须保证父元素的宽度一定要足够(不考虑溢出情况) , 需要遵循一个设置尺寸的规律: 所有子元素的宽度加在一起不能大于父元素的宽度 width。父元素的width ≥ 所有子元素width + padding + border + margin
如果不满足条件: 要么多余的子元素掉下来不能在一排, 要么溢出父元素
父子盒模型中, 只有一个子元素, 且子元素是类似 <div>标签必须占一行的。不设置子元素的 width 属性, 子元素的 width 属性值会自动加载父级元素的 width。如果同时设置了子元素水平方向的 padding 和 border 、 margin, 不需要手动去进行内减, 子元素的 width 会自动收缩尺寸。
子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。
在垂直方向如果有两个元素的外边距有相遇的, 浏览器中加载的真正的外边距不是两个间距的加和, 而是两个边距中值较大的, 边距值小的塌陷到了边距值大的值内部。
上面的元素有下边距, 下面的元素有上边距, 两个边距相遇, 真正的盒子间距离是较大的那个值
父子元素之间也会出现 margin 塌陷, 父元素和子元素都设置了同方向的margin-top 值, 两个属性之间没有其他的内容进行隔离, 导致两个属性相遇, 发生margin 塌陷。
本身父元素与上一个元素的距离是0, 子元素如果设置了垂直方向的上边距, 会带着父级一起掉下来。
水平方向的 margin 没有塌陷现象。
在标准流中, 大部分元素是区分等级的, 习惯将元素划分为几种常见的加载级别:块级元素、 行内元素、 行内块元素等。
大部分容器级标签包括p标签都是块级元素, 比如 <div>、 <h1>等。
大部分的文本级标签, 比如 <span>、 <a>、 <b>等。
比如 <img>、 <input>等。
可以通过 display 属性更改一个标签的显示模式。
属性值: 元素根据属性值不同, 可以加载对应元素等级的显示模式的特点。
display 属性更改的显示模式并没有改变标准流本质性质, 页面还是只能从上往下加载, 存在空白折叠现象等微观性质。 要想实现更多的界面布局效果需要脱离标准流的限制。
标签元素脱离标准流的方法包括: 浮动、 绝对定位、 固定定位。
margin 塌陷现象出现在标准流中的, 浮动元素已经脱离标准流, 不再具有 margin塌陷现象。
与前面压盖效果结构类似, 同级元素中前面的元素浮动, 后面的元素不浮动, 不浮动的元素内部还有一些文字, 浮动的蓝盒子会压盖住粉盒子的一部分, 但是文字内容不会被盖住, 粉盒子中的文字会让开蓝盒子位置, 围绕它进行加载。这种效果称为字围现象。
可以利用字围现象制作一些特殊的图文混排布局效果
给标准流的父元素强制给一个合适的高度
作用: 清除标签元素自身受到的前面的浮动元素的影响。
给标准流父元素添加 clear 属性, 父元素不受前面浮动影响, 不会再占有浮动让出的位置。
给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden属性, 可以解决浮动的所有问题。
父元素有了高度后, 可以管理住内部所有的浮动元素, 不会延伸到后面标签中影响贴边。
<a>标签可以根据用户行为不同, 划分为四种状态, 通过<a>标签的伪类可以将四种状态选中设置为不同的样式效果, 用户触发对应行为, 就可以加载对应的样式。
一般会将访问前和访问后状态设置为一样的效果, 保证了页面的统一性, 可以选择性的设置鼠标移上和鼠标点击状态。
更加常用的一种设置方式如下:
<a>标签任何普通的选择器, 可以同时选中四种状态, 可以将四种状态设置为相同的样式, 属性可以设置所有的 <a>默认显示样式的属性, 包括盒模型、 文字等。
a:hover 伪类选择器: 设置鼠标移上时不一样的样式属性。
属性值都是使用代表方向的单词进行书写。
使用像素值作为背景定位的属性值。
百分比表示法使用百分比数字作为属性值。
100%代表的数值:
background 属性可以将五个单一属性的值进行合写。
属性值: 可以有 1-5 个属性值, 值之间用空格进行分隔, 背景定位的两个属性值算作一个属性值, 不能被分开也不能颠倒顺序。 五个属性值之间可以互换位置。
在<h1>标签是权重最高的标签, 一般会在内部书写最重要的内容, 比如 logo 图片、 最大的标题等。
另外 <h1>内部的文字, 可以帮助提高 SEO 搜索排名。
在设置的是 logo 图片时, 如果使用插入图, 就不能书写搜索关键字。
如果想解决 SEO 问题, 可以将 HTML 结构中, 插入图换成搜索关键字, 然后使用 css 添加背景图给 <a>标签或 <h1>标签。
在一个盒子中有背景图部分, 而且有文字内容, 文字会让开背景图区域进行加载,
背景区域应该使用 padding 挤出位置。
四个方向的 padding 都可能用于添加背景图。
当用户访问一个网站时, 需要向服务器发送请求, 网页上的每张图像都要经过一次求才能展现给用户。
然而, 一个网页中往往会应用很多小的背景图像作为修饰, 当网页中的图像过多时,服务器就会频繁地接受和发送请求, 这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数, 提高页面的加载速度, 出现了 CSS精灵技术(也称 CSS Sprites、 CSS 雪碧) 。
CSS 精灵是一种处理网页背景图像的方式。
它将一个页面涉及到的所有零星背景图像都集中到一张大图中去, 然后将大图应用于网页, 这样, 当用户访问该页面时, 只需向服务发送一次请求, 网页中的背景图像即可全部展示出来。
通常情况下, 这个由很多小的背景图像合成的大图被称为精灵图。
CSS3 支持背景半透明的写法, 颜色值增加了一种 rgba 模式。
rgba 模式 : 在 rgb 基础上增加了一个不透明度的设置, 不透明度 alpha 取值范围在0-1 之间, 0 表示完全透明, 1 表示完全不透明, 0.5 表示半透明。
书写方式: rgba(红色, 绿色, 蓝色, 不透明度)
注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不受影响。
通过 background-size 设置背景图片的尺寸, 就像我们设置 <img>的尺寸一样, 在移动 Web 开发中做屏幕适配应用非常广泛。
CSS3 中规定, 一个盒子上, 可以添加多个背景图片。
background-image 的属性值书写时, 以逗号分隔多背景的 URL路径地址。
注意: 背景加载时, 先写的背景压盖后写的背景图片。
属性名: position。
作用: 设置定位的元素, 它需要根据某个参考元素发生位置的偏移。
定位的元素要想发生位置的移动, 必须搭配偏移量属性进行设置。
水平方向: left、 right。
垂直方向: top、 bottom。
属性值: 常用 px 为单位的数值, 或者百分比。
子绝父相、 子绝父绝、 子绝父固
属性值: absolute, 绝对的意思。
参考元素: 参考的是距离最近的有定位的祖先元素, 如果祖先都没有定位, 参考<body>。必须搭配偏移量属性才会发生位置移动。
性质: 绝对定位的元素脱离标准流, 会让出标准流位置, 可以设置宽高, 也可以随时定义位置, 绝对定位的元素不设置宽高只能被内容撑开。
注意1: 绝对定位的参考元素是不固定的, 不同的参考元素以及不同的偏移量组合,会导致绝对定位元素的参考点不同, 具体位移效果不同。
注意2: 在绝对定位中, 由于参考点不同, left 正值不再等价于 right 的负值。
以 <body>为参考元素时, 参考点的确定与偏移量方向有关
第一, 如果有 top 参与的定位, 参考点就是 <body>页面的左上顶点和右上顶点。 自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。
第二, 如果有 bottom 参与的绝对定位, 参考点是 <body>页面首屏的左下顶点或右下顶点。 对比点是盒子的所有盒模型属性最外面的左下角或右下角。
实际应用中, 如果以 <body>为参考元素, 不同分辨率的浏览器中, 绝对定位的元素位置是不同的, 所以较少使用 <body>作为参考元素。
祖先级为参考元素
如果祖先级中有定位的元素, 就不会去参考 <body>。
参考元素: 参考的是祖先元素中有任意定位的, 在 HTML 结构中距离目标最近的祖先。
如果绝对定位的参考元素是某个祖先级, 参考点是盒子 border 以内的四个顶点, 组合方向决定了参考点。 绝对定位的元素只关心对比点和参考点之间的距离, 会忽视参考元素的 padding 区域。
所有的定位类型都可以实现压盖效果。
由于绝对定位的元素脱标, 不占标准流位置, 压盖效果更彻底, 实际工作中, 常见的是 绝对定位制作压盖。
定位的元素不区分定位类型, 都会去压盖标准流或浮动的元素。
如果都是定位的元素, 在 HTML 中 后写定位压盖先写的定位 。
更改定位的元素的压盖顺序, 设置一个 z-index 属性。
属性值: 数字。