CSS指的是什么

html-css016

CSS指的是什么,第1张

CSS在英文中有如下几种常见的缩写:

1,Cascading Style Sheets 层叠样式表

2,Content Scrambling System DVD电影的加密系统

3,Cast Semi-Steel 半铸钢, 钢性铸铁

4,College Scholarship Service 大学奖学金处

其中在网络上最常见的是Cascading Style Sheets(层叠样式表)

什么是Cascading Style Sheets(层叠样式表)

* CSS是Cascading Style Sheets(层叠样式表)的简称.

* CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).

* 在标准网页设计中CSS负责网页内容(XHTML)的表现.

* CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.

* 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.

* CSS是由W3C的CSS工作组产生和维护的.

Cascading Style Sheets(层叠样式表)的历史

* 1996年W3C正式推出了CSS1.

* 1998年W3C正式推出了CSS2.

* CSS2.1是W3C现在正在推荐使用的.

* CSS3现在还处于开发中.

网页设计中常用的CSS属性

文字或元素的颜色 color

背景颜色 background-color

背景图像 background-image

字体 font-family

文字大小 font-size

列表样式 list

鼠标样式 cursor

边框样式 border

内补白 padding

外边距 margin

等...

css可以用任何写文本的工具进行开发,如文本工具,dreamweaver开发

css也是一种语言,这种语言要和或者x语言相结合才起作用,

css简单来说就是用来美化网页用的,用css语言来控制网页的外观

举个例子

x部分:

<ul>

<li><a href="#">主页</a></li>

<li><a href="#">留言</a></li>

<li><a href="#">论坛</a></li>

</ul>

此时在页面上的表达形式是一个竖向列表,这样不够美观,

可以css来改善这个列表为一个横向导航条和超链接

css部分:

ul{list-style:nonemargin:0pxpadding:0px}

ul li{margin:0pxpadding:0pxfloat:left}

