初级篇
===========================选择器============================

元素选择器
css:
h1{color: red}
html:
<h1> hello world </h1>

类型选择器
css:
koo{color: red}
html:
<koo> hello world </koo>

属性选择器
css:
[title]{color: red}             //指定属性
html:
<koo title=""> hello </koo>

css:
[href][title]{color: red}       //指定同时拥有属性值
html:
<koo href="#" title="">hello</koo>

css:
[title="hello"]{color: red}     //指定属性及其值
html:
<koo title="hello">hello</koo>  

[attribute]             用于选取带有指定属性的元素。
[attribute=value]     用于选取带有指定属性和值的元素。
[attribute~=value]     用于选取属性值中包含指定词汇的元素。
[attribute|=value]     用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]     匹配属性值以指定值开头的每个元素。
[attribute$=value]     匹配属性值以指定值结尾的每个元素。
[attribute*=value]     匹配属性值中包含指定值的每个元素。

类选择器
css:
.lemon {color: red}
html:
<h1 class="lemon"> hello </h1>

css:
.foo.lemon {color:red}         //不能加空格
html:
<h1 class="lemon foo">hello </h1>

id选择器
css:
#lemon {color: red}            //id是唯一不可以叠加
html:
<h1 id="demon"> hello </h1>

伪类

:active     向被激活的元素添加样式。          
:hover         当鼠标悬浮在元素上方时，向元素添加样式。     
:link         向未被访问的链接添加样式。     
:visited     向已被访问的链接添加样式。
:focus             向拥有键盘输入焦点的元素添加样式。

伪元素

:first-letter     向文本的第一个字母添加特殊样式。     
:first-line     向文本的首行添加特殊样式。     
:before     在元素之前添加内容。     
:after         在元素之后添加内容。     

==============================逻辑结构====================================

分组:
css:
h1 , p {color: red}
html:
<h1> hello world </h1>
<p>  hello world </p>

通配:
css:
* {color: red}
html:
<h1> hello world </h1>
<koo> hello world </koo>

声明:
css:
h1 {
  color: red;
  font-size:19px;
}
html:
<h1> hello world </h1>

后代:
css:
h1 em  {color: red}
html:
<h1> <em> hello <b>world</b></em><h1>  //<em>元素内容生效

css:
h1 em b{color: red}
html:
<h1> <em> hello <b>world</b></em><h1>  //<b>元素内容生效

子代:
css:
h1 > em {color: red}
html:
<h1> <em>hello world</em>  </h1>        //<em>为子代生效
<h1><b><em>hello world</em></b></h1>    //<em>为孙代不生效

相邻:
css:
h1 + p + p{color:red}
html:
<h1>hello world</h1>                    //不生效
<p>hello world</p>                      //不生效
<p>hello world</p>                      //生效

同时:
css:
[title][href]{color: Red}
html
<html title="" href="">hello world </html>  

===========================相关属性======================================

字体相关属性:
font-size        //字体大小
font-weight        //字体粗细bold   normal
font-type        //字体倾斜italic normal
font-family        //字体样式sans-seria

文本相关属性:
color            //文本颜色
text-align        //文本对齐center left right justify
text-decoration        //文本修饰underline overline line-through
text-height        //文本高度
text-indent        //文本缩进
text-transform        //文本形式uppercase lowercase capitalize
word-spacing        //单词距离
letter-spacing        //字母距离
white-spacing        //空白距离nowrap pre normal

边框相关属性:
border:color width style  //边框颜色 粗细 样式
outline:color width style //轮廓颜色 粗细 样式

背景相关属性:
background-color    //背景颜色
background-position    //背景起始位置top bottom left center right value
background-image    //背景图片url("")
background-repeat    //背景重复no-repeat repeat-x repeat-y
background-attachment    //背景固定scroll fixed

列表相关属性:
list-style-image    //图标图片
list-style-position    //图标位置inside outside
list-style-type        //图标样式

表格相关属性:
border-colapse        //边框合并
border-spacing        //边框距离
caption-side        //标题位置
empty-cells        //空单元格hide show
table-layout        //边框算法automatic fixed(固定宽度)
vertical-align      //垂直对齐bottom center top
wdith                    //表格宽度
height                  //表格高度

    
=============================盒子模型=================================
组成成分:
border         边框
margin         外边距
padding       内边距
element       元素(包括height width)

block元素:
margin        :默认值不同元素不一样p为16 h1为21
padding      :默认为0
height         :默认为21px
width          :默认100%

