热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

初学者应该先来了解的CSS网页知识_css

CascadingStyleSheets(简称css),翻译为层叠样式单或级联样式单,又简称样式表。CSS的引入是用来扩展html的,而不是用来替代HTML的。也就是说

Cascading Style Sheets(简称css),翻译为“层叠样式单”或“级联样式单”,又简称“样式表”。

CSS的引入是用来扩展html的,而不是用来替代HTML的。也就是说CSS离不开HTML,它只是一项辅助工具,是对HTML功能的一种补充。

CSS的优势

在CSS标准里,不仅重新定义了HTML原有的样式,如文字的大小、颜色等;更加入了重叠文字、区块变化及任意位置放置等多项新属性。通过CSS可以使用更丰富、更灵活的样式,更简单地设计出更美观的网页。同时,也让网页的设计与维护更有效率。

减少图像文件的使用:很多网页为求设计效果,而大量使用图像,以致网页的下载速度变慢。CSS提供了很多文字样式的设定,且再加上IE内建的滤镜特效,因此可轻松取代原来图像才能表现的视觉效果。这样的设计方式让修改网页内容变得更方便,也大大提高了下载速度;

集中管理样式信息:CSS的基本概念在于可将网页要展示的内容与其表现的样式设定分开,也就是将网页的外观设定信息从网页的内容中独立出来,并集中管理。这样,当要改变网页外观时,只需更改样式设定的部分,HTML文件本身并不需要任何的更改;

共享样式设定:网页的样式设定和内容分离的好处,除了可集中管理外,如果进一步将CSS样式的信息存储成独立的文件,还可让多个网页文件共同使用它。这样,可省却在每一个网页文件中都要重复设定样式的麻烦;

将样式分类使用:相对于多份HTML文件可套用同一个CSS样式文件,也可以在一份HTML网页文件上套用多个CSS样式文件。

CSS的规则

CSS的样式规则由两部分组成:选择器和声明。

选择器就是样式的名称,包括自定义的类,HTML标签和CSS选择器样式。比如“.mycss”为自定义的类,“td”为标准HTML标签,而“a:link”则是CSS选择器样式;

声明则是用于定义样式元素的。声明由分两部分:属性(如font-size)和值(如12px)。对于一个选择器而言,可以有多个声明。比如一个声明是表示颜色,一个声明是表示大小等。

以下为CSS样式的代码片段:

td {
    font-size: 12px;
    color: #666666;
}
.cnbruce {
    background-color: #000033;
}

其中“td”和“.cnbruce”都属于选择器,“font-size”、“color”以及“background-color”都属于声明中的属性,而“12px”、“#666666”及“#000033”即为属性对应的值。每个选择器的声明都采用{…}包含。

CSS的形式

从CSS代码的标签形式来看,分如下3种CSS样式:

1,自定义CSS样式,又称类样式。可应用于任何标签,名称必须带有句点“.”,比如“.cnbruce”;

2,HTML标签样式。虽说自定义CSS样式可应用任何标签,但对于HTML固有的标签,每次都要选用自定义的样式就显得比较麻烦。所以HTML标签样式的出现就是为了扩展HTML标签的;

3,CSS选择器样式。此为高级选项,可用来定义标签的组合,比如“a”表示对超级链接样式的选择,“td”表示对单元格样式的选择,而如果对单元格中超级链接样式的选择则使用“td a”。

a {
    color: #3366CC;
}
td a{
    color: #FF0000;
}

如上代码的定义,对于普通插入的超级链接的颜色,和在单元格中使用的超级链接的颜色,将进行不同的显示。

CSS的应用范围

CSS无处不在,它可以分为以下两种。

外部CSS样式表:以扩展名为.css的文件而存在,文件中内容即是所有样式的选择和声明。该文件可做为共享文件,让多个文档共同引用并应用,达到站点文件样式的一致性。同时,如果修改该样式表文件,所有引用的文档都将改变其样式,达到网站迅速改版的目的。

内部CSS样式表:只存在于当前文档中,并只针对当前页进行样式应用的方法。一般存在于文档head部分的style标签内。