ul li a{display:blockwidth:100pxheight:30pxbackground:#efefefcolor:#333text-decoration:none}

ul li a:hover{background:#333color:#fff}

添加上css后,这个列表变成横向的导航条了,超级链接是淡色背景,灰色字体,没有下划线,高度是30像素,宽度是100像素

当我们鼠标经过这个超级链接时候,变成灰色背景,白色字体

CSS发展史

CSS(Cascading Style Sheets,层叠样式表)是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名,并使用于Web和其他媒介,如XML文档中。1996年12月W3C推出了CSS规范的第一个版本,1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定,到目前为止该标准还没有最终定稿。

CSS1.0

选择器:要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,就需要用到CSS选择器。选择器大致分为派生选择器、ID选择器和类选择器,用来定义希望应用样式的HTML元素或者标签。

样式属性:该属性主要包括Font字体、Text文本、Background背景、Position定位、Dimensions尺寸、Layout布局、Margin外边框、Border边框、Padding内边框、List列表、Table表格和Scrollbar滚动条等,用于定义网页的一些样式变化。

伪类属性:主要定义了针对描述对象a的link、hover、active、visited和针对节点的first-letter、first-child、first-line等几个伪类属性。

保存方式:用户可以直接存储在HTML网页中,也可以将CSS样式代码存储为独立的样式表文件。

CSS2.0

选择器:css2提供了更多强大的选择器,用来定位HTML节点或者标记

符号名称

含义

示例

*

用于匹配任何标记

*{color:red}

>

用于指定父子节点关系

AAA >CCC >DDD >{color:red}匹配父节点分别为CCC和AAA的节点DDD节点

用于匹配在某一层有某个父节点的节点

AAA CCC DDD {color:blue}匹配包含父节点CCC的父节点AAA的节点DDD

+

用于表示在同一个级别节点之间的关系

AAA+BBB{color:red}表示,有一个兄弟节点AAA的节点BBB

名称[表达式]

选择包含特殊属性值的节点

BBB[text="xyz"]{color:blue} 表示包含text属性值为xyz的BBB标签

位置模型:在CSS2中进一步增强了位置属性功能,增加了relative、absolute和fixed等几个值

值名称

含义

relative

元素框相对父节点偏移某个距离,元素仍保持其未定位前的形状,它原本所占的空间仍保留

absolute

元素框从文档流中完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样

fixed

元素框的表现类似于absolute值,不过其包含块是视窗本身

z-index

用来指定相互重叠的元素的叠放顺序,数字较大的元素会叠放在数值较小的元素前面

布局、表格样式:CSS2对display属性进行了扩充,用户可用该属性指定元素是否会显示以及如何显示,也可以使用该属性配合位置和浮动进行页面的布局。另外,用户还可以将一个非表格的结构化文档显示为一个表格样式。

媒体类型:用于对不同的媒体类型定义不同的样式。

属性名称

含义

aural

用于语音和音频合成器

embossed

用于分页的盲人用点字法打印

print

用于打印机

screen

用于计算机显示器

braille

用于盲人用点字法触觉回馈设备

projection

用于方案展示如幻灯片

伪类:CSS2增加了focus(将样式添加到被选中的元素)、:first-child(将特殊的样式添加到元素的第一个子元素)、:lang(允许创作者来定义指定的元素中使用的语言)。

光标样式:增加了cursor属性,用于指定设备应该显示怎样的光标类型。

值名称

含义

default

默认光标(通常是一个箭头)

auto

默认,浏览器设置的光标

crosshair

光标呈现为十字线

pointer

光标呈现为指示链接的指针(一只手)

move

此光标指示某对象可被移动

e-resize

此光标指示矩形框的边缘可被向右移动

text

此光标指示文本

wait

此光标指示程序正忙(通常是一只表或沙漏形状)

help

此光标指示可用的帮助(通常是一个问号或一个气球)

DIV+CSS其实是一种错误的叫法,标准的叫法应该是XHTML+CSS,因为DIV与table都是XHTML或HTML语言中的一个标记,而CSS只是一种样式表现。DIV+CSS已经将内容和表现分割开来,所以修改网页时只需指定内容修改即可。

CSS常用命令规则

名称

含义

名称

含义

header

页头

content/Container

内容

footer

页脚

nav

导航

sidebar

侧栏

column

栏目

wrapper

页面外围控制整体布局宽度

left

左侧

right

右侧

center

中间

loginbar

登录条

logo

标志

banner

广告

main

页面主题

hot

热点

news

新闻

download

下载

subnav

子导航

menu

菜单

submenu

子菜单

search

搜索

friendlink

友情链接

copyright

版权

scroll

滚动

content

内容

tab

标签页

list

文章列表

msg

提示信息

title

栏目标题

joinus

加入

guild

指南

service

服务

register

注册

status

状态

vote

投票

partner

合作伙伴

1. CS/CSS系统架构的基本概念 1.1系统架构定义

虽然B/S结构、J2EE架构愈来愈成为流行模式,但基于传统的C/S结构的应用程序还广泛地应用于各种行业。尤其是金融行业中的商业银行柜面-核心帐务系统等。一方面由于传统商业银行一般都有大量的字符终端等需要复用的设备,一方面也是因为他们存在大量密集的对实时性要求很高的高柜业务,使用传统的基于C/S结构或者C/S/S结构的应用效率更有保证。

C/S结构即CLIENT/SERVER结构。传统的C/S结构一般分为两层:客户端和服务器端。该结构的基本工作原理是,客户程序向数据服务器发送SQL请求,服务器返回数据和结果。客户端负责实现用户接口功能,同时封装了部分应用逻辑。服务器端的数据库服务器主要提供数据存储功能,也通过触发器和存储过程提供部分应用逻辑。

C/S/S结构即客户/应用服务器/数据库服务器三层结构,中间增加了应用服务器,通常实现应用逻辑,是连接客户与数据库服务器的桥梁。它响应用户发来的请求执行某种业务任务,并与数据库服务器打交道,技术实现上通常选用中间件产品,如BEA公司的TUXEDO和IBM公司的CICS等。(事实上J2EE架构的应用也属于这种三层或多层结构,这里不包括。)

三层或多层C/S结构与两层C/S结构相比,它的优势主要表现在:安全性加强、效率提高、易于维护、可伸缩性、可共享性、开放性好等。 1.2系统架构示意图

1.3CS/CSS系统架构中性能测试的特点 1.3.1CS/CSS系统架构的性能影响因素

由于CS/CSS系统的以下特性,测试工程师对一个CS/CSS系统实施性能测试具有很大的难度: *整个系统的各个部分使用多种操作系统,性能上有差别;

*整个系统架构的各个环节上使用多种数据库,同样在性能上有差别;

*应用是多个,分属多个种类,分布在不同设备上,包括自行开发的应用、第三方的应用; *系统中的设备、组件通过不同协议进行连接、通讯;

*系统的内部接口多,性能瓶颈多;而系统的整体性能往往取决于最差的部分;需要分别测试和联合测试

*系统的性能指标不光同应用系统架构有关,还和具体行业应用的业务模式有关; *采用此架构的行业应用往往是一个7×24小时系统;

*采用此架构的行业应用可能高柜业务多,这样会影响对性能度量项的选取和转换; *各个环节基本上以交换数据报文的方式通信,其格式经常会比较复杂。

因此这样的系统对于对测试工程师的知识的深度和广度都是一个考验。对于这样的系统,到底如何使用什么样的测试策略、如何分析测试需求、如何选取性能度量项的转换计算模型、如何确定测试内容和轮次、如何设计性能测试案例等等以及规划和实施性能测试中的其它诸多问题,都需要遵循一个系统的方法来解决。

1.3.2CS/CSS系统架构中性能测试的基本策略 1. 确定好测试工作范围

首先可以分析压力测试中最容易出现瓶颈的地方,从而有目的地调整测试策略或测试环境,使压力测试结果真实地反映出软件的性能。例如,服务器的硬件限制、数据库的访问性能设置等常常会成为制约软件性能的重要因素,但这些因素显然不是用户最关心的,我们在测试之前就要通过一些设置把这些因素的影响调至最低。

另外,用户更关心整个系统中哪个环节的性能情况也会影响工作范围。如有的环节是全新系统,而有的环节已经是成熟系统只是稍有改动,这样可能全新系统的局部性能测试就需要系统和全面一些。 2. 分析好客户的性能测试需求

客户是已经明确提出了性能指标,还是只提供了用户使用方式和历史交易流量数据,需要我们自己进行性能基准的计算?性能测试的目的是验证系统性能还是想确定目标系统的理想配置?是否还要使用测试结果预测在不同机型的处理能力?是否要求在性能测试各个轮次中安排性能调优过程等等问题都需要有针对性的解答。

3. 要作好性能测试的计划和方案

测试计划和方案中要注意测试需求分析阶段提出的问题的解决。 4. 确定的测试通过准则、性能测试的计划、结果要获得客户的认可

要和客户确认,系统的性能指标达标的标准是什么;对于性能测试中各个部分和步骤的计划和结果,甚至是性能测试过程,都要根据其重要程度,决定是否需要客户进行确认和签字。获得客户的认可是最重要的。

1.3.3CS/CSS系统中性能测量与性能探测 性能测量

1. 在性能测试开始前必须认真规划性能测量:

软件性能测量技术范围很广。可以包括日志、事件计数、事件持续时间、采样等性能测量技术。 *确定性能测量的策略:我们要测试什么? *规划性能测试中使用什么样的测量工具。