CSS是Cascading Style Sheet的缩写。译作”层叠样式表单“。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS样式可以控制许多仅使用HTML无法控制的属性。HTML是一种标记性语言。当在浏览器中打开一个HTML网页时,浏览器将读取该网页中的HTML标签,并根据内置的解析规则将网页元素呈现出来。css(层叠样式表)决定浏览器将如何描述html元素的表现形式。换而言之,CSS就是描述HTML元素的规则。CSS目前最新版本为CSS3,CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

CSS层叠样式表是一系列格式设置的规则,它们控制网页内容的外观。使用CSS设置页面格式时,可以将内容与表现形式分开。网页内容(即HTML代码)驻留在HTML文件自身中,而用于定义代码表现形式的CSS规则驻留在另一个文件(外部样式表)或HTML文档的另一部分(通常为文件头部分)中。使用CSS可以更加灵活地控制具体的页面外观,从精确的布局定位到特定的字体和样式。

CSS允许控制HTML无法独自控制的许多属性。例如,可以为选定的文本指定不同的字体大小和单位(像素、磅值等)。通过CSS可以用像素为单位来设置字体大小,从而可以确保在多个浏览器中以更一致的方式处理页面布局和外观。除设置文本格式外,还可以使用CSS控制网页中块级别元素的格式和定位。例如,可以设置块级别元素的边距和边框,其他文本周围的浮动文本等。

CSS格式设置规则由选择器和声明两部分组成,其中选择器是标识格式元素的术语(如p、h1、类名或id),声明用于定义元素样式。

CSS的主要优点是提供了便利的更新功能。设计网站时,可以创建一个CSS样式表文件,然后将网站中的所有网页都连接到该样式表文件,这样很容易为Web站点内的所有网页提供一致的外观和风格。当更新某一样式属性时,使用该样式的所有网页的格式都会自动更新为新样式,而不必逐页进行修改。

在实际应用中,一般有以下三种级联方式。

1. 外联式
外联式样式表中,CSS 代码作为文件单独存放,如以 style.css 文件包含所有样式。在 HTML 中的外部级联采用 <link> 标记或者 @import 语句来引入。示例代码如下:

<link rel="stylesheet" href="style.css" type="text/css" /> //link 链接
@import url("style.css"); //@import 导入

<link> 和 @import 的异同可参考此文:CSS 外部引用中 link 与 @import 的区别。

2. 内联式
门户网站的 CSS 代码通常采用嵌入式,即通常所说的内联方式 (Inline Style),其使用 <style> 标记将样式定义为内部块对象。示例代码如下:

<style type="text/css">
<!--
body
-->
</style>

内联 CSS 可以有效减少 HTTP 请求,提升页面性能,缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面,因此能防止 CSS 文件无法读取而造成页面裸奔的现象。

3. 嵌入式
最初级的 CSS 写法即把代码直接添加于所修饰的标记元素。示例代码如下:

<div style="font-family:Arial,Helvetica,sans-serif;">芒果</div>

这样做虽然更为直观,但很大程度上加大了页面体积,不符合结构与表现分离的设计思想。

总体而言,外联和内联各有优点,可综合实际情况选择适合的级联方式。

以上内容部分来自网络。如有侵权,请告知后立即删除。

什么是CSS的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. C# 发展史

    C# 发展史 Intro 本文主要总结介绍C# 每个版本带来的不同的语言特性. C#,读作C Sharp,是微软推出的一种基于.NET平台的.面向对象的高级编程语言.是微软公司在2000年发布的一种新 ...

  2. .NET开发设计模式-获取某个接口下面所有的派生类

    using System; using System.Collections.Generic; using System.Linq; using System.Reflection; using Sy ...

  3. Python_heapq

    import heapq #导入heapq堆模块 import random data = random.sample(range(1000),10) print(data) heapq.heapif ...

  4. Spring Boot实战笔记(一)-- Spring简介

    一.Spring 概述 Spring框架是一个轻量级的企业级开发的一站式解决方案.所谓的解决方案就是可以基于Spring解决所有的Java EE开发的所有问题. Spring框架主要提供了Ioc(In ...

  5. redux 中间件 --- applyMiddleware 源码解析 + 中间件的实战

    前传  中间件的由来 redux的操作的过程,用户操作的时候,我们通过dispatch分发一个action,纯函数reducer检测到该操作,并根据action的type属性,进行相应的运算,返回st ...

  6. 设计模式之策略模式(Strategy Pattern)

    模板方法是通过继承实现的,在父类中定义出算法的骨架,将不同点在子类中实现.而策略模式是通过接口实现的,策略中定义了完整的算法.它们有点像啊-- 策略模式的定义 策略模式(Strategy Patter ...

  7. resteasy上传文件写法

    resteasy服务器代码 @Path(value = "file") public class UploadFileService { private final String ...

  8. Tair总述

    Tair 是淘宝自己开发的一个分布式 key/value 存储引擎.tair 分为持久化和非持久化两种使用方式.非持久化的 tair 可以看成是一个分布式缓存.持久化的 tair 将数据存放于磁盘中. ...

  9. 使用Spring Session实现Spring Boot水平扩展

    小编说:本文使用Spring Session实现了Spring Boot水平扩展,每个Spring Boot应用与其他水平扩展的Spring Boot一样,都能处理用户请求.如果宕机,Nginx会将请 ...

  10. spring-security doc logout

    18.5.3 Logging Out Adding CSRF will update the LogoutFilter to only use HTTP POST. This ensures that ...