首页 > 教程 > 关键词 > WEB标准最新资讯 > 正文

WEB标准教程第7天:CSS入门

2007-03-22 10:06 · 稿源:w3cn.org

  1.基本语法规范

  分析一个典型CSS的语句:

  p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

  其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;

  样式声明写在一对大括号"{}"中;

  COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;

  "#FF0000"和"#FFFFFF"是属性的值(value)。

  2.颜色值
  
  颜色值可以用RGB值写,例如:color : rgb(255,0,0),也可以用十六进制写,就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。

  3.定义字体

  web标准推荐如下字体定义方法:

  body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

  字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;

  Lucida Grande字体适合Mac OS X;

  Verdana字体适合所有的Windows系统;

  Lucida适合UNIX用户

  "宋体"适合中文简体用户;

  如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;

  4.群选择器

  当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,: p, td, li { font-size : 12px ; }

  5.派生选择器

  可以使用派生选择器给一个元素里的子元素定义样式,例如这样:

  li strong { font-style : italic; font-weight : normal;}

  就是给li下面的子元素strong定义一个斜体不加粗的样式。

  6.id选择器

  用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层

  <div id="menubar"></div>

  然后在样式表里这样定义:

  #menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
  
  其中"menubar"是你自己定义的id名称。注意在前面加"#"号。

  id选择器也同样支持派生,例如:

  #menubar p { text-align : right; margin-top : 10px; }

  这个方法主要用来定义层和那些比较复杂,有多个派生的元素。

  6.类别选择器

  在CSS里用一个点开头表示类别选择器定义,例如:

  .14px {color : #f60 ;font-size:14px ;}
 
  在页面中,用class="类别名"的方法调用:

  <span class="14px">14px大小的字体</span>

  这个方法比较简单灵活,可以随时根据页面需要新建和删除。

  7.定义链接的样式

  CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:

  a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}

  a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}

  a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}

  a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
 
  以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

  呵呵,看了这么多,有点头晕吧,实际上CSS的语法规范还有很多,这里列的只是一些常用的,毕竟我们是循序渐进,不可能一口吃成胖子:)

  • 相关推荐
  • 大家在看
  • 多地提高节日福利发放标准 今年中秋国庆福利发放标准多少

    【多地提高节日福利发放标准】逢年过节向职工发放福利,能让一家公司更有归属感、获得感和温暖感。而这一举措近期也有了越来越明确的标准。据央广网消息,日前,上海市总工会发文明确, 2020 年度一次性增加工会经费向全体会员发放节日慰问品额度,标准不超过 500 元/人。消息刚一发布,网友表示羡慕的同时也纷纷发问,“我所在城市的慰问标准是否有所提高”?

  • 人行开展“金融标准 为民利企”主题活动 平安付举办宣讲培训会促标准实施

    为进一步发挥金融标准在促进金融业健康有序发展中的作用,中国人民银行组织开展 2020 年“金融标准 为民利企”主题活动,要求金融机构、金融相关企业等共同参与,发挥金融标准助力疫情防控和复工复产等作用。 9 月 23 日,平安壹钱包旗下支付机构平安付科技服务有限公司,举办《个人金融信息保护技术规范》主题宣讲培训会,由信息安全部进行宣讲,以通过培训加强学习,加强金融标准在移动支付产业的实施。 近年来,“个人信息保护

  • 零信任产业标准工作组发起兼容性认证计划,打造行业互联互通标准

    9 月 24 日,零信任产业标准工作组(以下简称工作组)在腾讯北京总部大楼召开研讨会,发起零信任产品兼容性认证计划,呼吁加强零信任产品间的技术兼容和互联互通,以解决不同厂商间产品互操性差、复用率低等问题,助力产业标准化、规范化发展。天融信、绿盟科技、蔷薇灵动、中国移动设计院、国家互联网应急中心、中孚信息、完美世界、亚数信息、芯盾时代、联软科技、数蓬科技、上海观安、公安三所、腾讯等 14 家单位参与发起该计划

  • 《天猫景德镇日用陶瓷企业标准》发布

    10月18日,《天猫景德镇日用陶瓷企业标准》发布会暨“国瓷馆·天猫直播基地”揭牌活动,在景德镇陶瓷集团举行。

  • 零信任产业标准工作组研讨会成功召开

    9 月 24 日上午,在腾讯北京总部大楼召开了“零信任产业标准工作组”(以下称“工作组”)研讨会,这是自工作组成立以来,第一次线下技术研讨活动。来自天融信、绿盟科技、蔷薇灵动、中国移动设计院、国家互联网应急中心、中孚信息、完美世界、亚数信息、芯盾时代、联软科技、数蓬科技、上海观安、公安三所、腾讯等 14 家单位的 20 余位专家现场参会,同时还有多名专家线上接入。会上,绿盟科技刘弘利、蔷薇灵动李春鹏、腾讯蔡东赟

  • 抖音单条视频定位标准 抖音怎么让单条视频变火

    抖音上每隔一段时间就会出现单条视频百万、千万级别的播放量,成为全网爆款,这些视频是如何创造出来,这就要从单条视频的定位标准比较基础的功课来说起,下面我们来看下单条视频的定位标准。

  • 车顶安全气囊有多重要?摩比斯高标准让人惊叹

    根据近年来对车辆事故的调查追踪,有数据显示 2000 年到 2015 年前后,北美地区总共发生了 13700 左右的翻车事故。而这些翻车事故里有 200 多起案例乘客被从天窗甩出,造成严重伤害。在对试驾车辆进行碰撞试验的过程中,也证明了在有些侧翻的情况下,假人被从天窗甩出去。由于现在的消费者越来越倾向于购买大天窗的汽车,所有这种事故出现的频率会越来越高。针对这种情况,摩比斯在全世界范围内率先研制开发出了车顶安全气囊,并在

  • 抖音内容布局优劣标准 抖音如何做好内容定位

    抖音短视频平台上有很多的领域都比较火爆,但也有比较冷门、不太经常出现爆款的视频领域,在抖音账号内容定位的时候,要怎么选择适合自己的领域呢,有哪些标准可以作为参考选择,以下我们来详细了解下。

  • 方太荣获中国标准创新贡献奖一等奖

    转载自甬派客户端 记者金鹭刚刚,甬派记者获悉,作为《家用和类似用途电器的抗菌、除菌、净化功能通则》等8项标准的主要完成单位,宁波方太厨具有限公司荣获2020年中国标准创新贡献奖标准项目奖一等奖。据了解,中国标准创新贡献奖是我国标准化领域的最高奖项,由国家质检总局和国家标准委于2006年设立。奖项的设立旨在表彰在标准化活动中作出突出贡献的组织和个人,调动标准化工作者的积极性和创造性,促进标准化事业健康发展。今

  • 领衔研发效能创新,腾讯通过国家DevOps标准卓越级评测

    9 月 25 日,在第十四届 GOPS 全球运维大会上,中国信息通信研究院(以下简称信通院)正式宣布,腾讯通过DevOps(研发运营一体化)标准评测,获评唯一卓越级。这意味着,腾讯已经形成了业内领先的研发体系,研发效能工具达到了国家级的领先水平。《研发运营一体化(DevOps)能力成熟度模型》系列标准由中国信通院主导,标准经腾讯、华为、中国移动等头部企业的上百位行业专家反复研究探讨,系统和工具部分经历两年多的孵化打磨,于 2020

  • 替代Word 百度网盘Web端在线文档内测

    在互联网如此深入人心的今天,不少人仍是把稿子写在Word上面,然后用QQ传送文件的方式发送,效率低下。而在线文档可以有效解决这一问题,它拥有轻量化、简单易懂、轻松共享等特性。今天,百

  • 特斯拉Model 3标准续航版+续航里程增至263英里

    据特斯拉中国官网显示,特斯拉Model3 标准续航版+的续航里程从 250 英里增至 263 英里;Model Y长续航版的续航里程从 316 英里增至 326 英里。

  • 杏璞李存玉博士 力推母婴草本护肤市场中药标准化

    众所周知,婴幼儿护肤品的安全性至关重要。近几年,我国化妆品市场发展迅速,尤其是母婴类草本护肤品市场随着人们对护肤安全意识的提高更是得到了前所未有的发展。在产品质量管控上,越来越多的国货母婴品牌从研发、配方、原料采购等均遵循严格流程,凭借高质量逐渐受到国内市场认可,杏璞品牌作为其中的佼佼者,其产品生产研发在以国家基金项目负责人李存玉博士等团队带领下,严格执行高标准化流程。原料配方标准化天然草本护肤品

  • 行人等红灯不能超90秒!北京发布步行自行车交通规划标准

    10月13日,北京市规划和自然资源委员会和北京市市场监管局联合发布了《步行和自行车交通环境规划设计标准》。该标准将于2021年4月1日起开始实施,《标准》中提及了胡同停车、行人过街绿灯时长

  • 成都自如深呼吸房源全面升级,“深呼吸 2.0”标准深化

    近几年,越来越多人选择租房并成为长租客。租赁市场的蓬勃发展让长租公寓平台逐步兴起。以成都自如为首的长租品牌,为了适应市场变化不断探索。去年成都自如推出“深呼吸,放心住”房源,掀起了品质租住的热潮。成都自如从租住环境、租住体验、租住品质入手,对板材、辅料、施工等方面进行了系统性升级,实现使用优于国标?E1?级板材、采用具有国家十环认证辅料、41?道关键施工工序严格把控、完成空气密闭检测等。 成都自如“深呼吸

  • 史上最严新能效标准落地,大金空调凭借节能环保优势赢得竞争

    号称“史上最严”空调新能效标准GB21455-2019《房间空气调节器能效限定值及能效等级》出台,并在 7 月 1 日正式实施。新能效标准的实施,将让国内空调市场迎来大洗牌,目前市场上99%的定速空调型号和70%的变频空调型号将被淘汰。而其他符合节能环保要求的品牌空调则将进一步凸显竞争优势,大金空调就是其中的典型代表。大金空调是新风系统空调的领导品牌,在国人越来越重视室内空气质量的背景下,大金空调通过引入室外新风,同时经

  • 多方向齐发力支持IPFS发展,OKEx引领WEB3.0新时代

    10 月 13 日,OKEx产品页新增存储类项目代币展示区。首批进入OKEx存储类项目展示区的代币分别有BTT、SC、STORJ、LAMB、GNX、CVT等行业知名项目。Filecoin是一个利用区块链技术来实现的去中心化存储系统,而去中心化存储(IPFS)是一种通过分布式存储技术将文件集中分片存储在不同供应方提供的磁盘空间上的存储商业模式。也是一种将数据分散地存储于多台独立的机器设备上,通过纠删码技术实现数据的冗余存储的数据存储技术。它具有隐?

  • “十四五”开局在即,健安物流力推现代农牧物流三大行业标准

    近日,国家发改委经济贸易司发起公众建言献策活动,向社会各界特别是物流从业人员征集“十四五”现代物流高质量发展相关的意见和建议。现代物流业是支撑国民经济发展的重要基础性、战略性、先导性产业。“十三五”期间,国内物流行业规模持续扩大,货运量、快递业务量均实现高速增长,跃居全球前列。随着物联网、云计算和人工智能等新兴技术的应用,物流行业内催生的新业态、新模式层出不穷,社会物流综合成本明显下降。农牧物流作

  • 京东装修联盟升级为家装联盟 聚焦“局装、整装、定制”树立行业新标准

    近两年,随着以85、 90 后为代表的家装主力消费群体不断崛起,品质化、一体化、定制化等家装消费特征日益突出,软装定制市场不断扩大,老房翻新市场激增,局部微装逐渐盛行,既为互联网家装带来巨大机遇,也对家装产品和服务品质提出了更高诉求。迎合市场变化和消费者新需, 9 月 23 日,京东居家再次定义家装服务新标准,聚焦局装、整装、定制三大核心需求,以“一站式省心家装”为目标,集结“基建、定制、装修”三大服务品类正?

  • 汽车超人安检标准化比武大赛,展现员工专业技术

    日前,汽车超人第一届安检标准化比武大赛总决赛在科技大道店拉开了帷幕。此次大赛空前盛大,赛前进行了一个月的海选,10名机修技师哥哥们颠覆平庸,挑战极限,用实力证明自己,最终进入总决赛。让我们一起领略披荆斩棘的哥哥们的精彩表现。汽车后市场进行新零售模式,汽车超人升级改造汽修门店,打造汽服连锁品牌。汽车超人已经充分具备优质服务的供给能力。超人学院不断强化标准化服务,用实力证明汽车超人是圈中数一数二的大平台

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签