一.基础简介

1.简介

CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率 。样式存储在样式表中，通常放在<head>部分或存储在 外部CSS文件中。作为网页标准化设计的趋势，CSS取得了浏览器厂商的广泛支持，正越来越多的被应用到网页设计中去。
 
网页现在的新标准是W3C。目前的模式是html+css+javascript，如何理解呢，就是html是网页的结构，CSS是网页的样式，javascript是行为。

2.使用css 4种方式

1)行内直接使用style 
<h1 style="text-align:center;">Center-aligned heading</h1>
2)在head 的style 标签里定义

<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>

 
3)使用link 标签
<link rel="stylesheet" type="text/css" href="css/styles.css">
 
4)使用import
<style type="text/css">
 @import url(css/mycss.css);
</style>

3.什么是CSS？

1. CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。

2. CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。

3. CSS 是用来表现HTML或XML的标记语言。

4. CSS 是由W3C的CSS工作组发布推荐和维护的.

5. CSS 是编程入门人员的必修课，运用CSS样式可以让页面变得美观。

6. CSS语法由三部分构成：选择器、属性和值： selector {property: value}

4.使用CSS的优势

内容与表现分离，有了CSS，网页的内容(XHMTL)与表现就可以分开了。

使用CSS可以减少网页的代码量，增加网页的浏览速度。

5.如何使用CSS？

有三种方法可以在站点网页上使用样式表：
1. 外联式Linking（也叫外部样式）：将网页链接到外部样式表。
2. 嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
3. 内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。
其中，优先级：内联式 > 嵌入式 > 外联式

样式层叠

样式层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。

样式层叠次序

当同一个 HTML 元素定义了多个样式时，应该使用哪个样式？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

1.CSS基础简介的更多相关文章

  1. CSS入门（css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影）

    一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...

  2. LESS CSS 框架简介(转)

    原文地址:http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/ 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML ...

  3. LESS CSS 框架简介

    使用 LESS 简化层叠样式表(CSS)的编写 LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单.本文将通过实例,为大家介绍这一框架. 简介 CSS(层叠样式表 ...

  4. 转:LESS CSS 框架简介

    原文来自于:http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/ 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTM ...

  5. 【转】 LESS CSS 框架简介

    简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. ...

  6. css基础-语法篇

    CSS基础 1.css简介 cascading style sheets    汉译层叠样式表,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息 ...

  7. 从零开始学习前端开发 — 2、CSS基础

    一.CSS简介  1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...

  8. h5 . css入门 2.CSS基础

    CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...

  9. Web开发——CSS基础

    参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...

随机推荐

  1. 软件魔方制作系统启动盘并安装win8系统

    不多说,直接上干货! 推荐软件:软件魔方 http://mofang.ruanmei.com/ 这里,我想说的是,这个软件来制作系统盘,是真的方便和好处多多.具体我不多说,本人也是用过其他的如大白菜等 ...

  2. OpenGL12-shader(GLSL)着色语言4-广告版的实现

    之前介绍了vertex shader的基本原理,现在我们来做一个简单的实践,在游戏中广告版(布告版) 随处可见,而且效率很高,现在我们就使用shader来实现这一过程,首先我们要知道布告版的原理 实际 ...

  3. CSS3设置Table奇数行和偶数行样式

    table:.myTable tr:nth-child(even){ //偶数行 background:#fff;}.myTable tr:nth-child(odd){ //奇数行 backgrou ...

  4. 软工网络15-Alpha阶段敏捷冲刺

    一.Alpha 阶段全组总任务 二.各个成员在 Alpha 阶段认领的任务 三. 整个项目预期的任务量 四.明日各个成员的任务安排 任务 预计时长 负责人 授权界面 2h 王华俊 难度选择界面 1h ...

  5. UML——六大关系整理

    UML——六大关系整理 1.定义 是一种面向对象的建模语言,它是运用统一的.标准化的标记和定义实现对软件系统进行面向对象的描述和建模(百度百科). 2.六种关系 这六种关系分别为,继承.实现.关联.聚 ...

  6. 浅析人脸检测之Haar分类器方法：Haar特征、积分图、 AdaBoost 、级联

    浅析人脸检测之Haar分类器方法 一.Haar分类器的前世今生 人脸检测属于计算机视觉的范畴,早期人们的主要研究方向是人脸识别,即根据人脸来识别人物的身份,后来在复杂背景下的人脸检测需求越来越大,人脸 ...

  7. 自动化部署MySQL 5.6 步骤 制作到ftp共享，永远使用

    首先需要搭建ftpserver yum install vsftpd service vsftpd start 这样ftp服务就起来了,这里只是简单的使用,所以没有使用配置文件.这样我们只要将需要的文 ...

  8. [转]Pass a ViewBag instance to a HiddenFor field in Razor

    本文转自:https://stackoverflow.com/questions/27456983/pass-a-viewbag-instance-to-a-hiddenfor-field-in-ra ...

  9. struts2入门实例

    引言: 接触.net有3.4年的时间了,一直想学习java,中间因为种种原因耽搁下来.本人学习java的目的,一是多条出路,二是和.net平台互相印证,毕竟只用一门语言,无论是在框架还是在眼界方面都会 ...

  10. mysql中的坑

    1,MySQL建表中double类型不能限制数据长度! 2,……