一.基础简介

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. Spring Security构建Rest服务-1201-Spring Security OAuth开发APP认证框架之实现服务提供商

    实现服务提供商,就是要实现认证服务器.资源服务器. 现在做的都是app的东西,所以在app项目写代码  认证服务器: 新建 ImoocAuthenticationServerConfig 类,@Ena ...

  2. 【转】Spark源码分析之-scheduler模块

    原文地址:http://jerryshao.me/architecture/2013/04/21/Spark%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90%E4%B9%8B- ...

  3. python如何帮我在投资中获取更高收益

    搞技术的大都比较纯粹,比较实在,除了工资之外基本就没有别的收入了(少部分人能接外包赚外块).或许是迫于生活的压力,或许是不甘于固定的工资,或许是出于技术人骨子里的好奇,亦或是这几年关于理财投资的大力宣 ...

  4. free函数使用时的注意事项。

    free函数是我们在写C语言程序时常用的函数,但是使用时需要注意,一不小心很肯能会引起吐核. 注意:free函数与malloc()函数配对使用,malloc函数释放申请的动态内存.对于free(p)这 ...

  5. @RestController和@Controller注解的区别

    @RestController是@ResponseBody和@Controller注解的结合,当你return一个页面时,使用@Controller注解返回的是相应页面,使用@RestControll ...

  6. SpringBoot入门 (二) 属性文件读取

    在上一篇中介绍了在idea中创建springboot工程及使用web工程输出“helloworld”到前端页面,本文学习在springboot工程中读取属性文件中的属性值. 一 自定义属性 在appl ...

  7. Java 裁剪图片

    package com.test; import java.awt.image.BufferedImage; import java.io.File; import javax.imageio.Ima ...

  8. Dubbo2.7源码分析-如何发布服务

    Dubbo的服务发布逻辑是比较复杂的,我还是以Dubbo自带的示例讲解,这样更方便和容易理解. Provider配置如下: <?xml version="1.0" encod ...

  9. vue-router参数传递

    1.在vue-router中,有两大对象被挂载到了实例this2.$route(只读.具备信息的对象).$router(具备函数功能)3.查询字符串方式传递参数 1).去哪里 <router-l ...

  10. api.closeFrame

    关闭frame closeFrame({params}) params name: 类型:字符串 默认值:无 描述:(可选项)frame 名字,不传时关闭当前 frame 示例代码 api.close ...