CSS（Cascading Style Sheets）是层叠样式表用来设置网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
CSS和HTML的结合方式

     1. Style属性方式
     2. 内部样式表方式: HTML提供的<style标签>,须写在<head>标签内部
          <style type="text/css">
               CSS代码
          </style>
     3. 引入外部文件的方式（常用的方式）
          * 定义一个外部的CSS文件。
          * @import url("css文件的地址");需要写在<style>标签的内部,所以依然也在head内部
     4. html提供的标签（常用的方式）
          <link rel="stylesheet" type="text/css" href="CSS文件的地址" >，也写在<head>标签的内部,不能写在<style>内部
               rel：代表当前的文件和引入文件的关系。
               type：类型
               href：CSS的地址
CSS 语法由三部分构成：选择器、属性和值：
     selector {property: value}
          注意:如果值为若干单词，则要给值加引号;
                多重声明：如果要定义不止一个声明，则需要用分号将每个声明分开
                该在每行只描述一个属性，这样可以增强样式定义的可读性
 
CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
CSS的选择器（★★★★★）: 编写的CSS代码作用在哪个标签上。

               (标签名)类型选择符(E)
               通配选择符 (*)

                    适用于所有对象
 
               类选择符(E.class)
                    以class属性包含myclass的E对象作为选择符。 
 
               ID选择符(E#id) , id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
                    语法: E#myid{ sRules }
                    说明: 以唯一标识符id属性等于myid的E对象作为选择符。  
CSS扩展选择器：
     * 关联选择器：多个标签之间产生关系。(CSS 派生选择器),派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。
     中间用空格隔开
     例如div font{ }就这这种选择器, 作用域div下还有font标签,则产生效果
   * 组合选择器：对多个不同的选择器设置相同的样式
          * 中间用逗号隔开
            例如#buhaha2,  .haha{ } 则两个选择器具有相同的样式
   * 伪元素选择器：CSS定义好的选择器
          * 如果使用超链接的4个状态，使用的顺序：     L V H A
          E:link{ sRules } 设置超链接a在未被访问前的样式。 
          E:hover{ sRules } 设置元素在其鼠标悬停时的样式。 
          E:active{ sRules } 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。 
          E:visited{ sRules } 设置超链接a在其链接地址已被访问过时的样式。 
          * CSS的优先级
               * （一般情况下）从上到下，由外到内，优先级从低到高的。
               * 特殊情况：标签名选择器 < class选择器  < ID选择器 < style属性
              
          * CSS的代码规范
               * 选择器名称{属性名:属性值; 属性名:属性值; ...}
               * 如果一个属性有多个值，值与值直接用空格隔开
                    * 例子  div{border:值1 值2 值3} 

* CSS的布局（了解）
               * 盒子模型

    
float：none | left | right
     默认值：none
     适用于：所有元素
     继承性：无
     动画性：否
     计算值：指定值
     取值：
          none： 设置对象不浮动 
   left： 设置对象浮在左边 
          right： 设置对象浮在右边     
CSS背景

     background-color 
          为元素设置背景色。这个属性接受任何合法的颜色值。
          例如希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：
               p {background-color: gray;}
          background-color 不能继承，其默认值是 transparent。有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
      background-image  背景图像
          要把图像放入背景，需要使用属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
               body {background-image: url(/i/eg_bg_04.gif);}大多数背景都应用到 body 元素，不过并不仅限于此。
CSS文本.

CSS字体..
CSS列表...
CSS表格....
CSS框模型

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
 
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
* {
  margin: 0;
  padding: 0;
}
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。
CSS定位

     CSS position 属性: 通过使用 position 属性，我们可以选择 4 中不同类型的定位，这会影响元素框生成的方式。
 
position 属性值的含义：
     static 
          元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 
     relative 
          元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 
     absolute 
          元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 
     fixed 
          元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。 
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

02 CSS/javaScript的更多相关文章

  1. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...

  2. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表（目录）

    HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...

  3. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 在开始之前,你需要了解一些基本的知识,不要求你能掌握,但是了解一下还是有益的: HTML 简 ...

  4. html css javascript 加载的顺序

    html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...

  5. Sublime Text插件：HTML+CSS+JAVASCRIPT+JSON快速格式化[转]

    今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...

  6. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  7. HTML+CSS+JAVASCRIPT 总结

    1. HTML 1: <!doctype html> 2: <!-- This is a test html for html, css, javascript --> 3: ...

  8. Umbraco（3） - CSS & Javascript（翻译文档）

    原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco3css-javascript/ CSS & Jav ...

  9. 原创的基于HTML/CSS/JavaScript的层级目录树

    之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...

随机推荐

  1. HDU 4950 Monster

    题目链接 题意:有一个怪物的血量为h,人攻击怪物,每回合可以杀掉a滴血,再回b滴血,k个回合之后人会休息一回合,即人不攻击而怪物回b滴血,问能否杀死.翻译过来就是给定一个数h,每轮可以先减a再加b,k ...

  2. 常用邮箱的服务器(SMTP/POP3)地址和端口总结

    163.com: POP3服务器地址:pop.163.com(端口:110) SMTP服务器地址:smtp.163.com(端口:25) 126邮箱: POP3服务器地址:pop.126.com(端口 ...

  3. Android笔记：四大组件

    1.Activity(是用户可以看到的主要的界面,使用时需要在AndroidManifest.xml中编辑声明.) 启动模式: 启动模式一共有四种,分别是standard.singleTop.sing ...

  4. java动态生成excel打包下载

    @SuppressWarnings("unchecked") public String batchExport() throws DBException{ @SuppressWa ...

  5. 假期（codevs 3622）

    题目描述 Description 经过几个月辛勤的工作,FJ决定让奶牛放假.假期可以在1-N天内任意选择一段(需要连续),每一天都有一个享受指数W.但是奶牛的要求非常苛刻,假期不能短于P天,否则奶牛不 ...

  6. 模拟赛1101d1

    完美的序列(sequence)Time Limit:1000ms Memory Limit:64MB题目描述LYK 认为一个完美的序列要满足这样的条件:对于任意两个位置上的数都不相同.然而并不是所有的 ...

  7. mysql常用表/视图管理语句

    查看所有表  show tables; 查看表/视图结构 desc 表名/视图名: 查看建表过程  show create table 表名: 查看建视图过程 show create view 视图名 ...

  8. Loadrunner11.0 录制手机App脚本的方法

    使用Loadrunner录制手机终端App脚本 1. 说明 目前手机APP上的功能日益丰富,对手机应用功能的性能测试需求也越来越多.公司比较抠门没有花钱买Loadrunner,可怜我们工作中一直用的破 ...

  9. ASP.NET Web Api 实现数据的分页（转载）

    转载地址:http://www.cnblogs.com/fzrain/p/3542608.html 前言 这篇文章我们将使用不同的方式实现手动分页(关于高端大气上档次的OData本文暂不涉及,但有可能 ...

  10. AngularJS 之 Factory、Service、Provider

    当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一定要早点意识到,controller 这一层应该很薄:也就是说,应用里大部分的业务逻辑和持久化 ...