CSS基础

引入浏览器私有属性chrome,safari-webkit-firefox-moz-IE-ms-opera-o-@rulesyntax@identifierxxx;@identifierxxx{}常用@media@keyframes@font-faceselectorsimpleselectorlabelselectorp{color:red;}classselector.className{color:red;}idselector.idName{color:red;}wildcardselector*{color:red;}属性选择器/*选择的属性*/[att]{color:red;}[disabled]{color:red;}/*attributeatt=val*/[att=val]{color:red;}[type=button]{color:red;}/*包含属性att=val*/[att~=val]{color:red;}/*选择的属性值以val或val-开头*/[att|=val]{color:red;}/*选择的属性值以val开头*/[att^=val]{color:red;}/*选择的属性值以val结尾*/[att$=val]{color:red;}/*选择的属性值包含val*/[att*=val]{color:red;}伪类选择器a:link{color:gray;}a:visited{color:red;}/*以上两个只用于链接*/a:hover{color:green;}a:active{color:orange;}:enabled:disabled:checkedradiobuttoncheckbox:first-child:last-child:nth-child(even)选择偶数项：nth-??child(3n+1)选择1st,4th,7th...Item:nth-last-child(3n+1)选择项目1、4、7...：only-child选择只有一个子元素的项目：first-of-type:last-of-type同上dd:first-of-type{color:red;}dt:first-of-type{color:red;}:only-of-typespan:only-of-type{color:red;}不常用伪类：empty:root:not():target:lang()伪元素选择器::first-letter选择首字母::firt-line选择第一行::before{content:"before"}在一个元素之前插入content的内容::after{content:"after"}::selection选择被选元素组合选择器后代selector.classNamep{color:red;}子选择器。className>p{color:red;}兄弟selector/*选择h2后面的p标签*/.h2+p{color:red;}/*选择h2后面的p标签*/.h2~p{color:red;}选择器分组h1,h2,h3{color:red;}css优先级内联样式ID选择器类伪类和属性选择器标签选择器和伪元素选择器css优先级变化变化顺序优先级相同，后者会覆盖之前推广优先级选择器在选择器前面添加一个标签选择器！重要字体font-sizepxem基于父元素的倍数百分比粗体|更大胆|lightermostfontsonlySupportnormalboldfont-stylenormalitalicitalicobliqueoblique(forcedoblique)line-heightnormalpxemalignmenttext-alognleftrightcenterjustify两端对齐vertical-alignbaselinesubsubscriptsupertoptext-topmiddlebottomtext-bottompercentagepxtext-indentindentpxempercentage2emindent2wordformatHandlewhite-space是否保留换行，是否合并空格normal合并会自动换行nowrap不换行pre保留换行空格tabpre-wrap在pre的基础上自动换行（常用）pre-lineonlykeepokword-wrapnormalbreak-word长字word-breaknormalkeep-allbreak-all文本修饰text-shadow/*xoffset,yoffset,blurradius*/text-shadow:x,y,radio,#f00;text-decorationunderlineunderlineoverlineupperline-通过中高级设置text-overflowclipellipsis/*一行显示文字，超出显示...*/text-overflow:ellipsis;overflow:hidden;white-space:nowrap;cursormouseshapeurlautodefaultnonehelppointerhand放大放大镜缩小移动强制继承inheritboxmodelmarginborderpaddingcontentmarginborderpaddingcontentwidth|percentage|auto|inheriheighthorizo??ntalcentermargin:0auto;borderborder-widthborder-stylesolid|虚线|dottedborder-colorborder-radius圆角x方向半径4值/y方向半径4值/*round*/border-radius:50%;overflowvisibledefaulthiddenscrollhiddenscrollautoautodisplayscrollbarbox-sizingcontent-box|border-boxbox-shadow/*水平偏移垂直偏移模糊半径阴影大小颜色*/box-shadow:4px6px3px2pxred;/*innershadowhorizo??ntaloffsetverticaloffsetblurradiuscolor*/box-shadow:inset4px6px3pxred;outline大纲，无空格outline-widthoutline-stylesolid|虚线|点状轮廓颜色反转与当前颜色背景相反background-color#fffrgb()rgba()transparent全透明总是在底层background-imageurl()多张图片，先在上层写background-repeatrepeat-x|重复-y|重复|空间|mobilefixedbackground-positionleftrightcentertopbottombackground-position:10px20px;background-position:right10pxtop20px;background-position:20%50%;/*centered*/background-position:centercenter;background-position:50%50%；应用图标精灵linear-gradient()线性渐变/*从上到下*/background-image:linear-gradient(red,blue);/*从下到上*/background-image:linear-gradient(totop,红色，蓝色）；背景图像：线性渐变（到右下角，红色，蓝色）；/*从底部到顶部0度*/背景图像：线性渐变（0度，红色，蓝色）；/*三种颜色*/background-image:linear-gradient(green,red,blue);径向渐变径向渐变背景图像：径向渐变（最近端，红色，蓝色）；background-image:radial-gradient(farthest-side,red,blue);background-image:radial-gradient(closest-corner,red,blue);/*默认尺寸为最远距离*/background-image:radial-gradient(farthest-corner,red,blue);background-image:radial-gradient(circle100px,red,blue);repeating--gradientrepeatedforlinearradialbackground-originrelativepointpadding-boxborder-boxcontent-boxbackground-clipclippingpadding-boxborder-boxdefaultcontent-boxbackground-sizepxpercentageautocoverfillstheentirecontainercontain填满整个容器但宽度和高度不能超过