css引入方法

  1. 内嵌

    <head>
    
  <meta charset="UTF-8">
    
  <title>Document</title>
    
  <style>
    
    ....
    
  </style>
    
</head>
  2. 行间  
    <body style="background:red;">
  3. 外联  
    <link rel="stylesheet" href="./css/main.css" />
  4. @import方法  
    @import url("css/mycss.css")

基础选择器

　　元素选择器：h1...

　　类选择器：.class

　　id选择器：#id

　　通配符选择器：*

　　子元素选择器：>

　　后代元素选择器：ul li

　　相邻元素选择器：+

　　属性选择器：[]

　　组合选择器：h1,h2,h3,h4,h5{}

　　复合选择器：div.test{} (注意：中间没有空格，否则就会被识别为后代选择器了)、

伪元素

　　:first-letter :first-line :before :after ::selection(css3中唯一引入的伪元素)

伪类

　　css2中只有:link、:visited、:hover、:active、:focus、:first-child、:lang等有限的几种伪类选择器；

　　css3中增加了大量的伪类选择器：

　　结构化伪类：:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:last-child、:first-of-type、:last-of-type、

　　:only-child、:only-of-type、:root :empty

　　目标伪类：:target

　　状态伪类：:enabled、:disabled、:checked、:indeterminate、:default

　　否定伪类：:not()

　　（css3中新增伪类的具体用法可参见《CSS高效开发实战》一书）

盒子模型

　　标准盒子模型中：内容区域的宽度和高度就是width和height

　　IE盒子模型中：内容区域的宽度包含了内容、内边距、边框的总和。

　　CSS3中的box-sizing属性可以定义要使用何种盒模型。

定位

　　static: 默认

　　absolute（绝对定位）：相对于与它最近的那个已经定位了的祖先元素进行定位，如果没有已定位的祖先元素，则它的位置相对于初始包含块。绝对定位使元素的位置与文档无关，因此不占据空间。

　　relative：相对于它原来在的位置进行定位，使用相对定位时，无论是否移动，元素仍然占据原来的空间。

　　fixed：总是以视口的左上角进行定位

清除浮动

　　1、float父元素

　　2、添加空标签clear

　　3、overflow:hidden或者auto;

　　4、after伪类{

　　　　　　　　content:".";

　　　　　　　　height:0;

　　　　　　　　visibility:hidden;

　　　　　　　　display:block;

　　　　　　　　clear:both;

　　　　　　}

CSS hack--使css代码兼容不同的浏览器

　　常用的css hack方式：

　　①条件注释

　　如：<!--[if IE]> 这段文字只在IE浏览器中出现 <![end if]-->

　　②属性前缀

　　如：-webkit -o -moz -ms

　　③选择器前缀

　　如：*html

CSS3常用属性：

　　border-radius,box-shadow,text-shadow,transform(rotate,scale,skew,translate),transition,animation,@font-face,媒体查询@media　　

