css笔记

浏览数：73 / 时间：2015年06月09日

CSS

?定义：指层叠样式表 (Cascading Style Sheets)

² 样式定义如何显示 HTML 元素

² 样式通常存储在样式表中

² 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

² 外部样式表可以极大提高工作效率

² 外部样式表通常存储在 CSS 文件中

² 多个样式定义可层叠为一

?名词解释

rel 该属性规定当前文档与被链接文档之间的关系。但是，只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持。

值描述

alternate 文档的替代版本（比如打印页、翻译或镜像）。

stylesheet 文档的外部样式表。

start 集合中的第一个文档。

next 集合中的下一个文档。

prev 集合中的上一个文档。

contents 文档的目录。

index 文档的索引。

glossary 在文档中使用的词汇的术语表（解释）。

chapter 文档的章。

section 文档的节。

subsection 文档的小节。

appendix 文档的附录。

help 帮助文档。

bookmark 相关文档。

?语法与规则Rules

1. !important 提升样式规则的应用优先权

用法：div{

Color:red !important; //ie6以下的浏览器有个比较现实的支持问题存在，ie6以下的浏览器不支持权利提升。其他浏览器支持

Color:green;

}

2. /*注释*/

3. @import 指定导入的外部样式表及目标媒体 ,必须在样式表头部最先申明，ie最多引入35条

用法：

<style>

@import url(“aa.css”); @import url(aa.css); @import “aa.css”;

</style>

4.@keyframes 指定动画名称和动画效果。

用法：

@keyframes cc{

From{color:red;};

To{ color:green;}

}

5. @charset 字符集设置

用法：

@charset “utf-8”

6.设置页面容器的版式，方向，边空等。

