编程教育资源分享平台

网站首页 > 技术文章 正文

计算机二级Web(4):CSS基础 (下)

luoriw 2024-01-17 11:26:04 技术文章 30 ℃ 0 评论

4.CSS的属性单位

CSS允许以各种不同的格式指定尺寸和颜色,主要有以下三种:

(1)长度单位

cm(厘米) em(M字母的宽度) ex(X字母的宽度) in(英寸) mm(毫米) pc(皮卡,1pc=12pt) pt(点,1点为1/72英寸),px(像素)

其中pc,pt,mm,cm,in属于绝对长度单位。

(2)百分比单位

百分比用于指定尺寸的比例。百分比总是相对于另一个值而言的,可以使用“-”号。

(3)颜色单位

5.CSS的常用属性

(1)字体属性

i:属性设定字体名称,如:宋体,黑体等

H2 {font-family:Arial}

ii.字体大小属性

p {font-size:16pt}

iii.字体风格属性

H2 {font-style :italic}设置为斜体

IV.子重属性

p {font-weigth:bold}设置为粗体

V.字体颜色

字体颜色用CSS的color属性来表示

VI.文字修饰

  • text-decoration:underline;。下划线
  • text-decoration:overline;上画线
  • text-decoration:line-through;删除线
  • text-decoration:blink;闪烁。

(2)背景属性

i.背景颜色属性:相当于HTML中的bgcolor属性

body {background-color:#99FF00}

ii.背景图片属性:相当于HTML中的background属性

body {background-image:url(test.jpg)}

iii.背景重复属性

  • repeat-x。背景图片横向重复
  • repeat-y。背景图片竖向重复
  • no-repeat。背景图片不重复
  • body {background-image:url(test.jpg); background-repeat:repeat-x}

iv.背景附着属性:决定是否跟随内容滚动,缺省为scroll

v.背景位置属性

(3)CSS边框(border)属性

i.边框风格属性border-style,用来设定上下左右边框的样式:

ii.边框宽度属性border-width,用来设定边框的宽度

iii.边框颜色属性border-color

.dd {border-color:gray}

iv.单边边框属性。

如设定上边框属性,可以使用:border-top,border-top-width,border-top-style

(4)CSS边距(margin)属性

边距属性用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。

i.左边距属性margin-left

.m1 {margin-left:1cm}

ii.右边距属性(margin-right)

iii.上边距属性(margin-top)

iv.下边距属性(margin-bottom)

v.边距属性:可以分别设置属性,顺序是上右下左,按顺时针方向设置边距。

.m6 {margin :1cm 2cm 3cm 4cm}

(5)CSS间隙(padding)属性

间隙属性是用来设置元素内容到元素边界的距离。

1.左间隙属性

2.右间隙属性

3.上间隙属性

4.下间隙属性

(6)CSS列表样式属性

i.列表样式类型属性list-style-type

这个属性用来设定列表项标记请图标的样式

ii.列表样式位置属性list-style-position

  • outside表示以列表项内容为准对齐
  • inside 表示以列表项标记为准对齐

iii.列表样式图片属性list-style-image

ul {list-style-image:url("test.gif")}

(7)CSS锚伪类

  • a:link {color:#FF0000}表示未被访问的链接设置为红色
  • a:visited {color:#FF0000} 表示已被访问的链接….
  • a:hover………………. 表示鼠标悬浮在上的链接设置为。。
  • a:active………………. 表示鼠标点中激活链接。。。

6.CSS布局

(1)css盒模型

(2)布局基础

i.创建div对象

ii.定位属性(position)

iii.浮动属性(float)取值可为:none,left,right,top,bottom

(3)布局结构

i.单列结构(width height)

ii.二列结构(需要两个div标记和两个css样式)

计算机二级Web(4):CSS基础 (上)

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言