Css: 指层叠样式表 (Cascading Style Sheets)，它是用来进行网页风格设计的。通俗的说就是进行网页美化的，没有html依然存在，多了css 它会更好。但是没有html,css就没用多大用处了。

一、定义：

1、样式定义如何显示 HTML 元素

2、是为了解决内容与表现分离的问题

3、多个样式定义可层叠为一

4、外部样式表可以极大提高工作效率（外部样式表通常存储在 CSS 文件中）

二、分类：

1、外部样式表（写在css文件中）

使用情况：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

在页面中引用如下：

<head>

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

</head>

mystle是定义样式表文件的名称。

2、内部样式表（在head头部）

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过<style> 标签定义内部样式表。

<head>

<style type="text/css">

body{background-color: red}

p{margin-left: 20px}

</style>

</head>

3、内联样式（在html中）

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<pstyle="color: red; margin-left: 20px">

Thisis a paragraph

</p>

三、语法：

两个主要部分构成：选择器，以及一条或多条声明。

selector{declaration1; declaration2; ... declarationN }

selector：选择器通常是您需要改变样式的 HTML 元素。

Declarationx:每条声明由一个属性和一个值组成。

1、选择器

Html标签选择器

没有标识，直接引用。

ID 选择器

以“#”标识引用

类选择器

以“.”标识引用

2、三个选择器的异同：

同：都可以通过各自的选择器，来为html内容制定样式。

异：

html 标签选择器比较“整块化”：大家都知道html标签是用来调整html 页面布局的，所以，这个分块比较整齐，是页面的框架，不会总是具体到某个控件或者某个文本。而ID 标签和class标签是个人设定的，我们可以在我们操作的任何地方定义，id 或者class ，或者两者。这样可以把页面样式细化。

重复定义：ID 选择器不可以重复定义，一个页面中，ID 号是唯一的，一定有地方占用，其他地方就不可以占用。class选择器则不同，我们可以把多个地方定义成同一个类，这样方便在样式表统一定义格式，而不用同一个样式多出定义。

注意：html 标签也是有ID 和class属性的。也就是说，如果您给html标签定义了ID ，class 属性，在css 中也可以通过使用ID选择器或者class 选择器来达到目的。一般我们直接使用html 标签，不使用ID,CLASS ,不是那个更好，只是给html 标签定义样式，有现成的html 标签，就没有必要在定义id 或者class.反之，不是html标签的，只能根据需要定义ID ，class 来定义样式了。

也就是:html ,ID ,class 是灵活使用的。

3、书写规则：

大小写：

选择器是对标签的大小写敏感的。

冒号：：属性和值之间

属性（property）是您希望设置的样式属性（style attribute）。

每个属性有一个值。属性和值被冒号分开。

selector{property: value}

引号：“”。属性值为若干个单词。

p{font-family: "sans serif";}

分号：；多个属性之间。

p{text-align:center; color:red;}

CSS 初探的更多相关文章

  1. javafx之CSS初探

    文档:http://www.haogongju.net/art/1807238 javafx中的css元素必须有-fx-前缀. 一.介绍 java8中新增了javafx.css开放了css相关api. ...

  2. css初探

    CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector {                   property: value;                 ...

  3. Matplotlib数据可视化（3）：文本与轴

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

  4. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  5. CSS Spritec下载,精灵图，雪碧图，初探之原理、使用

    CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...

  6. CSS 预处理器（框架）初探：Sass、LESS 和 Stylus

    现在最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 拿less来说,可以在页面上直接使用less文件,但要引用less.js进行解析:同时也可以直接将less ...

  7. CSS居中初探

    刚刚度过了实习期,进入了试用期.试用期依然会安排学习的任务.在学习中发现css的居中十分常用,做一个小小的探索. 一.水平居中 1.行内元素 可以直接使用text-align:center来解决.例如 ...

  8. 初探CSS

    css基本框架 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. 又一次认识HTML，CSS，Javascript 之node-webkit 初探

    今天我们来系统的.全面的 了解一下前端的一些技术,将有助于我们写出 更优秀的 产品 出来. 什么是HTML? HTML 是用来描写叙述网页的一种语言. HTML 包括一些根节点.子节点,文本节点.属性 ...

随机推荐

  1. WebGL自学教程——WebGL演示样本：开始

    最终开始WebGL样品演示,...... 开始 使用WebGL步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊>中的 ...

  2. C++基础之---union联合体大小分析

    #include <iostream> using namespace std; union un { int a[7]; double b; char c[10]; int d[3]; ...

  3. Android自己定义控件——3D画廊和图像矩阵

    转载请注明出处:http://blog.csdn.net/allen315410/article/details/39932689 1.3D画廊的实现 我们知道android系统已经为我们提供好了一个 ...

  4. java学习笔记12--国际化

    java学习笔记12--国际化 国际化的操作就是指一个程序可以同时适应多门语言,即:如果现在程序者是中国人,则会以中文为显示文字,如果现在程序的使用者是英国人,则会以英语为显示的文字,也就是说可以通过 ...

  5. 搭建自己的XenServer+CloudStack云平台，提供IaaS服务（一）环境搭建

    目标 搭建一个完整的基于XenServer和CloudStack的虚拟化平台,提供IaaS服务. 搭建三台安装了XenServer的服务器 搭建一台安装了CloudStack的服务器用以管理云平台 搭 ...

  6. MVC数组模型绑定

    ASP.NET MVC数组模型绑定   在ASP.NET MVC中使用Razor语法可以在视图中方便地展示数组,如果要进行数组模型绑定,会遇到索引断裂问题,如下示例: <input type=& ...

  7. appium简明教程

    appium简明教程 什么是appium? 下面这段介绍来自于appium的官网. Appium is an open-source tool you can use to automate mobi ...

  8. 黑马程序猿_ 利用oc的协议实现代理模式

    先说下代理模式是什么吧 定义: 为其它对象提供一种代理以控制对这个对象的訪问.在某些情况下,一个对象不适合或者不能直接引用还有一个对象 而代理对象能够在client和目标对象之间起到中介的作用. 在看 ...

  9. C++ Primer 学习笔记_61_重载操作符与转换 --自增/自减操作符

    重载操作符与转换 --自增/自减操作符 引言: 自增,自减操作符常常由诸如迭代器这种类实现,这种类提供相似于指针的行为来訪问序列中的元素.比如,能够定义一个类,该类指向一个数组并为该数组中的元素提供訪 ...

  10. Swift实现OC中的单例模式

    一.MySingle类 import Foundation class MySingle{ //定义单例的属性 var name:String? var age:Int? var height:Dou ...