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. html/css实现文字自动换行，超出部分出现(...)

    PS:这是我在别人博客copy下来的 做前端的我们都会发现这样一个问题,当你控制文字出现多行时,而这多行是有限制的(比如超出部分隐藏不显示),而这多行文字如果全部是数字或者字母抑或是数字和字母的组合时 ...

  2. ansible相关

    上图为ansible的基本架构,从上图可以了解到其由以下部分组成: 核心:ansible 核心模块(Core Modules):这些都是ansible自带的模块 扩展模块(Custom Modules ...

  3. java爬取网页内容 简单例子（2）——附jsoup的select用法详解

    [背景] 在上一篇博文java爬取网页内容 简单例子(1)——使用正则表达式 里面,介绍了如何使用正则表达式去解析网页的内容,虽然该正则表达式比较通用,但繁琐,代码量多,现实中想要想出一条简单的正则表 ...

  4. ViewPager添加小圆点

    ViewPager添加小圆点很简单,但是如果是网络图片可能就不太好做了,所以我这里给出一种方法,当然你也可以用其他的 1.主界面xml <?xml version="1.0" ...

  5. redhat 5的中文包安装

    中文包文件名.在iso文件的/server/文件夹下fonts-chinese-3.02-9.6.el5.noarch.rpmfonts-ISO8859-2-75dpi-1.0-17.1.noarch ...

  6. Django组件补充(缓存，信号，序列化)

    Django组件补充(缓存,信号,序列化) Django的缓存机制 1.1 缓存介绍 1.缓存的简介 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑 ...

  7. 菜单条 Menu Bar Action

    //.h /***Action**/ QAction * act_openImage; QAction * act_openVideo; QAction * act_openAudio; /***Me ...

  8. Linux系统——ssh-key连接原理

    SSH是一种客户端连接,在Linux服务器下通过远程的方式将本地电脑连接到对方的电脑上. 远程连接的方式: (1)telnet命令(为明文传输,不安全) (2)(2)SSH(加密传输,安全) 操作的两 ...

  9. linux各版本基线检查脚本(centos6、centos7、ubuntu系列)

    以下是centos7基线检查脚本: #!/bin/bash #version v1. by pensar #操作系统linux 配置规范--centos7 cat <<EOF ****** ...

  10. 从0开始学习 GITHUB 系列之「GIT 进阶」【转】

    本文转载自:http://stormzhang.com/github/2016/06/16/learn-github-from-zero5/ 版权声明:本文为 stormzhang 原创文章,可以随意 ...