一、(续)CSS样式
1、单位描述
(1)尺寸
px:像素 (计算机屏幕上的一个点)
em:1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。例如,如果某元素以 12pt 显示,那么 2em 是24pt。在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。
%:百分比百分比是一个相对的概念,相对它当前的百分比,由于继承性,所以他是不固定的。
(2)颜色
所有颜色是由红R绿G蓝B三种颜色重叠形成的,分配其各自强度就能产生不同颜色,产生了四种表示方法
- 直接使用颜色名
- rgb(x,x,x)
- RGB 值 (比如 rgb(255,0,0))
- rgb(x%, x%, x%)
- RGB 百分比值 (比如 rgb(100%,0%,0%))
- #rrggbb
- 十六进制数 (比如 #ff0000),每两位代表一个颜色的强度,两位2进制数可以代表0~255
其他详细:CSS 单位
2、文字样式
通过设置装饰线,可以设置出删除线、下划线、超链接去下划线等效果
补充:属性text-transform, CSS属性指定如何将元素的文本大写。它可以用于使文本显示为全大写(uppercase)或全小写(lowercase)或者首字母大写(capitalize),默认为none
font-family 属性应该使用若干种字体名称作为回退系统,以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体,则会尝试下一个。
font属性可以简化说明,在font中声明,但是要遵循一定的顺序,字体大小和字体类型顺序不能改,前面的其他属性可以任意
3、背景与超链接
(1)背景
对于背景来说,需要先定义空元素的高度和宽度,否则无法定义背景
例如:
背景常用的三个属性:颜色、图片、填充方式。若颜色和图片均声明,则被图片覆盖,图片无法显示则显示颜色。背景色不继承,是由于默认设置为透明所以才显得是背景色一致
填充方式分别为,原大小均匀铺满背景、横向填充、纵向填充、不重复填充只用一张但是拉伸图片作为背景
补充:
背景附加方式:background-attachment该属性允许当其他内容滚动时背景固定在一个位置
- 属性值:scroll | fixed
- 默认值:scroll
背景位置:background-position。属性指定背景中原图的位置,可以将原图想像成背景中放置的第一个图,从原图开始延伸拼图
- 属性值:长度计量值|百分比值| left | center | right | top | bottom
- 默认值:0% 0%(同left top)
- 描述背景位置的方法:
背景的常用属性,也可以在background:中声明,且无顺序,需要注意的是,当用坐标值表示background-position属性时,横坐标要放在前面,紧跟着的是纵坐标
(2)超链接
注意:这里不是设置的属性,它是一种选择器,当然如果你想让这四种都一样,直接设置a标签选择器就可以了
1 | <!DOCTYPE html> |
为了使定义生效,a:hover 必须位于 a:link 和 a:visited 之后,而a:active 必须位于 a:hover 之后
助记符:
通过设置我们能还够实现鼠标悬停时,放大超链接字体的功能,只需要设置a:hover内字体大小即可
4、列表和表格样式
(1)列表
多个值可以直接填入list-style中
属性 | 描述 |
---|---|
list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中。 |
list-style-image | 将图象设置为列表项标志。 |
list-style-position | 设置列表中列表项标志的位置。可设置位于文本片内还是对对齐 |
list-style-type | 设置列表项标志的类型。具体类型 |
list-style-position的值:
值 | 描述 |
---|---|
inside | 列表项目标记放置在文本以内,且环绕文本根据标记对齐。 |
outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。 |
inherit | 规定应该从父元素继承 list-style-position 属性的值。 |
list-style-type的部分值:
值 | 描述 |
---|---|
none | 无标记。 |
disc | 默认。标记是实心圆。 |
circle | 标记是空心圆。 |
square | 标记是实心方块。 |
decimal | 标记是数字。 |
decimal-leading-zero | 0开头的数字标记。(01, 02, 03, 等。) |
lower-roman | 小写罗马数字(i, ii, iii, iv, v, 等。) |
(2)表格
调整表格大小和边框粗细颜色
调整表格边框和数据边框融合
二、CSS布局和定位
1、盒子模型
CSS中,HTML文档中的每个元素都会生成一个或多个矩形框,这称为元素框。各元素框中心有一个内容区,这个内容区周围有可选的内边距、边框和外边距
一个盒子可以视为内容和边框+内容和边框之间的内边距+边框之外的外边距组成。外边距用来分隔盒子与盒子
一个盒子的实际宽度、高度:content+padding+border+margin
- 内容的大小:width、height
- 内边距的大小:padding、padding-top、padding-bottom、padding-left、padding-right
- 边框:border,border-top、border-bottom、border-left、border-right
- 外边距:margin、margin-top、margin-bottom、margin-left、margin-right
①border属性
- border-width:px、 thin、medium、thick(常用单位为px,不同浏览器会对thick表示的粗等类似表示解释不同)
- border-style:dashed(虚线)、dotted(点组成的线)、solid(实线)、double(两个实线)
- border-color:颜色
- border:width style color(可使用width直接安装顺序设置)
- border属性适用于border-top等类似的子属性
②overflow属性
当内容溢出盒子框时,overflow属性取值决定内容的处置
visible(默认值):内容会呈现在元素框之外
hidden:超出部分不可见
scroll:显示滚动条
auto:如果有超出部分,显示滚动条
③padding属性和margin属性
浏览器中padding属性和margin属性具有默认值,我们自行设置的时候最好先将其清零
取值:px,%(外层盒子的宽度和高度)
可以在padding和margin属性中写四个方向的值,排序分别为上右下左,即顺时针排序。省略情况如下:
这个规律同样适用于border等其他属性
注意事项:margin的合并:垂直方向合并取最大值,水平方向不合并
注意事项:水平居中,将左右的margin值设置为auto
案例:
1 | #newsimglist{ |
注意事项:图片的放置就像文字一样,受到text-align,font-size等的控制
2、CSS定位机制
分为文档流定位、浮动定位、层定位,默认为文档流定位
文档流定位:从上到下从左到右,只是有的元素会单独占一行,有些元素在一行中显示
浮动定位:打破文档流定位的排版。float属性设置。
层定位:希望当前网页元素具有层次,上面的层会遮蔽掉下面的层。position属性设置。
3、文档流定位
元素分类:block、inline、inline-block。其他的值不常用可百度display的取值
block:①独占一行、②元素的height、width、margin、padding都可设置所以它从上到下独占一行
常见的block元素:
1
2<div>、<p>、<h1>...<h6>、
<ol>、<ul>、<table>、<form>
inline:①不单独占用一行②width、height不可设置③width就是它包含的文字或图片的宽度,不可改变所以inline从左到右占据一行
常见的inline元素:
1
<span>、<a>
inline-block:①不单独占用一行②元素的height、width、margin、padding都可设置。同时具备inline元素、block元素的特点
常见的padding元素:
1
<img>
display属性可以强制转换某个元素称为block、inline、inline-block,而且若为none则元素不会被显示(默认值:inline)
4、浮动定位
float属性:left—左浮动、right—右浮动、none—不浮动
clear属性:可理解为保证那边没有浮动的元素
- both,清除左右两边的浮动。
- left清除向左的浮动。
- right清除向右的浮动。
- none 是默认值,只在需要移除已指定的清除值时用到。
浮动的使用:例如div元素在不设置浮动的情况下默认为文档流定位,则两个div从上到下排列,而设置了浮动后则会改变文档流原来位置
浮动的几种特点
清除浮动的用法
5、层定位
position属性
- static:默认值。没有定位,元素出现在正常的流中。top, bottom, left, right ,z-index 无效
- fixed 固定定位。相对于浏览器窗口进行定位。top, bottom, left, right ,z-index 有效
- 例如网页中两侧的广告不会随着滚动条改变位置
- relative 相对定位。相对于其直接父元素进行定位。top, bottom, left, right ,z-index 有效
- absolute 绝对定位。相对于 static 定位以外的第一个父元素 进行定位。若找不到任何定位则定位body。top, bottom, left, right ,z-index 有效
注意:
relative相对定位为relative的元素脱离正常的文档流中,但其在文档流中的原位置依然存在
absolute 绝对定位脱离正常文本流,但与relative的区别:其在正常流中的原位置不再存在
left属性
right属性
top属性
bottom属性
z-index属性
- 设置大小值为数字,越大的越在上层。
top, bottom, left, right的值的设置都是根据相应的参照物,以参照物左上角为原点,向→和向↓为正方向的坐标系,可设正负值
6、网页布局
- 液态网页:随着浏览器窗口缩放
- 不要企图控制内容宽度或换行
- 文本允许按需要重新流动
- 通过指定百分比值宽度或不指定,来创建液态布局
- 固定网页:将内容放在一个保持指定元素宽的网页区域内,而不管浏览器的尺寸
- 选择固定布局需要决定的两件事:
- 选择网页宽度:通常基于普通浏览器分辨率,多数都设计为800*600像素
- 决定固定宽度布局将处于浏览器窗口的什么位置
- 如何创建固定布局
- 通过用像素单位指定width属性值来创建固定宽度布局
- 通常,将整个网页内容放到1个div元素中,并设置具体像素值;各栏元素的宽度也用像素值表示
- 选择固定布局需要决定的两件事:
- 弹性网页:当文本缩放时,弹性网页的区域会放大或缩小
- 通过用em单位指定宽度,来创建弹性布局
上述布局需查阅学习