知识梳理——CSS篇的更多相关文章

  1. 知识梳理HTML篇

    HTML 浏览器内核: IE:trident         Firefox : gecko        Safari/chrome : webkit        Opera : presto(新 ...

  2. 知识梳理——HTML篇

    浏览器内核: IE: trident Fixfox: gecko Safari: webkit Opera: 以前是presto,现已改用Google Chrome的Blink Chrome: Bli ...

  3. [C# 基础知识梳理系列]专题六:泛型基础篇——为什么引入泛型

    引言: 前面专题主要介绍了C#1中的2个核心特性——委托和事件,然而在C# 2.0中又引入一个很重要的特性,它就是泛型,大家在平常的操作中肯定会经常碰到并使用它,如果你对于它的一些相关特性还不是很了解 ...

  4. Oracle知识梳理（三）操作篇：SQL基础操作汇总

    Oracle知识梳理(三)操作篇:SQL基础操作汇总 一.表操作 1.表的创建(CREATE TABLE): 基本语句格式:       CREATE TABLE  table_name ( col_ ...

  5. Jmeter 接口测试知识梳理——应用基础篇

    Jmeter 使用也有很长时间了,但是一直没有做一下知识梳理,近期会对公司同事做一下这方面的培训,借此机会,把使用过程中应用到的知识,或是遇到的问题,整理出来,方便大家学习! Jmeter 接口测试知 ...

  6. Jmeter 接口测试知识梳理——持续集成篇

    Jmeter 使用也有很长时间了,但是一直没有做一下知识梳理,近期会对公司同事做一下这方面的培训,借此机会,把使用过程中应用到的知识,或是遇到的问题,整理出来,方便大家学习! Jmeter + Ant ...

  7. Jmeter 接口测试知识梳理——环境搭建篇

    Jmeter 使用也有很长时间了,但是一直没有做一下知识梳理,近期会对公司同事做一下这方面的培训,借此机会,把使用过程中应用到的知识,或是遇到的问题,整理出来,方便大家学习! 环境搭建篇 很多文章介绍 ...

  8. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  9. C#基础知识梳理索引

    C#基础知识梳理索引 一 引子 之前曾写了一篇随笔<.NET平台技术体系梳理+初学者学习路径推荐+我们的愿景与目标> 三个月过去了,目标使更多的编程初学者,轻松高效地掌握C#开发的基础,重 ...

随机推荐

  1. CF1028E Restore Array 构造

    正解:构造 解题报告: 传送门! 是的灵巧还在写构造,,,不知道484我做题太慢的缘故我感觉我做了好久的构造了然而一半的题目都没做完QAQ 要哭出来了QAQ 然后说下这题的解法,开始花了这——么的时间 ...

  2. MDF文件损坏，如何恢复？（未解决）

    MDF文件损坏,如何恢复?MDF附加失败,数据库附加失败 1.附加时 2.用替换法设置后重建日志 (其实已经删掉日志了,确保操作之前没有日志,但是运行 alter database [test] Re ...

  3. mysql 数据操作 单表查询 group by 聚合函数 没有group by情况下

    聚合函数只能用在组里使用 #没有group by 则默认算作一组 取出所有员工的最高工资 mysql> select max(salary) from employee; +---------- ...

  4. QQ-AR助人教版小学英语“动”起来

    日前,人教数字出版公司与腾讯QQ达成合作,将以小学英语3-6年级8本课本为合作试点,共同推出全国首个可AR识别的课本,在QQ-AR的帮助下,课本也能“动”起来,更加生动立体地展现在孩子眼前,让学习变得 ...

  5. 跟我学Makefile（三）

    紧接着跟我学Makefile(二)继续学习:变量高级用法 (1)变量值的替换 :替换变量中的共有的部分,其格式是“$(var:a=b)”或是“${var:a=b}”,把变量“var”中所有以“a”字串 ...

  6. Jquery 简明介绍

    http://www.cnblogs.com/luotianshuai/p/5196997.html http://www.cnblogs.com/liujianzuo888/articles/568 ...

  7. TFS2015源代码管理器无法建立团队项目的问题

    最近在服务器安装了微软最新版的TFS2015  正版要钱,网络上还没有能找到可用的key,因此我只能使用试用版. 安装完成后,使用我本地的vs2013  vs2012  vs2010  vs2014 ...

  8. Spring Cloud组件完整

    有关项目启动和配置的说明: 1.最先启动的是eureka-server,并且你需要在整个测试过程中保持它的启动状态,因为它是注册中心,大多数服务必须依赖于它才能实现必要的功能. 2.如果你想测试配置中 ...

  9. this指向 - 总结

    /* 总结: this 的指向: 1.this 的指向 是在执行上下文时才确定的, 并且确定后不可更改: 2.this 指向 “其执行上下文的环境对象”; “其执行上下文的环境对象” 判读依据如下: ...

  10. RC1意思

    软件各种版本的表示 alpha 内部测试版 beta 外部测试版 demo 演示版 Enhance 增强版或者加强版 属于正式版 Free 自由版 Full version 完全版 属于正式版 sha ...