CSS概念

CSS,层叠样式表,也叫做风格样式表。通过CSS我们可以为页面添加一个美丽的外观,获得更加良好的用户体验。不过值得我们注意的是和HTML一样,CSS也不是编程语言,它只是提供一种配置文件,当浏览器在解析文件的时候,看到对应的配置内容会按照特定的规则来渲染页面。

CSS和HTML在学习中并不是很困难,在掌握一些基础的内容后就可以完成简单的页面设计工作了,但是关于CSS、HTML在编码中有很多需要我们注意的细节,需要我们不断的练习和学习才可以掌握它们。

CSS优势

最初网页兴起的时候,各大浏览器厂商为了拓展市场的占用率,在各自的浏览器中添加了很多标签来实现一些绚丽的效果,但是这些效果无法得到多数浏览器的支持,这就导致同样的页面在不同的浏览器中并不能得到同样的展示,针对这种情况专门成立了W3C组织制定相关的规范,而且结构和样式分离的思想得到多数人的支持,正因为如此现在开发中我们让HTML定义网页的结构,使用CSS来添加网页的样式。那么使用CSS有哪些优势呢?大概可以给我们带来这些好处:

实现了样式和结构分离的思想,将样式代码从HTML分离出来,方便后期的维护;

使用统一的CSS样式使得网站可以给用户呈现统一的风格;

减少了网页的代码量,节省了不必要的带宽消耗,增加了网页响应的速度;

样式和结构的分离,使得网页更容易被搜索引擎检索到;

CSS使用

在HTML中有三种方式,即行内样式、内部样式、外部样式,下边我们来总结下它们相关的具体内容:

行内样式

<p style="color: red;">道可道,非常道,名可名,非常名。无名天地之始,有名万物之母。故常无欲以观其妙,常有欲以观其徼。此两者同出而异名,同谓之玄,玄之又玄,众妙之门。</p>

如上就是行内样式的实现,通过标签的style属性实现的,这种方式虽然简单,但是这个样式只能被当前标签使用,没有办法实现样式的重复利用,另外使用这种方式会让我们的页面变得特别的复杂,代码很多,对于后期的维护非常的不利。

内部样式

<style type="text/css">
.inside_style{
color: green;
}
</style>

所谓内部样式就是在<head>标签下的如上内容,这种方式定义的样式不再只是针对当前页面的某个标签而言了,但是样式依然能被当前页面使用,所以这种方式对于我们的维护和代码的重复利用依然不利。

外部样式

<link rel="stylesheet" type="text/css" href="./style.css"/>

如上是引入外部样式最常用的方式,也是开发人员在开发中应该使用的方式,这种方式不仅实现了样式和结构分离的思想,而且对于我们的后期维护、搜索引擎的检索有着特别重要的意义。

5. 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. windows 打印刻录 代码规范及问题

    1.获取CString字节数 int z_Len = WideCharToMultiByte(CP_ACP, 0, z_FileXml.GetBuffer(), z_FileXml.GetLength ...

  2. 微软宣布在Azure上支持更多的开放技术和选择

    微软和我都热爱Linux,并且就在情人节过去几天之后,我非常高兴能用几个激动人心的消息来表达这种对Linux的热爱,您将会看到在Azure上的云部署将具有更加开放的选择性和灵活性. 这些激动人心的消息 ...

  3. 记账本app(一)

    计划开发一款小程序应用,主要来记录自己的财务账目. 通过使用SpringBoot开发后端应用,提供接口,对应前端使用微信小程序来实现. 功能模块(用户信息,账本.账目列表,新增一笔账,修改一笔账,删除 ...

  4. 加密算法IV的作用

    使用随机数产生的初始化向量才能达到语义安全(散列函数与消息验证码也有相同要求),并让攻击者难以对同一把密钥的密文进行破解 初始化向量的值依密码算法而不同.最基本的要求是“唯一性”,也就是说同一把密钥不 ...

  5. centos7下搭建sphinx全文检索引擎

    Sphinx是一个基于SQL的全文检索引擎,可以结合MySQL,PostgreSQL做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用 程序更容易实现专业化的全文检索.Sphinx特别为一些 ...

  6. 文本处理三剑客之 Sed ——一般编辑命令

    sed简介 sed (stream editor for filtering and transforming text) 是Linux上的文本处理三剑客之一,另外两个是grep和awk. sed又称 ...

  7. ABAP SICF服务和Java Servlet的比较

    In my opinion ABAP ICF handler and Java Servlet play the same role in enhancement which enables your ...

  8. 小知识积累-C++使用tinyxml解析Xml内存泄漏问题

    项目中需要用到C++解析XML,网上搜到tinyxml这么个开源库,就用了下试试,创建对象后内部自带Clear方法,但在循环测试的时候(刚用C++做项目不久,不会什么特别的内存泄漏测试工具,于是就写个 ...

  9. 可枚举接口的知识点(IEnumerable 接口)要使用foreach,就必须实现可枚举接口

  10. 显示mac电脑中隐藏的文件和文件夹

    显示mac电脑中隐藏的文件和文件夹的办法:打开电脑,cd到相应的文件夹,输入以下命令,为显示隐藏的文件和文件夹 defaults write com.apple.finder AppleShowAll ...