一.基础简介

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. Fiddler 502问题

    使用Fiddler的时候遇到下面这个问题:在地址栏想打开个一般处理程序,出现连接本机失败的提示,如下图: 而这在我没打开Fiddler的时候是显示正常的. 查看Fiddler,在嗅探 -> 第二 ...

  2. lucene源码分析(7)Analyzer分析

    1.Analyzer的使用 Analyzer使用在IndexWriter的构造方法 /** * Constructs a new IndexWriter per the settings given ...

  3. elasticsearch版本不同,批量查询也不相同

    网上搜到批量查询可以通过TransportClient实现,但官方推荐使用RestHighLevelClient实现 注意: We plan on deprecating the TransportC ...

  4. H5如何用Canvas画布生成并保存带图片文字的新年快乐的海报

    摘要:初略算了算大概有20天没有写博客了,原本是打算1月1号元旦那天写一个年终总结的,博客园里大佬们都在总结过去,迎接将来,看得我热血沸腾,想想自己也工作快2年了,去年都没有去总结一下,今年势必要总结 ...

  5. 学习angualr之前需要了解的typeScript知识

    官网 : www.typescriptlang.org   1.编译型语言 2.强类型语言 3.真正的面向对象的语言: 有借口.有泛型.有枚举.有访问修饰符 AMD类型的面向对象的语言     npm ...

  6. C#基础知识回顾--BackgroundWorker介绍

    简介 BackgroundWorker是.net里用来执行多线程任务的控件,它允许编程者在一个单独的线程上执行一些操作.耗时的操作(如下载和数据库事务)在长时间运行时可能会导致用户界面 (UI) 始终 ...

  7. 最长公共子序列(DP)

    Description 一个给定序列的子序列是在该序列中删去若干元素后得到的序列.确切地说,若给定序列 X = { x1,x2,…,xm },则另一序列Z ={ z1,z2,…,zk },X 的子序列 ...

  8. [PHP] Yaf框架的简单安装使用

    PHP开发组鸟哥惠新宸开发的php扩展框架 安装 windows下载扩展:https://pecl.php.net/package/yaf/2.2.9/windows 根据自己的电脑系统和php的版本 ...

  9. eclipse配置tomcat Mac平台

    1.到 apache官方主页 http://tomcat.apache.org 下载 Mac 版本的完整 tar.gz文件包.解压拷贝到 /Library 目录下,并命名为Tomcat,其他目录也可以 ...

  10. int类型转换byte类型

    计算机中,int类型占用4个字节,byte类型占用1个字节: 当int类型强转为byte类型时,计算机会截取最后的八位(1个字节): 由于计算机存储数据时,都是以补码的形式进行存储. 然而,我们通常看 ...