inline元素
margin         :默认为0
padding       :默认为0
height          :默认为21px
width           :默认为字体宽度

############### inline  #################

# padding 和 margin 对上下方向无效
# height  和 width      对行级完全无效
# left    和 top            对行级完全无效
# display:block          行级转换成块级

###############  block   #################

# padding                    左右看不出改变，事实上width会减小
# left    和 top              对块级完全无效
# display:inline            级转换成行级
# padding和element   能改变大小及内容位置
# margin                      能改变盒子的位置

###############  简写数值 #################

padding: top right bottom left
margin : top right bottom left
border-width: top right bottom left
background-position : left top

################  复制值  #################

margin 与padding 的复制值特性
这里以margin为例子(padding一致)

margin:10px 60px 10px 60px;
等价于
padding:10px 60px;

原理:
    如果缺少左外边距的值，则使用右外边距的值。
    如果缺少下外边距的值，则使用上外边距的值。
    如果缺少右外边距的值，则使用上外边距的值。

###############  外边距合并  ################
0.当两个水平外边距相遇时，它们之间的宽度是两个元素的外边距之和
如:
h2 在 h1 水平右方
h1 元素外边距:5px
h2 元素外边距:3px
h1 和 h2 之间的距离是8px.

1.当两个垂直外边距相遇时，它们之间的高度是其中一个元素的外边距（较大者）
如:
h2 在 h1 垂直下方
h1 元素外边距:5px
h2 元素外边距:3px
h1 和 h2 之间的距离是 5px 而不是8px.

2.当一个元素包含在另一个元素中时（假设没有内边距或边框把
外边距分隔开），它们的上和/或下外边距也会发生合并
如:
h2 在 h1 的里边（都没有设置边框和内边距)
h1:上外边距是6px;
h2:上外边距是9px;
h1 和 h2 距离顶部的距离为9px;

3.当一个空元素，它有外边距，但是没有边框或填充。在这种
情况下，上外边距与下外边距就碰到了一起，它们会发生合并

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并
。行内框、浮动框或绝对定位之间的外边距不会合并。

=========================元素定位============================
display属性:

设置为none   则不显示元素内容及其框
设置为inline 则将其元素变为行级元素
设置为block  则将其元素变为块级元素

CSS 有三种基本的定位机制：普通流、浮动和绝对定位
普通流中的元素的位置由元素在(X)HTML中的位置决定
行级元素的padding margin border都不会影响其高度，但是行高可以做到

position属性:

static
  元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative
  元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute
  元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正
常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed
  元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

##########################################################################
static：无特殊定位，对象遵循正常文档流
top，right，bottom，left属性不会被应用。

relative：相对定位，对象遵循正常文档流
top，right，bottom，left属性在正常文档流中偏移位置。
因为其原本占有的空间仍保留,所以周围的元素不会受该元素的偏移而影响

absolute：绝对定位，对象脱离正常文档流
top，right，bottom，left属性进行设置相对原来的位置偏移量

fixed：   固定定位，对象脱离正常文档流，
top，right，bottom，left属性进行设置相对原来的位置偏移量
属性以窗口为参考点进行定位，对象不会随着滚动滚动

===================================元素浮动===============================

浮动表示 元素脱离文档流并且向左或右贴紧对齐
float:left/right

w3school定义

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

清除浮动 元素不允许周围存在浮动元素,因此会另置一行的位置
clear:both/left/right

 ------------------------------------------------------------------------------------------------------------------------------------------2016.11.05(军训前一天)

高级篇
 
================================对齐块元素====================================
 
块元素指的是占据全部可用宽度的元素，并且在其前后都会换行
 
如果宽度并非100%，则可以设置水平齐效果
 
 
1.使用margin属性水平对齐
 
可通过将左和右外边距设置为 "auto"，来对齐块元素。
 
css:
div{
width:75%;
margin:auto;  //左右自动分配，居中对齐
}
html:
<div>test</div>
 
 
2.使用 position 属性进行左和右对齐
 
可通过将position设置为absolute / relative，来对齐块元素。
 
css:
div{
width:75%;
position:relative;
left:250px;
}
html:
<div>test</div>
 
3.使用 float 属性来进行左和右对齐
 
可通过将position设置为absolute / relative，来对齐块元素。
 
css:
div{
width:75%;
float:right;
}
html:
<div>test</div>
 
 
跨浏览器兼容性问题
 
当像使用position / float对齐元素时，对body元素内外边距进行设置，可避免在不同浏览器中出现差异。
IE8 以及更早的版本存在一个问题。如果容器元素设置了指定的宽度，并且省略了!DOCTYPE声明，那么IE8以及更早
 
