Web系统设计【三】

一、（续）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中声明，但是要遵循一定的顺序，字体大小和字体类型顺序不能改，前面的其他属性可以任意

更多文本属性:https://www.w3school.com.cn/css/css_text.asp

3、背景与超链接

（1）背景

对于背景来说，需要先定义空元素的高度和宽度，否则无法定义背景

例如：

背景常用的三个属性：颜色、图片、填充方式。若颜色和图片均声明，则被图片覆盖，图片无法显示则显示颜色。背景色不继承，是由于默认设置为透明所以才显得是背景色一致

填充方式分别为，原大小均匀铺满背景、横向填充、纵向填充、不重复填充只用一张但是拉伸图片作为背景

补充：

背景附加方式：background-attachment该属性允许当其他内容滚动时背景固定在一个位置
- 属性值：scroll | fixed
- 默认值：scroll
背景位置：background-position。属性指定背景中原图的位置，可以将原图想像成背景中放置的第一个图，从原图开始延伸拼图
- 属性值：长度计量值|百分比值| left | center | right | top | bottom
- 默认值：0% 0%（同left top）
- 描述背景位置的方法：

背景的常用属性，也可以在background：中声明，且无顺序，需要注意的是，当用坐标值表示background-position属性时，横坐标要放在前面，紧跟着的是纵坐标

(2)超链接

注意：这里不是设置的属性，它是一种选择器,当然如果你想让这四种都一样，直接设置a标签选择器就可以了

<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;}    /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}  /* 正在被点击的链接 */
</style>
</head>

<body>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！</p>
<p><b>注释：</b>为了使定义生效，a:active 必须位于 a:hover 之后！！</p>
</body>
</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

案例：

#newsimglist{
text-align:center;
font-size:0; /*否则图间有空隙*/
}
#newsimglist img{
height:100px;
width:100px;
margin-left:5px;
border:1px solid #0cf;
padding:5px;
}

注意事项:图片的放置就像文字一样，受到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单位指定宽度，来创建弹性布局

上述布局需查阅学习