1、CSS 简介

  CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中,外部样式表通常存储在 CSS 文件中,多个样式定义可层叠为一。

  HTML 标签被设计为用于定义文档内容,也就是文档结构,为了增强代码的可读性,实现网页结构与表现相分离的原则,万维网联盟(W3C),肩负起了 HTML 标准化的使命,并在 HTML4 之外创造出样式(Style)。CSS 目前最新版本是 CSS3,相对于传统 HTML 的表现而言,CSS 能够对网页中对象的位置排版进行像素级的精确控制,拥有对网页对象编辑的能力,易于维护和改版,提高页面浏览速度,使用 CSS 布局页面更符合 W3C 标准,他是目前基于文本展示最优秀的表现设计语言。

  CSS 样式表极大地提高了工作效率:样式通常保存在外部的 .css 文件中,通过仅仅编辑一个简单的 CSS 文档,外部样式表有能力同时改变站点中所有页面的布局和外观。

2、CSS 语法

  CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。如下:

 p{
color:red;
text-indent:2em; /* 段落缩进2个字,即段落开头空2个汉字的位置。 */
}

3、创建 CSS

  当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法:内联样式、内部样式、外部样式。

  (1)、内联样式

  内联样式也叫行内样式或者行间样式,即在相关标签内使用样式(style)属性定义。如下:

 <div style="width:200px;height:100px;border:1px solid black;"></div>

由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。因此需要慎用这种方法,例如当样式仅需要在一个元素上应用一次时,可以使用内联样式。要使用内联样式,需要在相关的标签内使用样式属性定义,style 属性可以包含任何 CSS 属性。

  (2)、内部样式

  内部样式也叫内嵌样式,即在文档中创建内嵌的样式表,需要使用 <style> 标签在文档头部定义内部样式表,如下:

 <head>
<style>
div{
width:200px;
height:100px;
border:1px solid black;
}
p{
color:blue;
font-size:14px;
}
span{
color:black;
font-weight:bold;
}
</style>
</head>

CSS基本知识汇总的更多相关文章

  1. CSS入门知识汇总

    1.CSS认识 在谈论CSS的概念之前,我们先说一说web标准的目的——其在于创建一个统一的用于web表现层的技术标准,以便通过不同浏览器或终端设备向最终用户展示信息内容.一个网页的呈现是由三部分组成 ...

  2. CSS基础知识汇总

    前言 原文连接:http://www.cnblogs.com/wanghzh/p/5805678.html 在此基础上又做了大量的扩充 CSS简介 CSS是Cascading Style Sheets ...

  3. 看这一篇就够了,css选择器知识汇总

    对大多技术人员来说都比较熟悉CSS选择器,举一例子来说,假设给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了, ...

  4. 最全的jQuery知识汇总

    本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...

  5. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  6. JavaScript正則表達式知识汇总

    Js 正則表達式知识汇总 正則表達式: 1.什么是RegExp?RegExp是正則表達式的缩写.RegExp 对象用于规定在文本中检索的内容. 2.定义RegExp:var +变量名=new RegE ...

  7. web前端project师知识汇总

    分类: Web开发应用  一.何为Web前端project师?           前端project师,也叫Web前端开发project师.他是随着web发展.细分出来的行业.Web前端开发proj ...

  8. Oracle手边常用70则脚本知识汇总

    Oracle手边常用70则脚本知识汇总 作者:白宁超 时间:2016年3月4日13:58:36 摘要: 日常使用oracle数据库过程中,常用脚本命令莫不是用户和密码.表空间.多表联合.执行语句等常规 ...

  9. Oracle 数据库知识汇总篇

    Oracle 数据库知识汇总篇(更新中..) 1.安装部署篇 2.管理维护篇 3.数据迁移篇 4.故障处理篇 5.性能调优篇 6.SQL PL/SQL篇 7.考试认证篇 8.原理体系篇 9.架构设计篇 ...

随机推荐

  1. 如何有效使用Project(2)——进度计划的执行与监控

    继上次的的<编制进度计划.保存基准>继续讲解如何对计划进行执行和监控. 计划执行即:反馈实际进度.反馈工作消耗(本文只考虑工时,不考虑成本).提出计划变更请求.如果你的企业实施了专门的PM ...

  2. WebView注入Java对象注意事项

    在android4.2以前,注入步骤如下: webview.getSetting().setJavaScriptEnable(true); class JsObject { public String ...

  3. 《SICP》读后感:关于软件本质的一点思考

    摘要:软件本身不是目的,人类的需求才是目的,而软件只是达到目的的手段. 软件的本质在于控制复杂性,这个复杂性并非来自于计算机,也并非来自于现实世界,而是来自于人类的思维和知识体系. 软件被使用的广泛性 ...

  4. windows下上传文件到VWware的centos

    1.使用Xsell 连接到centos虚拟机,可以在虚拟机使用终端查看ip地址,命令:ifconfig -a 2.远程Linux系统上需要安装lrzsz工具包  Xsell命令:yum install ...

  5. iOS 通过 JSPatch 实时修复线上 bug!

    JSPatch 是一个开源项目(Github链接),只需要在项目里引入极小的引擎文件,就可以使用 JavaScript 调用任何 Objective-C 的原生接口,替换任意 Objective-C ...

  6. PHP 面向对象编程(2)

    一些内建方法: class Person { public $isAlive = true; function __construct($name) { //这里我们创建了一个name的属性 $thi ...

  7. powershell中的两只爬虫

    --------------------序-------------------- (PowerShell中的)两只爬虫,两只爬虫,跑地快,爬网页不赖~~~ 一只基于com版的ie,一只基于.net中 ...

  8. 谈谈eclipse使用技巧二

    上节说道了怎么使用eclipse使您事半功倍.这节告诉您怎么用eclipse练成火眼金睛. ①借你一双火眼金睛让类的层次结构一目了然让你阅读代码如虎添翼 一个好的类的层次结构,让你的类的层次清晰明了, ...

  9. 【转】局域网内访问VS2012 调试的IIS Express web服务器

    1.修改发布项目的web属性 2.在我的文档中打开IISExpress\config\applicationhost.config 加上下面的一句 3.重启调试 转自:http://blog.chin ...

  10. C#实现微信公众号群发消息(解决一天只能发一次的限制)

    经过几天研究网上的代码和谢灿大神的帮忙,今天终于用C#实现了微信公众号群发消息,现在整理一下. 总体思路:1.首先必须要在微信公众平台上申请一个公众号. 2.然后进行模拟登陆.(由于我对http传输原 ...