CSS中基本元件的属性设置

时间:2022-06-24
本文章向大家介绍CSS中基本元件的属性设置,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/gongxifacai_believe/article/details/91355611

1、传统HTML设计网页版面的缺点

使用传统HTML控制标记来设计网页,在先天上就无法与排版样本来做比较,因为HTML并非完全着眼在网页排版的功能上,而这对XHTML而言更是如此,因为XHTML有意将原先HTML中有关网页版面的标记或属性遗弃不用,如<font><center>,color,background,bgcolor等等,所以对XHTML文件而言,其排版与显示的功能比HTML文件更弱,所以使用XHTML来设计网页更需要搭配CSS(Cascading Style Sheets,层叠式样式表)排版样本。

2、CSS的特点

HTML排版时的缺点:设置麻烦,修改麻烦,功能严重不足。 CSS样式排版的优点:排版属性功能完整,排版文件可以独立存在,可以共用排版文件。 CSS样式排版的分类:行内排版样式,内嵌式排版样式和链接式排版样式。

3、CSS的排版样式

(1)行内排版样式 格式:<标记名称 style=”属性 1:属性值1;属性 2:属性值2”>…</标记名称> 例:<p style=”font-size:20pt;color:red;text-align:center”>段落文字</p> 排版专用标记:<div><span> <div></div>是块级元素,<span> </span>是行内元素。 (2)内嵌式排版样式 内嵌式排版中所有的样式定义都必须在<style>...</style>之间,而<style>...</style>又必须在<head>...</head>之间。 内嵌式排版样式可以分为三种:1)标记定义型;2)class 定义型;3)id 定义型。 1)标记定义型格式:

<head>
	<style type=”text/css”>
		标记名称{属性1:属性值1;属性2:属性值2;}
		标记名称{属性1:属性值1;属性2:属性值2;}
	</style>
</head>
<body>
	<标记名称>…</标记名称>
</body>

2)class 定义型格式:

<head>
	<style type=”text/css”> 
		.定义名称{属性1:属性值1;属性2:属性值 2;} 
		.定义名称1,.定义名称 2{属性1:属性值1;属性2:属性值 2;} 
	</style> 
</head> 
<body> 
	<标记名称 class=”定义名称”>…</标记名称> 
</body>

3)id 定义型格式:

<head> 
	<style> 
		#定义名称{属性1:属性值1;属性2:属性值2;} 
		#定义名称 1,#定义名称 2{属性1:属性值1;属性2:属性值 2;} 
	</style> 
</head>
<body> 
	<标记名称 id=”定义名称”>…</标记名称> 
</body>

行内排版样式和内嵌式排版样式的优先级:CSS规定,范围越小,优先级越高。 按照优先级由小到大排列:标记定义型 < class定义型 < id定义型 < 行内排版样式。 (3)外部排版样式 独立的样式排版格式:

标记名称{属性1:属性值 1;属性2:属性值2;} 
.定义名称{属性 1:属性值1;属性 2:属性值 2;}

<head>…</head>之间使用<link>格式:

<head> 
	<link rel=”stylesheet” type=”text/css” href=URL /> 
</head> 

<head>…</head>之间使用import格式:

<head> 
	<style type="text/css"> 
		@import "style.css" 
	</style> 
</head>

4、 CSS 中的长度与颜色

长度单位

说明

in

英寸

cm

厘米

mm

毫米

ex

以小写字母高度为单位(大部分不支持)

pt

磅,1pt=72英寸

pc

派卡,1pc=12pt

px

像素(推荐使用)

颜色名称

十六进制表示

三原色单位

color:red

color:#FF0000

rgb(255,0,0)

color:green

color:#00FF00

rgb(0,255,0)

color:blue

color:#0000FF

rgb(0,0,255)

color:black

color:#000000

rgb(0,0,0)

color:white

color:#FFFFFF

rgb(255,255,255)

color:brown

color:#A52A2A

rgb(165,42,42)

color:chocolate

color:#D2691E

rgb(210,105,30)

color:cyan

color:#00FFFF

rgb(0,255,255)

color:darkblue

color:#00008B

rgb(0,0,139)

color:darkgray

color:#A9A9A9

rgb(169,169,169)

color:darkred

color:#8B0000

rgb(139,0,0)

color:firebrick

color:#B22222

rgb(178,34,34)

color:gold

color:#FFD700

rgb(255,215,0)

color:gray

color:#808080

rgb(128,128,128)

color:lightblue

color:#ADD8E6

rgb(173,216,230)

color:maroon

color:#800000

rgb(128,0,0)

color:olive

color:#808000

rgb(128,128,0)

color:orange

color:#FFA500

rgb(255,165,0)

color:pink

color:#FFC0CB

rgb(255,192,203)

color:purple

color:#800080

rgb(128,0,128)

color:silver

color:#C0C0C0

rgb(192,192,192)

color:skyblue

color:#87CEEB

rgb(135,206,235)

color:snow

color:#FFFAFA

rgb(255,250,250)

color:tomato

color:#FF6347

rgb(255,99,71)

color:wheat

color:#F5DEB3

rgb(245,222,179)

color:yellow

color:#FFFF00

rgb(255,255,0)

5、 CSS 中的文字属性

属性名称

属性值

说明

font-style

normal

正常显示

font-style

italic

斜体

font-variant

normal

正常显示

font-variant

