文本，布局，样式

文本：

  1. 在字体名称中，如果包含多个单词的字体名称，应该用引号包围起来,如果有多个字体选择，用一个逗号以及空格分隔每个字体。
  2. 表单中的select，textarea，input是不会继承父元素的字体设置，强制继续:

input,select,textarea{

font-family:inherit;

}

  1. 创建斜体：font-style：italic（Geneva中没有斜体，粗体字母，只是模拟斜体效果）

取消斜体的继承：font-style：normal

  1. font-weight：

1)     bold是让文本显示为具有平均加粗值得粗体

2)     输入100-900的值，400代表正常，700代表粗体

3)     bolder，lighter

4)     取消粗体：normal

  1. font-size：

1)     em是相对于父元素的（后代继承的是全值而不是相对值），px是绝对的，rem是相对于根元素的eg：html

2)     数字与单位之间不应该有空格

3)     在IE中，如果以像素作为单位，则无法使用浏览器的文本大小选项对文本进行放大或者缩小，em与百分比则可以

4)     大多数浏览器对 body元素设置的默认字体是16像素

  1. line-height：行高= line-height*font-size
  2. 使用font简写属性：

.example{

font: .875em/1.3 "Gill Sans", "Gill sans MT", Calibri;( 875em/1.3代表字体大小以及行高)}

  1. 链接中CSS中的出现顺序是一定的，link，visited，focus，hover，active
  2. 单词之间的间距（字间距）：word-spacing （带单位）

字母之间的间距（字偶距）：letter-spacing （带单位）

  1. 缩进：text-indent （带单位），不仅仅对段落，对其他元素也可以使用该属性，但默认情况下对em、strong、cite等内联元素是没有效果的，可以将他们设置为display：block、display：inline-block，这样就可以使用该属性了
  2. display：block  ：表现出来的特点是会换行，div元素中display的默认值为block，         而span的默认值是inline

display：inline-block  ：此元素会被显示为内联元素，元素前后没有换行符

  1. 内联元素：<a>、<span>…………

块级元素：<p>、<h1>~<h6>、<ul>、<ol>、<dl>、<pre>、<hr>…………

  1. Text-transform：

1)     capitalize让每个单词的首字母大写

2)     uppercase让所有字母大写

3)     lowercase让所有字母小写

4)     none保持原来的样式，可以用来取消继承

背景

  1. background-attachement：设置背景图像是否固定或者随着页面的其余部分滚动。 默认值： scroll 继承性： no

1)     fixed：背景图片会附在浏览器的窗口上，也就是说，即使访问者滚动页面图像依旧会继续显示，图片固定在那

2)     scroll：访问者滚动页面的时候，背景图像会移动

3)     local：只有访问者滚动背景图像所在的元素（不是整个页面），背景图像才会移动

  1. background-repect：有4个值，分别为repect，repect-x，repect-y，no-repect，默认值为repect
  2. html{ min-height：100%；}这是让html的最小高度为浏览器窗口高度的100%，但如果将background-attachement的值定位fixed，效果是一致的
  3. 默认情况下，元素的背景会填充其内容以及内边距所在的区域，并延伸到边框的边缘，可以通过background-clip改变,其值是：

1)     border-box：背景被剪裁到边框盒，包含内容、内边距以及边框（默认值）

2)     padding-box：背景被剪裁到内边距宽，包含内容以及内边框

3)     content-box：背景被剪裁到内容框，包含内容

4)     no-clip：从border区域向外剪裁背景

  1. background-origin：与background-clip的值是相同的，但默认值不同默认值是padding-box，控制元素背景显示的开始位置
  2. 设置空白属性：white-space，然后输入pre，或nowrap

css布局：

  1. 最好在页面结束的位置加载javaScript文件，但HTML5shiv是少有的必须在head中加载javaScript的情况之一（HTML5shiv在html代码中，可以实现在Internet Explorer9之前的IE中为新的HTML5元素设置样式），IE8会忽略他们不原生支持的元素CSS
  2. padding=15px代表的是在上下左右都会产生15个像素。如果要元素的显示宽度等于width属性的值，内容+内边距+边框都包含在里面，（Height的值也是类似的），对元素设置box-sizing：border-box（width等于多少，其display的宽度就是多少。反之，如果要是没有的话，则display的值要等于内边距+外边距+内容）

padding的顺序是：上 右 下 左（3个值代表上，左右，下）

  1. 设置为display：inline的元素会忽略任何width，height，margin-top和margin-bottom设置，不过如果设置为inline-block的元素可以使用这些属性。

display：inline的元素接受padding的设置，但padding-top以及padding-bottom会越界进入到相邻元素的区域

display：none会将元素的内容掩藏起来，但不会对其保留空间，而visibility不同

  1. 控制元素的可见性：visibility，使用它的时候，元素以及其内容出现的位置会留下一片空白区域，值：visible以及hidden，inherit，collapse
  2. 设置元素的宽度以及高度的时候，百分比都是相对于父元素的，其中不是继承属性；（即默认情况下width以及height不包含padding的大小）