用法：@page:first{margin:300px;

7.@media

指定样式表规则用于指定的媒体类型和查询条件

用法：

IE8及以下只能实现CSS2中的部分，即只可以设置媒体类型。媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。

示例代码：

@media screen and (width:800px){ … }

@import url(example.css) screen and (width:800px);

<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>列举几种使用方式：

@media all and (width:1024px){

body{color:#f00;}

}

@media all and (device-height:800px){ … }

@media all and (orientation:landscape){ … }

@media all and (device-aspect-ratio:16/10){ … }

@media all and (min-color:1){ … }

@media all and (monochrome:0){ … }

@media all and (grid:0){ … }

8.font-face 设置嵌入html文档的字体

语法：@font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*; <font>; }

<fontsrc> = <url> [format(<string>)]

取值：

<identifier>：字体名称

<url>：此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径

<string>：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype, opentype, embedded-opentype, svg等

<font>：定义字体相关样式

1.字体

电脑字体位置》c/windwos/fonts

Lien-height行高 letter-spacing字间距font-family字体text-decoration：none、underline下划线

Font -style:italic样式斜体 font-weight：400；让标题标签字体不加粗 text-indent 首行缩进cursor:pointer;鼠标变为手型 text-shadow：rgba（111,111,111,0.1）阴影

Background-color：背景颜色padding边距border-radius：10；圆角矩形（css3新功能）font-variant：small-caps>abc<小型大写字母text-transform：uppercase全部大写文字效果变换

Css简写

Font:normal normal 800 20px/30px 宋体；

加粗字号/行高字体

Font-weight：加粗

2.文本样式

Word-spacing单词间距

Word-break强制换行 letter-spacing字间距 line-height行高text-align 文字居中

3.选择器

1，标签选择器2，类选择器 .abc{}用法.class=”abc ttt”3,id选择器#abc用法id=”abc“标签id只能一个。4，div.cc{}控制首先有div标签而且下面有class=cc的控件5.*代表所有标签{filter:gray()ie支持变黑白的（滤镜）}.6,div hl 控制div下面所有hl包括所有

CSS = Cascading Style Sheets 级连样式表主要是控制网页显示效果的。

css样式代码如何编写，在网页如何加入样式代码

1、方法一标签上直接编写以style="" 样式属性编写

缺点：不能重复使用，如果其它地方也要此效果，必须写一边

2、方法二在网页head标签中添加

<style>

input,a{

color:red;

background-color:yellow;

padding:5px;

}

</style>

以上样式代码控制当前网页所有input 标签和a标签的效果

3、方法三直接建立编写样式文件名称为index.css

内容如下

input,a{

color:red;

background-color:yellow;

padding:5px;

}

那个网页如果要使用此文件的样式，在heade标签中加入如下引用

<head>

</head>

则各浏览器的私有写法为：

IE加 -ms-；

Firefox加 -moz-；

Safari和Chrome加 -webkit-；

Opera15以前加 -o-，

Opera15及以后加 -webkit-

css3样式前辍有哪些?

-ms- ie10

-moz- Firefox

-webkit- Chrome Safari

-o- Operal

样式简写缩写

/* font-size:50px;*/

/* 方正隶变简体叶根友钢笔行书升级版*/

font-family: 汉仪娃娃篆;

font-style:italic;

font-weight:800;

line-height:70px;

/* font:正常正常加粗字号/行高字体 */

font:normal normal 800 20px/30px 汉仪娃娃篆简;

文本样式

text-transform 文本转换

word-spacing 单词间距只能用在英文

letter-spacing 字间距

line-height 行高

text-align 左中右对齐

text-indent 缩进

文本装饰

text-decoration:

text-shadow

伪类选择符

伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容；原则上特征是不可以从文档树上推断得到的。

解释：在感觉上伪类可以是动态的，当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来，":lang"在一些情况下也在从文档树中推断出来。

伪类有：:first-child ，:link:，vistited，:hover:，:active，:focus，:lang，:right，:left，:first

何为伪类?就是css内植类css内部本身赋予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿来使用，当然你也可以改变它的部分属性比如：a:link{color:#FF0000;}

CSS很多的建议并没有得到浏览器的支持，但有四个可以安全用在超链接上的伪类。

伪类选择符，之前自后

div{counter-increment:item;}定义编号counter-increment：none | [<identifier> <integer>]+定义编号的id和增量

div:before {

content:counter(item)"、";使用编号

}

a:after{

content:attr(href);链接后面显示其中attr标签是把a标签的属性显示出来

}

定位

相对定位：position：relative 相对原来的位置并且依旧占有以前的位置。

Absolute 绝对定位脱离了标准流让出自己的位置

?特别说明

绝对定位是相对自己是离自己最近父类的那个非标准流盒子而言的，如果最近没有非标准盒子则相对网页左上角

固定定位Fixed 定位效果和absolute 很像但是依据视窗本身，body本身。

继承定位inherit

Padding内边距

Overflow：scroll；出现滚动条、 text-index 首行缩进，word-break：break-all 强制换行

Overflow：auto；等待内容超出时候出现滚动条。

Margin外边距

Margin：0 auto ；如果元素为块元素，则让它居中，并且上下边距为0。如果不是用display：block；指定对象为块元素。

Margin-left；margin-right；margin-top；margin-bottom；文字上下居中text-align

?面试题：图像在正中心

Z-index 层级关系 值越大离我们越近

Css reset 面试题margin padding border=0；

为什么要reset 浏览器众多规则不一样在不同浏览器效果不一样，影响我们开发。

动画

1.变换Transform(vt. 改变，使…变形；转换vi. 变换，改变；转化)

2.过渡Transition

3.动画 Animation

1.变换transform

用法：-webkit-transform:rotate(45deg);

属性：1.none无转换,2.matrix(<属性1>,2,3,4,5,6);是一个变换矩阵，同时控制六个属性。

3.translate(x轴位移，y轴位移);4.translateX(水平位移)，5.translateY（上下位移量）6.rotate(50deg旋转50度);7.scale（x轴缩放，y轴缩放）如果第二个值没有则取第一个值8.scaleX（x轴缩放）9.scaleY（y轴缩放）。。10.Skew（x，y）扭曲略。