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标签选择器就可以了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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-zero0开头的数字标记。(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
2
3
4
5
6
7
8
9
10
11
#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单位指定宽度,来创建弹性布局

上述布局需查阅学习

-----------------------本文结束 感谢阅读-----------------------
坚持原创技术分享,您的支持将鼓励我继续创作!恰饭^.^~
  • 本文作者: 峻源
  • 本文链接: http://lyxf.live/posts/0/
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!