• 1,什么是CSS?

层叠样式表(Cascading Style Sheet ),定义了如何显示HTML元素,用来控制网页的样式和布局。

引入CSS后:HTML标记专门用于定义网页的内容,而使用CSS来设置其显示效果。

CSS2.0是目前广泛使用的级联样式单规范。CSS2.0提供了一种机制,就是说让程序员开发的时候不考虑显示和页面,显示的问题有美工后期来解决。实际开发中一般都是先由美工写好页面,也就是静态的html,然后拿给程序员来用就OK。



下面是2个html,第1个没有使用css,第2个使用了css。

<html>
<head>
<title>Hello!</title>
</head>
<body>
<h2>通过样式表来改变网页外表</h2>
<p id="p1">欢迎来到CSS世界</p>
<div>css给我们带来丰富多彩的世界</div>
<br>
<div>人生本就充满了矛盾,任何人都无可奈何!</div>
</body>
</html>
<html>
<head>
<title>测试: 内部样式表</title>
<style type="text/css">
h2 {
color: red;
font-size: 46px;
font-family: 宋体;
} #p1 {
font-size: 30px;
background: blue;
font-family: 黑体;
}
.cs {
font-size: 20px;
background: green;
font-family: 黑体;
}
</style>
</head>
<body>
<h2>通过样式表来改变网页外表</h2>
<p id="p1">欢迎来到CSS世界</p>
<div class="cs">css给我们带来丰富多彩的世界</div>
<br>
<div class="cs">人生本就充满了矛盾,任何人都无可奈何!</div>
</body>
</html>

  • 2,为什么要用CSS?

CSS的作用:表达效果丰富,文档体积小,便于信息检索,可读性好。

CSS的精髓:将页面内容和显示样式分离。

第一,简化网页的代码,提高访问速度。外部的CSS文件会被浏览器保存在缓存里,加快下载显示的速度,减少了需要上传的代码数量。

第二,便于维护。便于修改网站样式:只要修改css文件,就可改变整个网站的风格特色。避免一个个网页的修改,大大减少重复劳动的工作量,而且还可以重用样式。

第三,页面内容和显示样式分离。使得美工和程序员可以专注做自己删除的东西。  



研究CSS,其实东西不多,毕竟我们不是专门的美工人员,大致有个了解就OK了,第1个就是CSS选择器,第2个就是常用的属性设置。



CSS--开篇的更多相关文章

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

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

  2. CSS基础(一):开篇

    背景 HTML是一种超文本标记语言,用来定义文档的结构和内容,例如标题.段落和列表等等,而文档内容如何渲染.如何展示,这就需要样式来修饰了.CSS正是可以与HTML很好地结合.如果将HTML比作水,那 ...

  3. CSS布局开篇

    原文: 简书原文:https://www.jianshu.com/p/2c78b927f8c4 开篇 这是我写CSS布局的第一篇文章,之所以将布局从中摘出来单独放一部分是因为我觉得光是布局这块内容就有 ...

  4. 重拾CSS基础—开篇

    由来 从事软件行业一晃也5年有余,之间参与过若干个基于web的项目,所以javascript和Html基本已经相当熟悉,最近对于web前端开发比较关注,分析后发现CSS的确是自己的弱项,于是决定再加强 ...

  5. 11种常用css样式之开篇文本字体学习

    常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spaci ...

  6. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  7. 一起学习jQuery2.0.3源码—1.开篇

    write less,do more jQuery告诉我们:牛逼的代码不仅精简而且高效! 2006年1月由美国人John Resig在纽约的barcamp发布了jQuery,吸引了来自世界各地众多Ja ...

  8. 转载css的background-position

    这是一个有趣的话题 其实我并不确切的平时大家是怎么去应用或者玩转一个属性,一个值.我能肯定的是这些东西都有不少的可玩性. 我今天要聊的 background-position 应该已经被大家玩得色彩斑 ...

  9. 利用target的特性,可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  10. 举例详解CSS中的cursor属性

    这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...

随机推荐

  1. [转载]binlog归档

    1.1. 前言 对数据库数据进行备份都是日常的工作(虽然都是自动做的),备份中有一项必备的那就是binglog了.在工作中一般这些备份都会保留一段时间后归档.时间长了归档的数据将会非常大.这时候我们就 ...

  2. 使用Xamarin实现跨平台移动应用开发(转载)

    刚在朋友圈看到张善友,转发的一条分享“使用Xamarin实现跨平台移动应用开发”,写的确实很详细得体,从收费到开源,这段时间xamarin受到不少质疑,如此文http://blog.csdn.net/ ...

  3. python基础之实现sql增删改查

    # encoding:utf-8 # Author:"richie" # Date:2017/8/2 import re key_l = ['id', 'name', 'age', ...

  4. Two Sum(两个数的相加)

    2017.11.10题目描述:Given nums = [2, 7, 11, 15], target = 9, Because nums[0] + nums[1] = 2 + 7 = 9, retur ...

  5. Java中的集合框架(上)

    Java中的集合框架概述 集合的概念: Java中的集合类:是一种工具类,就像是容器,存储任意数量的具有共同属性的对象. 集合的作用: 1.在类的内部,对数据进行组织: 2.简单的快速的搜索大数据量的 ...

  6. C#并发编程实例讲解-概述(01)

    在工作中经常遇到需要并发编程的实例,一直没有时间来整理,现在空了下来,个人整理对并发一下理解. 关于并发编程的几个误解 误解一:并发编程就是多线程 实际上多线只是并发编程的一中形式,在C#中还有很多更 ...

  7. 读书笔记《PHP与MySQL程序设计》一

    第1章 PHP概述 1.1  历史(PHP4.PHP5.PHP5.3.PHP6[未发布]) 1.2 一般语言特性(实用性.强大功能.可选择性.成本[开源]) 第2章 环境配置 2.1 安装的前提条件( ...

  8. noi 2016 游记

    先挖个坑..这回大概不会太监吧(大雾 day -2 下午起飞的飞机,晚上到了成都..把东西扔到旅馆后就组队外出觅食了... 街上人不多,逛了半天才发现一家卖本地小吃的小店. KPM:诶诶给我来碗酸辣粉 ...

  9. HDU_4883

    TIANKENG's restaurant Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/O ...

  10. Spring学习日志之Glance

    Spring的本质 Spring最根本的意图只有一个:简化Java开发 Spring的核心主要有两个: 依赖注入 AOP Spring容器 Spring容器负责对对象进行创建,装配,配置并管理它们的整 ...