的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position / float属性时，请始终设
 
置 !DOCTYPE 声明。
 
 
 
=======================================尺寸=========================================
 
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距
 
1.设置元素的高度 / 宽度
 
css:
img.normal {
  height: auto
}
 
img.big {
  width: 160px
}
 
img.small {
  height: 20%
}
 
html:
<img class="normal" src="test.gif" /><br/>
<img class="big"    src="test.gif" /><br/>
<img class="small"  src="test.gif" />
 
 
 
 
2.设置元素的最大或最小 宽度 / 高度
 
css:
.max{
border:1px solid red;
max-height: 10px;
max-width: 50%;
}
 
.min{
border:1px solid blue;
min-height: 10px;
min-width: 200%;        //可以调出滚动条
}
html:
<p class="max">这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。</p>
 
<p class="min">这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。</p>
 
注意:
当设置的最大高度(宽度)不能容纳下文本时，文本内容会超出边框显示出来。
当设置的最小高度(宽度)不能容纳下文本时，边框会随文本拉高。
 
 
 
3.设置元素的行高
 
css:
p{border:2px solid green}
p.small {line-height: 0.5}
p.big {line-height: 200%}
p.justy{line-height: 19px;}
 
html:
<p class="justy">
这个段落拥有更大的行高。<br/>
这个段落拥有更大的行高
</p>
 
<p class="small">
这个段落拥有更大的行高。<br/>
这个段落拥有更大的行高
</p>
 
<p class="big">
这个段落拥有更大的行高。<br/>
这个段落拥有更大的行高。
</p>
 
 
========================================分类===========================================
 
1.改变元素的分类属性
 
css:
p{display:inline}
a{display:block}
b{display:none}
 
html:
<a>this is "a" element</a>     //该标签会自动换行
<b>this is "b" element</b>     //该标签不会显示出来
<p>this is "p" element</p>     //该标签不会换行
<p>this is "p" element</p>
 
 
2.float属性简单的应用
 
(1)围绕图片
css:
img {
float:right;                   //文字会围绕与图片的左方
margin:0px 0px 15px 20px;      //为图像添加边距
}
 
html:
<p>
<img src="img.gif" />
This is some text. This is some text. 
This is some text. This is some text. 
This is some text. This is some text. 
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
</p>
---------------------------------------
 
