常用笔记-CSS

使用CSS样式的方式
内链式样式表：
嵌入式样式表：需要将样式放在中
引入式样式表：




选择器优先级 id>class>html




子类: body div{   }
多个选择器: div,p,a{  }




css颜色:
{color:red;}
{color:#f00;}
{color:rgb(255,0,0);}
{color:rgba(255,0,0,1);}最后一位为透明度（0-1）




font-size
px:设置一个固定值
%:父元素字体的百分比
larger:比父元素更大
smaller:比父元素更小
inherit:和父元素相同




{background-image:url(image/bg.gif)}
background:背景颜色，url地址，重复，位置
background:#f60 url(images/bg,jpg) no-repeat top center




横向排列
text-align:left;
text-align:center;
text-align:right;




文本行高
line-height:10%; /*基于字体大小的百分比行高*/
line-height:20px; 




首行缩进
text-indent:10%; /*父元素的百分比*/
text-indent:20px;
text-indent:inherit;  /*继承父元素*/




字符间距
letter-spacing:normal;
letter-spacing:-10px;
letter-spacing:inherit;  /*继承父元素*/




单词间距
word-spacing:normal;
word-spacing:px;
word-spacing:inherit;/*继承父元素*/




文字方向
direction:ltr;/*从左到右*/
direction:rtl;/*从右到左*/
direction:inherit;/*继承父元素*/




文本大小写
text-transform:none;
text-transform:capitalize;/*每个单词首字母大写*/
text-transform:uppercase;/*都大写*/
text-transform:lowercase;/*都小写*/
text-transform:inherit;




盒子模型
padding会增加容器自身的宽高




定位方式position
relative正常定位，根据当前位置
absolute根据父元素进行定位
fixed根据浏览器窗口进行定位
static没有定位
inherit继承 




内联元素宽高不起作用




即便子元素的z-index小于父元素，子元素也不会显示在父元素的后面




在浮动后紧邻的元素会受到浮动的影响，跑到浮动元素的后面
清除浮动
clear:both;
为了消除浮动元素带来的影响，也可以在浮动元素后添加个无内容的元素，在该元素上设置clear:both;




判断IE

不等于：
小于：
大于：
小于等于：
大于等于：
大于和小于之间：
或：
仅：




去掉所有元素的margin和padding
*{margin:0;padding:0}

css3中追加了三个属性选择器
[att*val]
如果元素用att表示的属性值中包含val指定的字符，那么该元素使用这个样式
[att^=val]
如果用att表示的属性的属性值的开头字符为val指定的字符的话，那么该元素使用这个样式
[att$=val]
如果元素使用att表示的属性的属性值的结尾字符为用val指定的字符，那么该元素使用这个样式 (如果是数字结尾，那至少要选到第一个非数字，符号要转义)
例:
[id*=aa]{
    // id属性中包含字符aa的元素
}




类选择器
p.left{


}

test

类选择器和伪类选择器的区别是，类选择器我们可以随便命名，而伪类选择器是css中已经定义好的选择器
常见的伪类选择器
a:link{}, a:visited{}, a:hover{}, a:active{}




伪元素选择器
first-line用于向某个元素的第一行文字使用样式
first-letter向某个元素的文字的首字母或第一个中文使用样式
before在某个元素之前插入一些内容
after在某个元素之后插入一些内容
div:before{
    content:"hello world";
}




结构性选择器：
root将样式绑定到页面的根元素中
not相对某个结构元素使用样式，但又想排除这个结构元素下面的结构元素，让它不使用这个样式
empty指定当元素中内容为空白时候的样式
target对页面中某个target元素使用样式，该样式在用户点击了超链接后，目标元素会使用此样式


:root{
    background:red;
}
body *:not(div){
    background:red; //body 里面除了div元素以外都应用这个样式
}
:empty{
    background:red; //比如

就会是红色，

aaa

就会是默认的白色
}
:target{
    background:red; //click在用户点击后，锚点aaa的元素背景颜色会变红
}




选择器
first-child第一个元素的样式
last-child最后一个元素的样式
nth-child(n)选择器匹配正数下来第N个子元素
nth-child(odd)选择器匹配正数下来第奇数个子元素
nth-child(even)选择器匹配正数下来第偶数个子元素


div:first-child{}
div:last-child{}
div:nth-child(3){} //最小的数为1
div:nth-child(odd){} //奇数子项都会应用此样式
div:nth-child(even){}//偶数子项会应用此样式


nth-last-child(n)倒数
nth-last-child(odd)
nth-last-child(even)


由于nth-child和first-child等的第几个不会区分元素类型，所以要用nth-of-type,它只会对指定类型进行计数
nth-of-type(n)
nth-of-type(odd)
nth-of-type(even)


nth-last-of-type


nth-child(An+B)   A表示每次循环中包含几种样式，B表示指定的样式再循环中所处的位置


//每三个一循环，
li:nth-child(3n+1){}//循环的第一个元素的样式
li:nth-child(3n+2){}//循环的第二个元素的样式
li:nth-child(3n+3){}//循环的第三个元素的样式


only-child只对唯一的子元素起作用


li:only-child{
    background:red;  //只有一个元素的时候会应用
}

   
• 1
//只有这个会有样式

   
• 1

   
• 2

UI选择器的特征就是指定的样式只有当元素处于某种状态时，才起作用，在默认状态下不起作用。
E:hover鼠标指针移动到元素上的时候
例:input[type='text']:hover{}


E:active元素被激活的时候(鼠标对着元素按下按键，但还没松开按键的时候)


E:focus元素获得光标焦点的时候


E:enabled当元素处于可用状态时候的样式


E:disabled当元素处于不可用状态时候的样式


E:read-only当元素处于只读状态时的样式


E:read-write当元素处于非只读状态时的样式


E:checked当radio单选框或checkbox复选框处于选取时的样式


E::selection当元素处于选中状态的时候


E:default当页面打开时默认处于选取状态时的单选框或复选框的样式（只支持火狐）


E:indeterminate当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式（只支持Chrome）


E:invalid当元素内容不能通过使用HTML5的诸如required等属性所指定的检查或元素内容不符合规定时的样式


E:valid当元素内容能通过使用HTML5的诸如required等属性所指定的检查或元素内容符合规定时的样式


E:required指定允许使用required属性，而且已经指定了required属性的input元素，select元素以及textarea元素的样式


E:optional指定允许使用required属性，而且未指定了required属性的input元素，select元素以及textarea元素的样式


E:in-range指定当元素的有效值被限定在一定范围内且实际输入的值在该范围内的样式


E:out-of-range指定当元素的有效值被限定在一定范围内且实际输入的值不在该范围内的样式




通用兄弟选择器：用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式
<子元素>~<子元素之后的同级的兄弟元素>{}
例
div~p{
    background:red; //和div同级别的但在该div之后的元素的样式,这里只有333会是红色
} 
   

111

   

       

222

   

   

333

使用before选择器在元素前面插入内容，使用after在元素后面插入内容，在选择器content属性中定义要插入的内容
h2:before{
    content: "hello world";
}


排除一些不需要插入内容的元素，对content属性追加一个none的值
h2.text:before{
    content:none;
}


使用before或者after除了可以给元素插入文字，还可以插入图片，需要使用url指定图片的路径
h2:before{
    content:url(1.gif);
}


在content属性中使用counter属性来添加连续的编号
h2:before{
    content:counter(计数器名称aa);
}
h2:{
    counter-increment:计数器名称aa
}


在项目编号中追加文字
h2:before{
    content:'第'counter(计数器名称aa)'页';
}


不仅可以追加数字编号，还可以追加字母编号或罗马数字编号
h2:before{
    content:counter(计数器名称aa,编号种类);
}
可以使用list-style-type属性的值来指定编号种类，比如指定大写字母编号时，使用'uper-alpha'属性，指定大写罗马字母时使用'uper-roman'


编号嵌套，编号重置
我们可以在大编号中嵌套中编号，在中编号中嵌套小编号
使用counter-reset来重置编号


中编号嵌入大编号
h2:before{
    countent:counter(大编号计数器)'-'counter(中编号计数器);
}


可以使用content属性的close-quote属性值在字符串的两边添加诸如单引号和双引号之类的文字字符
open-quote开始符号
close-quote结束符号
h1:before{
    content:open-quote;
}
h1:after{
    content:close-quote;
}
h1{
    quote:"("")";
}
假如h1中是test，加上样式后就会变为(test)




在CSS3中我们可以使用text-shadow属性给页面的文字添加阴影效果
text-shadow:length length length color;
第一个length表示的阴影离开文字的横向距离
第二个length表示的阴影离开文字的纵向距离
第三个length表示的是阴影模糊半径
color阴影颜色


h1{
    
}
如果要设置多个阴影，用逗号分隔
h1{
    text-shadow:15px 10px 1px black, 13px 12px 2px red;
}




使用word-break属性来设置自动换行处理方法，以下为可选值
normal浏览器默认
keep-all只能在半角空格或连字符处理换行
break-all允许在单词内换行




使用word-wrap属性来实现长单词和URL的自动换行，以下为属性值
normal:浏览器默认，只在半角空格和连字符的地方换行
break-word：浏览器可以在长单词或URL中换行




在页面上显示服务端字体
@font-face{
    font-family:webFont;
    src:url('font/字体名称.otf')format('opentype');
}
可以使用的字体格式otf(字体属性opentype),ttf(字体属性truetype)，eot（字体属性embedded-opentype）
例





在页面上显示本地字体
@font-face{
    font-family:test;
    src:local('ziti');
}




font-variant设置文本是否大小写，以下是取值
normal：浏览器默认样式
small-caps：是用小型大写字母（大写字母的字体更大，小写字母会变为大写，但字体偏小） 
inherit：从父元素继承




font-weight设置文本粗细
normal：浏览器默认样式
bold：使用粗体
bolder：使用更粗的字体
lighter：使用更细的字体
100-900从细到粗，值必须是100的倍数，400等于normal，700等于boldata




font-streth:设置文字是否横向拉伸变形




在CSS3中使用display属性来定义盒的类型，总体来说盒分为block和inline类型
inline-block：属于盒模型的一种，但显示的时候具有inline类型的特点，由于block元素可以设置宽高，而inline元素不行，所以inline-block元素可以像inline元素一样在不占满一行，且可以设置宽高
默认情况下，inline-block类型并列显示的元素垂直对齐方式是底部对齐，如果为了让对齐方式变成顶部对齐的话需要给元素加上vertical-align属性


inline-table：也是将元素变成行内块元素，不过对齐方式是顶部对齐，同样可以通过vertical-align来使其底部对齐


list-item：可以将多个元素作为列表来显示，同时元素的开头加上列表标记。list-style属性默认只能给li元素使用，如果将某个元素比如div设置为list-item,则也可以通过list-style给其添加列表标记


run-in：如果元素后面还有block类型的元素，run-in类型的元素将被包括在后面block类型元素的内部
compact：如果元素后面还有block类型的元素，compact类型的元素将被放置在block类型元素的左边




可以使用表格相关属性来使诸如div之类的元素变为表格   格式（display：属性值）属性值如下
table：代表整个表格
inline-table:
table-row:代表表格中的一行
table-cell:代表表格中的单元格
table-row-group:表格中的所有行
table-header-group：表格中的表头部分
table-footer-group：表格中的脚注部分
table-column：表格中的一列
table-column-group：表格中的所有列
table-caption：表格的标题




通过使用text-overflow属性，可以在盒的末尾显示一个省略号，只有当盒中的内容在水平方向超出盒大小的时候才起效
可以通过将white-space属性的属性值设定为nowrap,使得盒的右端内容不能换行显示，这样就达到了水平方向的溢出效果了




可以通过使用box-shadow来产生阴影效果
box-shadow:length length length color;




使用box-sizing属性来指定针对元素的宽度与高度的计算方法。可以指定用width属性与height属性分别指定的宽度与高度是否包含元素的内补白区域以及边框的宽度和高度
可以给box-sizing属性指定的属性值为context-box属性值与border-box属性值
content-box属性值表示元素的宽度与高度不包括内补白区域以及边框的宽高
border-box属性值表示元素的宽度与高度包括内补白及边框的宽度与高度。
默认值是content-box
简单说就是width的生效范围，比如设置div为300px宽度，到底是算padding,margin,border之后为300，还是不算这些为300，一把来说，对于content-box元素定义宽度，最终的宽度都会大于所定义的宽度
用来控制元素的总宽度




background-clip：指定背景的显示范围。可选值如下
border-box默认值，背景从border区域向外剪裁，超出部分将被裁剪掉
padding-box背景从padding区域向外剪裁，超过padding区域的部分将被裁剪掉
content-box背景从content区域向外剪裁，超过content区域的背景部分将被裁剪掉




background-origin：指定绘制背景图像时的起点
在绘制背景图像时，默认是从padding区域的左上角开始绘制的，但是可以利用background-origin来控制是从边框的左上角开始绘制或者是内容的左上角开始绘制，可选值如下
padding-box:默认值
border-box
content-box




使用background-size来指定背景图像的尺寸，可选值如下
auto默认值，保持图片的原始高度和宽度
length如果设置两个值，则第一个值为宽度，第二个值为高度。如果只设置一个值，则第二个值会为auto  e.g.background-size: 20px 30px;
percentage如果设置两个值，则第一个值为宽度，第二个值为高度。如果只设置一个值，则第二个值会为auto
cover将图片放大以填满整个容器，适用于图片过小，但又不适合使用background-repeat的时候，但这样会导致图片失真，会保持原来的宽高比
contain将图片缩小以填满整个容器，适合图片过大，童谣会保持原来的宽高比




CSS3里的标签元素能被分在不同区域（如让内联span元素跨多行）background-break属性能够控制背景在不同区域显示，以下是可选值
continous默认值，忽视区域之间的间隔空隙，
bounding-box重新考虑区域之间的间隔
each-box对每一个独立的标签区域进行背景的重新划分




一个元素可以显示多个背景图像，还可以将多个背景图像进行重叠显示，
background-image:url(jpg1), url(jpg2), url(jpg3);
图层的排序方法：从上至下指定的（Z轴），第一个指定的文件是放在最上面的，最后一个指定的文件是放在最下面的




background-size：指定背景图像的尺寸
background-break：指定内联元素的背景图像进行平铺时的循环方式




border-radius,圆角，需要指定半径，可以是像素，也可以是百分比
如果指定了两个值，则第一个值控制的是左上角和右下角，第二个值控制的是左下角和右上角
还可以通过border-top-left-radious之类的来单独控制四个角




在CSS3中增加了一个border-image属性，可以让元素的长度或宽度处于随时变化时，变化状态的边框统一使用一个图像文件进行绘制
border-image:url(1.jpg) 上边距 右边距 下边距 左边距




这种方式在业界上统称：识别码、前缀
//-ms代表【ie】内核识别码
//-moz代表火狐【firefox】内核识别码
//-webkit代表谷歌【chrome】/苹果【safari】内核识别码
//-o代表欧朋【opera】内核识别码
用法：
-ms-transform:rotate(7deg); 
-moz-transform:rotate(7deg); 
-webkit-transform:rotate(7deg); 
-o-transform:rotate(7deg); 
transform:rotate(7deg); //统一标识语句，符合w3c标准




使用transform的rotate来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理
-ms-transform:rotate(45deg); //顺时针旋转45度 IE9  deg为单位，角度
-moz-transform:rotate(角度); //Firefox
-webkit-transform:rotate(角度); //Safari Chrome
-o-transform:rotate(角度);  //opera


使用transform的scale实现缩放，它的值是缩放倍率，0.5就是缩放50%，1就是不变，1.5就是150%，可能的值
scale(x,y);//x,y轴都缩放
scaleX(x);
scaleY(y);




使用transform的skew实现倾斜,它的值是角度
skew(x,y);//使其在水平和垂直方向同时扭曲
skewX(x);
skewY(y);




使用transform的translate来移动一段距离
translate(x,y); 
translateX(x);
translateY(y);


如果要一次执行多个动作  transform: translate(30px, 40px) skew(20deg) rotate(45deg); //先移动，然后倾斜，然后旋转


通过修改transform-origin来修改变化的基点，比如旋转默认是以中心为旋转基点，可以改为bottom-left,top-right之类的


CSS3中的transition允许CSS的属性值在一定时间内平滑的过度。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变的时候触发，并圆滑的以动画效果改变css属性值
transition:property duration time-function delay;
property过渡效果的css属性名称，当指定的CSS属性变动时，过渡效果将开始，可选值有none(没有属性会获得过渡效果)，all（所有属性都会获得过渡效果），具体名称列表，以逗号分隔
duration持续时间，单位是毫秒，如果是0，则没有过渡效果
time-function变换的速率变化，可选值有ease（默认值，逐渐变慢），linear（匀速），ease-in（加速），ease-out（减速），ease-in-out（加速后减速），cubic-bezier（自定义）
delay指定当元素发生改变后多久开始执行transition效果
例1：div{
   background-color:green;
   transition: all 1s ease 500; // 由于是all，当它触发一些事件时，比如下面的hover，就会在延迟500毫秒后逐渐变红持续1秒
   transition: background-color 1s ease 500; // 这个写法和上一行，在这个例子里面是一模一样的
}
div:hover{
    background-color:red;
}




transition和animation的区别在于，transition只能通过指定的属性的开始值与结束值，然后通过两属性值之间进行平滑过渡的方式来实现动画效果，所以transition不能实现复杂的动画效果
而animation功能是通过关键帧以及每个关键帧中的属性值来实现更为复杂的动画
@~webkit-keyframes 关键帧合集名称{创建关键帧的代码}
0%~100%{
    关键帧中的样式
}
关键帧创建好后还要在元素的样式中使用该关键帧
元素{
    -webkit-animation-name:关键帧合集名称;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;   //动画效果速度
    -webkit-animation-iteration-count:infinite; //是否循环播放，此处为无限循环
}


column-count属性来进行多栏布局，将一个元素中的内容分为多栏进行显示，需要注意的是，要将元素的宽度设置为多个栏目的总宽度
div{
    column-count:3;//分三栏
}


column-width属性来指定栏目的宽度，从而生成分栏
div{
    column-width:150px;//每150px分一栏
}


column-gap属性指定栏目与栏目之间的距离
div{
    column-width:150px;
    column-gap:50px;//栏与栏之间为50px
}


column-rule栏与栏之间增加分割线
column-rule:solid 1px red;




在CSS3中我们通常使用盒布局来解决使用float和position属性时，多栏底部不对齐的缺点。都会在一行，且有相同的高度，与column-count的区别在于，多栏布局的宽度都是一样的，而盒布局的宽度可以不同


   


   

       

           

               
• asdas

               
• asdas

               
• asdas

               
• asdas

               
• asdas

           

       

       

wqewqewqeqwe

       

           

wqeqwe

           

wqeqwe

           

wqeqwe

       

   

使用弹性盒布局来实现自适应浏览器窗口box-flex,在盒布局下，将需要自适应的模块的宽度去除，然后设置
-webkit-box-flex:1;在使用盒布局的时候，元素的宽度与高度具有自适应
后面的数值是占总份数的几分之几


使用弹性盒布局的时候，可以通过box-ordinal-group属性来改变各个元素的显示顺序，在每个元素中加入box-ordinal-group属性，这个属性是哟弄个一个表示序号的正数值，浏览器在显示的时候会根据序号从小到大显示
-webkit-box-ordinal-group:1;


在使用弹性盒布局的时候，可以通过box-orient来指定多个元素的显示方向
-webkit-box-orient:horizontal; //水平
-webkit-box-orient:vertical; //垂直




使用盒布局的时候，可以使用box-pack和box-align属性来指定元素中的文字，图像，以及元素的水平方向或垂直方向的对齐方式
-webkit-box-pack:可选值如下
start
center
end




media queries的使用方法
@media 设备类型 and （设备特征）{


}
以下为设备类型
    all所有设备
    screen显示屏
    print打印用纸或打印预览
    handheld便携设备
    tv电视机
    speech语音和音频合成器
    braile盲人所用的点子法触觉回馈设备
    embossed盲文打印机
    projection各种投影设备
    tty使用固定密度字母格栅的媒介
大部分设备特性的指定值接受min/max的前缀，用来表示大于等于或小于等于的逻辑
以下为13种设备特性
width 可指定带单位的长度数值，允许使用min/max 浏览器的窗口宽度
height 可指定带单位的长度数值，允许使用min/max 浏览器的窗口高度
device-width 可指定带单位的长度数值，允许使用min/max 设备屏幕分辨率的宽度
device-height 可指定带单位的长度数值，允许使用min/max 设备屏幕分辨率的高度
orientation 只能指定为padding或landscape，不允许使用min/max，浏览器的方向是纵向还是横向，当浏览器的高度值大于等于浏览器的宽度值时，这个特性的portrait
aspect-ratio 比例值，允许使用min/max，浏览器窗口的纵横比，比例值为浏览器窗口的宽度/高度
device-aspect-ratio