一、CSS简介

1、什么是CSS

CSS：Cascading Style Sheet：即层叠样式表。样式定义了如何显示HTML或XHTML元素。包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。

2、CSS的作用

能控制页面的样式和布局。

网页文件和样式文件相分离，可以提高开发效率。

3、CSS的发展史

1996年CSS1.0推出
1998年5月CSS2.0推出
2004年CSS2.1推出
2010年CSS3.0推出

二、CSS语法

1、style标签

例如：

<html>
   <head>
     <style type="text/css">
         h1{
              font-size:12px;
              color:#F00;
            }
     </style>
   </head>
</html>

注意：

1、<style>标签应写在<head>标签之间。

2、style元素始终要以<style type="text/css">开头，最后以一个结束</style>标记结尾。

2、基本语法

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

 selector {declaration1; declaration2; ... declarationN }

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

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

属性是希望设置的样式属性。每个属性有一个值。属性和值使用冒号分开。

selector {property: value}

示例：将h1标签内的文字颜色定义为红色，字体大小设置为14像素

 h1 {color:red; font-size:14px;}

下面的示意图展示了上面代码的结构：

注意：

1、CSS对大小写不敏感。如果涉及到与HTML文档一起工作的话，class和id名称对大小写是敏感的。

2、声明要使用花括号括起来。

3、CSS的最后一条声明后的“；”可写可不写，建议都要写上。这样写的好处是：当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。例如：

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

4、CSS如果要定义不止一条声明，则需要用分号将每条声明分开。多条声明可写在同一行，但开发时为了便于阅读建议分行写并缩进。例如：

p {

  text-align: center;

  color: black;

  font-family: arial;

}

5、如果属性值由若干单词组成，则要给属性值加引号，例如：

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

CSS（一）：CSS简介和基本语法的更多相关文章

  1. css系列教程--简介及基础语法和注意事项

    css简介:css指的是层叠样式表,cascading style sheets.用来定义html中的dom节点如何展示在页面中的问题.解决了内容与表现形式的分离问题.常见的样式表有外部链接样式表和内 ...

  2. HTML 学习笔记 CSS样式（简介和语法）

    CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML4.0中 是为了解决内容与表现分离的问题 外部 ...

  3. [JavaWeb基础] 028.CSS简介和基础语法

    css 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

  4. 常用CSS优化总结——网络性能与语法性能建议

    在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下 ...

  5. （转）常用CSS优化总结——网络性能与语法性能建议

    原文地址:http://www.cnblogs.com/dolphinX/p/3508657.html 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时 ...

  6. CSS(1)---css语法、css选择器

    CSS(1)---css语法.css选择器 一.CSS语法 1.CSS语法 CSS 规则由两个主要的部分构成:选择器以及一条或多条声明. 属性 是您希望设置的 样式属性.每个属性有一个属性值.属性和属 ...

  7. HTML&CSS基础-CSS的语法

    HTML&CSS基础-CSS的语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.dome.html源代码 <!DOCTYPE html> <html ...

  8. CSS：CSS 语法

    ylbtech-CSS:CSS 语法 1.返回顶部 1. CSS 语法 实例 查看 实例 1 查看 实例 2 CSS 实例 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是 ...

  9. Day 30：HTML和CSS在Java项目中常用语法

    framSet例子,其中的页面链接地址视情况而定,应为我还不知怎么弄当前文件下呢,例子主要在说明该标签如何使用 <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  10. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

随机推荐

  1. HighCharts: 设置时间图x轴的宽度

    这个x轴宽度的设置整了好久,被老板催的要死 highcharts的api文档很难找,找了半天也没找到,网上资料少,说的试了下,也没有,我用的图里api文档里没有介绍,这个属性不知道的话,根本不好找.为 ...

  2. 简述Android触摸屏手势识别

    很多时候,利用触摸屏的Fling.Scroll等Gesture(手势)操作来操作会使得应用程序的用户体验大大提升,比如用Scroll手势在 浏览器中滚屏,用Fling在阅读器中翻页等.在Android ...

  3. Android中的Service使用

    Service的生命周期 (适用于2.1及以上) 1. 被startService的无论是否有任何活动绑定到该Service,都在后台运行.onCreate(若需要) -> onStart(in ...

  4. X86 寻址方式、AT&T 汇编语言相关知识、AT&T 与 Intel 汇编语言的比较、gcc 嵌入式汇编

    注:本分类下文章大多整理自<深入分析linux内核源代码>一书,另有参考其他一些资料如<linux内核完全剖析>.<linux c 编程一站式学习>等,只是为了更好 ...

  5. oracle启动、关闭

    windows上启动关闭 http://www.cnblogs.com/victor_chou/archive/2009/07/09/1519594.html

  6. python列表推导式详解 列表推导式详解 字典推导式 详解 集合推导式详解 嵌套列表推导式详解

    推导式是Python中很强大的.很受欢迎的特性,具有语言简洁,简化代码,速度快等优点.推导式包括:1.列表推导式2.字典推导式3.集合推导式4.嵌套列表推导式注意: 字典和集合推导是最近才加入到Pyt ...

  7. Latex文件如何拆分进行独立编译？

    Latex文件如何拆分并进行独立编译? --latex源文件分批独立编译     最近使用Latex编写长文档,对于文件的组织有些困扰.   如果LaTeX文档比较大,可以考虑拆分为几个部分.比如编辑 ...

  8. MySQL Proxy 实现 MySQL 读写分离提高并发负载

    还在学习,学完了在写笔记 (这个先安装lua:https://www.cnblogs.com/fps2tao/p/9163959.html ) 工作拓扑: MySQL Proxy有一项强大功能是实现“ ...

  9. 请教中文的OCR软件哪个最好？

    对原件,有这几种:1,全中文(含标点,一些英文符号)2,中英文(英文较多,或英文占大多数)3,全英文(这个用finereader8.0) 針對1.2 紫光 超星阅读器自带的OCR组件 尚书七号搞定全中 ...

  10. java中代理，静态代理，动态代理以及spring aop代理方式，实现原理统一汇总

    若代理类在程序运行前就已经存在,那么这种代理方式被成为 静态代理 ,这种情况下的代理类通常都是我们在Java代码中定义的. 通常情况下, 静态代理中的代理类和委托类会实现同一接口或是派生自相同的父类. ...