(2)首字特效
css:
span{
float:left;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
 
html:
<p>
<span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
</p>
 
注意:
即使有元素浮动，浮动后的剩下空位由周围的元素填充时，周围的元素内容不会进入空位区域。
只有边框会进入
-----------------------------------------
 

(3)水平菜单
css:
ul{
float:left;
width:100%;
list-style:none;
padding:0px;
margin:0px;
}

li{
display:inline;         //水平排列
}

a{
width:110px;
float:left;             //盒子浮动
color:white;
text-decoration:none;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}

html:
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
-------------------------------------------

(4)改变光标
html:
<span style="cursor:auto">Auto</span><br />

<span style="cursor:crosshair">Crosshair</span><br />

<span style="cursor:default">Default</span><br />

<span style="cursor:pointer">Pointer</span><br />

<span style="cursor:move">Move</span><br />

<span style="cursor:e-resize">e-resize</span><br />

<span style="cursor:ne-resize">ne-resize</span><br />

<span style="cursor:nw-resize">nw-resize</span><br />

<span style="cursor:n-resize">n-resize</span><br />

<span style="cursor:se-resize">se-resize</span><br />

<span style="cursor:sw-resize">sw-resize</span><br />

<span style="cursor:s-resize">s-resize</span><br />

<span style="cursor:w-resize">w-resize</span><br />

<span style="cursor:text"text</span><br />

<span style="cursor:wait">wait</span><br />

<span style="cursor:help">help</span>
---------------------------------------------------------

(5)div布局

css:
.contain{
width:100%;
border:1px solid grey;
}
.top,.foot{
background:grey;
color:white;
clear:both;
}
.left{
float:left;
width:35%;
}
.right{
margin-left:220px;
border-left:1px solid grey;
}

html:
<div class="contain">

  <div class="top">
  <h1>W3School.com.cn</h1>
  </div>

  <div class="left">
  <p>"Never increase, beyond what is necessary,
  the number of entities required to explain
  anything." William of Ockham (1285-1349)</p>
  </div>

  <div class="right">
  <h2>Free Web Building Tutorials</h2>
  <p>At W3School.com.cn you will find all the Web-building
  tutorials you need,from basic HTML and XHTML to advanced
  XML, XSL, Multimedia and WAP.<br/>
  W3School.com.cn - The Largest Web Developers Site On The Net!</p>
  </div>

  <div class="foot">
  Copyright 2008 by YingKe Investment
  </div>

</div>

====================================图片透明=================================
1.设置图片透明度
css:
img{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

img:hover{                    //伪类也可以运用于图片
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

html:
<img src="img.png" alt="this is picture" />

注意:
在 IE 中，必须添加 <!DOCTYPE>，这样才能将
:hover  选择器用于除了 <a> 之外的其它元素

2.设置透明背景
css:
div.transbox{
  width: 338px;
  height: 204px;
  margin:30px;
  padding:0;
 
  border: 1px solid black;
  filter:alpha(opacity=60);      /* for IE */
  opacity:0.4;                   /* CSS3 standard */
}  

html:
<div class="transbox"><p>
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p></div>

CSS笔记的更多相关文章

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

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

  2. CSS笔记--选择器

    CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...

  3. HTML+CSS笔记 CSS中级 一些小技巧

    水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...

  4. HTML+CSS笔记 CSS中级 颜色&长度值

    颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{co ...

  5. HTML+CSS笔记 CSS中级 缩写入门

    盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15p ...

  6. HTML+CSS笔记 CSS进阶再续

    CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上, ...

  7. HTML+CSS笔记 CSS进阶续集

    元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...

  8. HTML+CSS笔记 CSS进阶

    文字排版 字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性. 语法: body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果 ...

  9. HTML+CSS笔记 CSS入门续集

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代(标签). 语法: p{color:red;} <p> ...

  10. HTML+CSS笔记 CSS入门

    简介: </span>年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的<span>脚本解释程序</span>,作为ABC语言的一种继承. & ...

随机推荐

  1. AngularJS过滤器filter-保留小数，小数点-$filter

    AngularJS      保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...

  2. ExtJS 4.2 业务开发(三)数据添加和修改

    接上面的船舶管理业务,这里介绍添加和修改操作. 目录 1. 添加操作 2. 修改操作 3. 在线演示 1. 添加操作 1.1 创建AddShipWindow.js 在业务中的view目录下创建一个Ad ...

  3. DBA成长路线

    从开发转为数据库管理,即人们称为DBA的已经有好几年,有了与当初不一样的体会.数据是企业的血液,数据是石油,数据是一切大数据.云计算的基础.作为DBA是数据的保卫者.管理者,是企业非常重要的角色.对于 ...

  4. dagger2系列之依赖方式dependencies、包含方式(从属方式)SubComponent

    本篇是实战文章,从代码的角度分析这两种方式.本文参考自下列文章: http://www.jianshu.com/p/1d42d2e6f4a5 http://www.jianshu.com/p/94d4 ...

  5. C# BackgroundWorker 详解

    在C#程序中,经常会有一些耗时较长的CPU密集型运算,如果直接在 UI 线程执行这样的运算就会出现UI不响应的问题.解决这类问题的主要途径是使用多线程,启动一个后台线程,把运算操作放在这个后台线程中完 ...

  6. 【JavaScript】javascript中伪协议(javascript:)使用探讨

    javascript:这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的解释器运行. 比如下面这个死链接: <a href="javasc ...

  7. 最新Angular2案例rebirth开源

    在过去的几年时间里,Angular1.x显然是非常成功的.但由于最初的架构设计和Web标准的快速发展,逐渐的显现出它的滞后和不适应.这些问题包括性能瓶颈.滞后于极速发展的Web标准.移动化多平台应用, ...

  8. Entity Framework 6 Recipes 2nd Edition（9-3）译->找出Web API中发生了什么变化

    9-3. 找出Web API中发生了什么变化 问题 想通过基于REST的Web API服务对数据库进行插入,删除和修改对象图,而不必为每个实体类编写单独的更新方法. 此外, 用EF6的Code Fri ...

  9. 【翻译】用AIML实现的Python人工智能聊天机器人

    前言 用python的AIML包很容易就能写一个人工智能聊天机器人. AIML是Artificial Intelligence Markup Language的简写, 但它只是一个简单的XML. 下面 ...

  10. php中使用fsockopen实现异步请求

    php执行一段程序,有可能几毫秒就执行完毕,也有可能耗时较长.例如,用户下单这个事件,如果调用了些第三方服务进行发邮件.短信.推送等通知,可能导致前端一直在等待.而有的时候,我们并不关心这些耗时脚本的 ...