CSS表现形式

最新推荐文章于 2024-09-14 22:08:32 发布

iteye_20996

最新推荐文章于 2024-09-14 22:08:32 发布

阅读量144

点赞数

分类专栏： 1网页(客户端) 文章标签： CSS 浏览器嵌入式 XHTML

本文链接：https://blog.csdn.net/iteye_20996/article/details/81860515

版权

1网页(客户端) 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

CSS插入XHTML方式：

外部样式表-独立的一个文件（myStyles.css）

内联样式表

嵌入式样式表

<head><style type="text/css">@import url(myStylses.css);<style></head>

——在嵌入表中引入外部表

link

@import——当你的网页须要引入多个外部CSS文件时.你可以运用 link引入一个CSS,然后在这个CSS文件中用@import形式引入其它多个 CSS文件

样式继承

不可继承——margin、padding、border、background

可被继承——

计算值继承——front-size

样式层叠

优先级：

浏览器默认<用户自定义(normal)<网页设计师编写(normal)<网页设计师编写(import)<用户自定义(import)

排放次序判断

找出选择器对特定元素的所有声明
根据样式声明重要性(!import)和来源进行优先级排序——浏览器默认<用户自定义(normal)<网页设计师编写(normal)<网页设计师编写(import)<用户自定义(import)
特殊性排序-制定更详细的选择器将覆盖更一般的选择器。特殊性：a(内联)>b（id选择器数量）>c（属性（类、伪类）选择器数量）>d（元素（元素、伪元素）选择器数量）
CSS规则在文档中出现顺序——后出现的>先出现的>@import(样式表本身规则前出现)

z-index

z-index在设置了position=absolute/relative时有效

值较高的覆盖较低的

z-index=-1时元素在默认文本下

middle{position:absolute;left:60px;top:60px;z-index:2;background-color:orange;}

</style>

效果控制：

制定裁剪区域（clip）

img{position:absolute;clip:rect(50px 200px auto auto);}

</style>

设置元素可见性

display——none、block（块级）、inline（内嵌级）

visibility——visible（可见）、hidden（影藏）、inherit（继承；默认值）

两者的区别在于visibility属性定义的元素任然保留原来的显示空间

CSS控制的区域：

单位

长度单位	绝对长度——用于打印输出设备
		mm
		in
		pt	点
		pc	picas
	相对长度——浏览器的系统默认值	em	ems 当前字体中M字母宽度
		px	像素
		ex	exes当前字体中X字母高度
颜色单位	百分比		rgb
	整数值		rgb
	十六进制		#fc0eab;#c96==`#cc9966`
	颜色名		aqua（水绿/`black`（黑/`blue`（蓝/ `fuchsia`（紫红/ `gray`（灰/ `green`（绿/`lime`（浅绿/ `maroon`（褐/`navy`（深蓝/ `olive`（橄榄/`purple`（紫/`red`（红/`silver`（银/`teal`（深青/`white`（白/`yellow`（黄/`transparent(透明`
URL单位

字体

font-style（倾斜程度）normal、italic=oblique

font-variant（字体变形）normal、small-caps

font-weight（粗细）100、200、300、400=normal、500、600、700=bold、800、900、lighter、bolder

font-size（大小）xx-small、x-small、small、medium、large、x-large、xx-large

font-family（字体名）times new Roman、Arial、Verdana

元素内容文本属性

text-indent(首行缩进)

text-algn（对齐方式）left、right、center

vertical-align

text-decoration（文本装饰）none、underline、overline、line-through、blink

text-shadow（文本阴影）none、color值

line-height（行高）normal、auto

word-spacing（词间距）——空格为词的分割线

letter-spacing（字间距）

text-transform（大小写形式）capitalize（词首大写——空格为分隔符）、uppercase、lowercase、none

white-space normal pre nowrap(不换行)

背景和颜色

color 16进制、rgb()、颜色名字

background

#idDiv{bachground:red url(rdl_cup.jpg) no-repeat scroll right bottom}

background-color transparent

background-image

background-repeat repeat no-repeat repeat-x repeat-y

background-position {1,2} top/center/buttom||left/center/right

background-attachment scroll fixed

定位

在正常流中，文本元素按从上到下、从左到右的格式布局。——块级元素从上到下，内嵌元素从左到右。

正常流中的元素影响其相邻元素的位置

容器快

初始化容器快——根元素（html）
块级元素、表格单元的内容区——静态或相对定位的费根元素
不是静态定位（relative、absolute、fixed）的祖先元素——绝对定位的非根元素——祖先元素为块级元素：容器块扩充到该元素的padding边缘；祖先元素是内嵌元素的容器快为内容区；无祖先元素的为初始化块

定位（position top、right、bottom、left）

静态定位(static)——系统默认，按照它们在HTML的出现顺序生成。
相对定位(relative)——相对于他在正常情况下的默认位置。去而留其位(不影响文本流中接下来的其它层的位置)，可能覆盖其它元素
<style type="text/css">
div{position:relative;height:80pc;width:80px;}
.style1{left:30px;top:30px;border:1px solid black;margin-bottom:10px;background-color:#acd373;}</style>
绝对定位(absolute)——孤立（脱离流）、空间被释放、相对其容器块定位
<style type="text/css">
.style{position:absolute;top:10px;left:10px;}</style>
溢出（overflow）
visible——默认值；不裁剪、无滚动、强制显示全部内容
hidden——裁剪多余内容、
scroll——裁剪多余内容、有滚动
auto