外部CSS样式表和内部CSS样式表可同时作用于一个页面,但当两种样式表出现对同一选择对象进行样式修饰时,浏览器将按照如下规则来应用样式效果:

若两者所声明的属性不相冲突,则显示为该两种样式的全部属性;
若两者所声明的属性直接相冲突,则采用内部样式表的样式。
所谓“求同存异,内部优先”。

欢迎大家阅读《初学者应该先来了解的CSS网页知识_css》,跪求各位点评,若觉得好的话请收藏本文,by



推荐阅读
  • andr ... [详细]
  • 如何高效创建和使用字体图标
    在Web和移动开发中,为什么选择字体图标?主要原因是其卓越的性能,可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程,并提供了专业建议。 ... [详细]
  • 本文介绍如何使用阿里云的fastjson库解析包含时间戳、IP地址和参数等信息的JSON格式文本,并进行数据处理和保存。 ... [详细]
  • 高效解决应用崩溃问题!友盟新版错误分析工具全面升级
    友盟推出的最新版错误分析工具,专为移动开发者设计,提供强大的Crash收集与分析功能。该工具能够实时监控App运行状态,快速发现并修复错误,显著提升应用的稳定性和用户体验。 ... [详细]
  • Hadoop入门与核心组件详解
    本文详细介绍了Hadoop的基础知识及其核心组件,包括HDFS、MapReduce和YARN。通过本文,读者可以全面了解Hadoop的生态系统及应用场景。 ... [详细]
  • PHP 5.5.0rc1 发布:深入解析 Zend OPcache
    2013年5月9日,PHP官方发布了PHP 5.5.0rc1和PHP 5.4.15正式版,这两个版本均支持64位环境。本文将详细介绍Zend OPcache的功能及其在Windows环境下的配置与测试。 ... [详细]
  • 本文介绍如何使用Python进行文本处理,包括分词和生成词云图。通过整合多个文本文件、去除停用词并生成词云图,展示文本数据的可视化分析方法。 ... [详细]
  • 本文介绍如何在Linux服务器之间使用SCP命令进行文件传输。SCP(Secure Copy Protocol)是一种基于SSH的安全文件传输协议,支持从远程机器复制文件到本地服务器或反之。示例包括从192.168.45.147复制tomcat目录到本地/home路径。 ... [详细]
  • 深入探讨CPU虚拟化与KVM内存管理
    本文详细介绍了现代服务器架构中的CPU虚拟化技术,包括SMP、NUMA和MPP三种多处理器结构,并深入探讨了KVM的内存虚拟化机制。通过对比不同架构的特点和应用场景,帮助读者理解如何选择最适合的架构以优化性能。 ... [详细]
  • 优化局域网SSH连接延迟问题的解决方案
    本文介绍了解决局域网内SSH连接到服务器时出现长时间等待问题的方法。通过调整配置和优化网络设置,可以显著缩短SSH连接的时间。 ... [详细]
  • 深入理解Shell脚本编程
    本文详细介绍了Shell脚本编程的基础概念、语法结构及其在操作系统中的应用。通过具体的示例代码,帮助读者掌握如何编写和执行Shell脚本。 ... [详细]
  • 深入理解Java泛型:JDK 5的新特性
    本文详细介绍了Java泛型的概念及其在JDK 5中的应用,通过具体代码示例解释了泛型的引入、作用和优势。同时,探讨了泛型类、泛型方法和泛型接口的实现,并深入讲解了通配符的使用。 ... [详细]
  • 本文介绍了如何利用npm脚本和concurrently工具,实现本地开发环境中多个监听服务的同时启动,包括HTTP服务、自动刷新、Sass和ES6支持。 ... [详细]
  • 本文介绍如何在现有网络中部署基于Linux系统的透明防火墙(网桥模式),以实现灵活的时间段控制、流量限制等功能。通过详细的步骤和配置说明,确保内部网络的安全性和稳定性。 ... [详细]
  • 本文详细介绍了如何在 Windows 环境下使用 node-gyp 工具进行 Node.js 本地扩展的编译和配置,涵盖从环境搭建到代码实现的全过程。 ... [详细]
author-avatar
开开2502936987
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有