在200px宽的空间中，p元素的auto宽度是200px，padding-right是10px，则auto的宽度是190px；

  1. margin：0 auto居中，表示上下都是0，左右都是auto
  2. 默认情况下，IE会对链接的图像添加一个蓝色的边框，img{border:none;}

边框的默认颜色是元素color属性的值

  1. 元素相互接触的两个margin（一个元素在另一个元素的上面），仅使用其中较大的一个，另一个外边距会被叠加。左右外边距不会叠加。（外边距是不继承的）
  2. 使用clear属性清除浮动效果，eg：{clear：left}   ；

浮动元素的display值是block，尽管我们设置为inline，它还是block；

在浮动中：我们希望在相应容器中添加一个背景色，但容器的高度为0（浮动了，所以高度为0），不会显示相应的背景色，解决方法就是让容器自身具有清除浮动的能力，应用claerfix（应用于浮动元素的父元素或者祖先元素），eg：

Css样式中：

.clearfix:before,.clearfix:after{content:” ”; display:table;}

.clearfix:after{clear:both;}

.clearfix{ *zoom:1;}

Html文件中：

Class=“classname clearfix”

  1. 在对元素进行相对定位的时候，会在原来的位置留下空白，position：static（默认值）会覆盖position：relative以及absolute

绝对定位中，不会留下元素的移动后的空白位置

固定定位：position：fixed 当页面滚动的时候，会固定在浏览器窗口中，不会移动（不推荐使用）

      使用z-index属性指定相互重叠元素的叠放位置：值越高显示在越上面，不管该元素出现的顺序，如果在其中有一个将定位设置为了static，尽管它的值最高也没有任何效果

  1. 使用overflow属性控制元素在盒子外部的部分，visible是让盒子里的内容可见，hidden是掩藏，scroll是无论元素是否需要，在元素上添加滚动条，auto是让滚动条仅在访问溢出内容时出现
  2. 垂直对齐：vertical-align：（除了表格以外，仅适用于行内元素）

1)     baseline，是元素的基准线对齐父元素的基准线

2)     middle，元素位于父元素中央

3)     sub，位于父元素下标

4)     super，位于父元素上标

5)     text-top，元素顶部对齐父元素顶部

6)     text-bottom，底部对齐父元素底部

7)     top，顶部对齐当前行里最高元素的顶部

8)     bottom，底部对齐当前行里最低元素的底部

9)     输入元素行高的百分比，或者特定的值

  1. 改变控制鼠标指针cursor

响应式网站：

  1. 只有html中不包含height以及width，图像才有可能变成可伸缩的图像，在样式表中设置max-width：100%
  2. 媒体查询方法：1、@import、2、link中media=“css-classname”

媒体样式表中@media login type feature（login=only或者not；type=screen或print……；feature是可选的，一旦包含他们就要用括号包围他们，并且在括号前面有个and）

  1. 在-webkit-box-sizing：border-box以及-moz-box-sizing：border-box前缀可以在一些旧的android以及ios系统中起作用

Web字体：

  1. 在使用web字体的时候，我们对字体进行重命名，其字体的多个格式命名要一致eg：斜体，粗体……

Css样式补充：

  1. border-radius（圆角）：50px/20px  水平半径/垂直半径；50px  20px  左上方与右下方  右上方与左下方；0 0 0 0 代表顺时针，从左上方开始

在不支持的浏览器中，仅会以方角出现

有时元素的背景会透过圆角，则在border-radius后面添加background-clip：padding-box

  1. 为元素文本添加阴影text-shadow：水平偏移量  垂直偏移量  模糊半径（可选，必须为正数）color（默认值为none）--------不能单独指定4个属性值，具有继承性

可以为单个元素添加阴影样式，每组属性之间用逗号隔开

  1. box-shadow中，如果想要兼容旧版的Android、Mobile Safari、Safari就要加前缀-webkit，其接受6个值，水平偏移量  垂直偏移量  模糊半径（可选，必须为正数）insert关键字（可选，用于扩张或收缩阴影，阴影在盒子内部）  spread（可选，用于扩张或收缩阴影）   color-------------（默认值为none）--------------不具有继承性
  2. 渐变背景：最好有个备选选项，以为那些不支持的浏览器做准备

线性渐变-background：linear-gradient（to right （起点），sliver（开始颜色），black（结束颜色））eg：（120deg（0表示最上方，90表示最左边的点，270是最右边的点），aqua，navy）

径向渐变-radial-gradient（渐变的尺寸 （30px 30px、closest-side或farthest-side或closest-corner或farthest-corner、at top……） at 渐变伸展的区域60px 80px，颜色（可以多种，中间用逗号隔开））

在浏览器中，如果不支持，使用了备选方案，但还是会被下载

  1. 修改元素的不透明度：opacity：0~1（1是默认样式，不透明）

针对旧版的IE有相应的代码-滤镜设置不透明的代码

 

posted @ 2015-12-24 08:30  ^^-^^-  阅读(296)  评论(0)  编辑  收藏  举报