small-caps

将英文大小写字母调为同宽

font-weight

normal

正常显示

font-weight

bold

粗体

font-size

像素

字体大小

font-size

百分比

字体大小

font-family

字体名称

设置字体名称

font属性简化的使用方法:font:是否斜体 是否同宽 是否粗体 大小 字体名称; 例如:font:italic bold 200 隶书;

6、CSS中的文本属性

属性名称

属性值

说明

color

十六进制

颜色

color

英文名称

颜色

color

三原色单位

颜色

letter-spacing

normal

正常显示

letter-spacing

长度

文本间隔

word-spacing

normal

正常显示

word-spacing

数字

单词间距

white-space

normal

文本自动处理换行

white-space

pre

格式化显示文本

white-space

nowrap

强制在同一行显示

text-align

left

文字靠左

text-align

right

文字靠右

text-align

center

文字靠中

text-decoration

none

正常显示

text-decoration

underline

加下划线

text-decoration

overline

加顶线

text-decoration

line-through

加删除线

text-indent

长度

首行缩进

text-indent

百分比

首行缩进

line-height

像素

行高

line-height

数字/百分比

行高

text-transform

none

正常显示,可以包含大小写字符

text-transform

capitalize

字符串第一个字符大写

text-transform

uppercase

转换为大写字符

text-transform

lowercase

转换为小写字符

vertical-align

sub

设置文字为下标

vertical-align

super

设置文字为上标

vertical-align

top

文字向上端靠齐

vertical-align

middle

设置文字是在中线位置

vertical-align

bottom

文字往下端靠齐

7、CSS 中背景的使用

属性名称

属性值

说明

background-attachment

scroll

设置背景图像会随视窗滚动条的移动而移动

background-attachment

fixed

设置背景图像不会随视窗滚动条的移动而移动

background-color

十六进制

background-color:#ff0000;

background-color

英文名称

background-color:red;

background-color

三原色

background-color:rgb(255,0,0);

background-color

transparent

background-color:transparent; 透明

background-image

URL

background-image:url(“bg.jpg”); 背景图片

background-image

none

不设置背景图片

background-position

top left

设置背景图案出现在上左方

background-position

top center

设置背景图案出现在上方中间

background-position

top right

设置背景图案出现在上右方

background-position

center left

设置背景图案出现在中间左方

background-position

center center

设置背景图案出现在中间

background-position

center right

设置背景图案出现中间右方

background-position

bottom left

设置背景图案出现在下左方

background-position

bottom

设置背景图案出现在正下方

background-position

bottom right

设置背景图案出现在下右方

background-repeat

repeat

将背景图案填满整个背景

background-repeat

repeat-x

将背景图案在水平方向添满

background-repeat

repeat-y

将背景图案在垂直方向添满

background-repeat

no-repeat

图案只出现一次

背景图案简化方案: background:颜色 背景图片 repeat attachment position;

8、CSS中列表的使用

属性名称

属性值

说明

list-style-type

none

无符号

list-style-type

disc

实体的小圆点

list-style-type

circle

空心的小圆点

list-style-type

square

实心的小方块

list-style-type

decimal

1,2,3…

list-style-type

lower-roman

i,ii,iii…

list-style-type

upper-roman

I,II,III…

list-style-type

lower-alpha

a,b,c,d,e…

list-style-type

upper-alpha

A,B,C,D,E…

list-style-position

inside

清单项目往右移

list-style-position

outside

清单项目正常显示

list-style-image

URL

list-style-image:url(lmk.gif);

list-style-image

none

不会显示任何图象

清单的简化设置:list-style:circle inside url("bullet.gif");

9、CSS 中边框的使用

属性名称

属性值

说明

border-color

十六进制

可依序设置上,右,下,左线颜色

border-color

英文名称

border-color:red; 四边均为红色

border-color

三原色

border-color:red green; 上下为红色,左右为绿色border-color:red green blue; 上为红色、左右为绿色、下为蓝色border-color:red green blue yellow; 上右下左分别为红绿蓝黄

border-style

none

不显示边线

border-style

dotted

点线

border-style

dashed

虚线

border-style

solid

实线

border-style

double

双线

border-width

宽度

border-width:0.2cm 0.3cm 0.4cm 0.5cm;border-width:1 2 3 4;

简化方案:border:宽度 形态 颜色; 例如:border:1px solid black;

10、 CSS 中边界的使用

(1)padding系列属性

属性名称

属性值

说明

padding-bottom

长度/百分比

元件下端边线的空隙

padding-left

长度/百分比

元件左端边线的空隙

padding-right

长度/百分比

元件右端边线的空隙

padding-top

长度/百分比

元件上端边线的空隙

简化写法: padding:10px; padding:2px 4px; padding:2px 6px 10px; padding:1px 2px 3px 4px; (2)margin系列属性

属性名称

属性值

说明

margin-bottom

auto

自动调整空隙

margin-bottom

长度/百分比

设置下端空隙

margin-left

auto

自动调整空隙

margin-left

长度/百分比

设置左端空隙

margin-right

auto

自动调整空隙

margin-right

长度/百分比

设置右端空隙

margin-top

auto

自动调整空隙

margin-top

长度/百分比

设置上端空隙

简化写法: margin:2px 4px; margin:2px 6px 10px; margin:1px 2px 3px 4px; 常用网页顶格设置:margin:0;