CSS知识点大全

什么是CSS

CSS(Cascading Style Sheets) 层叠样式表 是用于修饰文档的（可以是标记语言HTML ，也可以是XML或者svn）的语言，可以将文档以优雅的新方式呈现给用户。CSS声明（CSS declarations）key = value 键值对的形式backgronud-color: red;

选择器

1.标签选择器div {声明块}2.类选择器<div class=\"one\">...</div>.one {...}3.id选择器<div id=\"one\">..</div>#one {...}4.普遍选择器* {...}5.层次选择器后代选择器子代选择器相邻同胞选择器一般同胞选择器6.多选择器多个选择器并列使用  使用,(逗号)分割7.组合选择器多个选择器组合使用。  div.one 表示class为one的div元素。8.属性选择器[atter] 选择具有atter属性的元素，无论该属性的值是什么[atter=val]  选择具有atter属性，并且atter的值为val的元素[atter~=val] 选择具有atter属性，并且atter的值之一为val的元素[atter^=val] 选择具有atter属性，并且atter值的开头为val的元素[atter$=val] 选择具有atter属性，并且atter值的结尾为val的元素[atter*=val] 选择具有atter属性，并且atter值包含val的元素。9.伪类选择器表示子元素的:only-child:first-child:last-child:nth-child(n):first-of-type元素状态有关的:link   未被访问的状态:visition   被访问过的状态:hover  鼠标悬停状态:active 鼠标按下未弹起状态10.伪元素选择器::before    在元素内容之前插入块元素::after     在元素内容之后插入块元素::first-letter::first-line

CSS 注释

/**/  注释不能嵌套

CSS如何作用到HTML

1.内部样式表<div style=\"color:red ...\">2.内联样式表<style>选择器 {...}</style>3.外部样式表link标签引入<link rel=\"stylesheet\" href=\"style.css\">@import url（）;方式引入link标签引入css和@import方式引入的区别：1.所属范围不同link标签属于html 除了可以引入CSS文件 还可以定义Rss等其他事务，@import属于Css范畴，只能导入css文件2.加载顺序不同link标签在加载HTML之前会先加载CSS文件 因此显示出的页面就是带有样式的效果@import在加载完HTML之后再装载css文件 因此如果网页大的时候会先显示无样式的页面 ，然后再出现网页的样式。3.兼容问题link是XHTML标签，无兼容问题，而@import是再css2.1版本提出的，低版本的浏览器不支持

级联

级联表明CSS规则的顺序问题 在所有选择器中某个选择器定义是否能够胜出（优先级）取决于三个元素：importance （重要性）  Specificity（特性值） Source order（源码顺序）importance（重要性）!import声明： 优先级最高，不计入特性值，因为它会改变级联的工作方式，所以一般不建议使用（会使调试变得困难）Specificity （特性值）声明在style属性中   1000     <div style=\"....\"></div>id选择器            100类选择器、属性选择器、伪类选择器  10元素选择器、伪元素选择器          1Source order（源码顺序）如果特性值相同的情况下 ，按照就近原则 ，哪个靠下就选择哪个样式。

关于继承

css中有些规则将会默认被子元素继承，有些则不会。可被继承的属性：font:组合字体font-family：字体系列font-weight：字体粗细font-size：字体大小font-style：字体风格text-index：文本缩进text-align：文本水平对齐line-height：行高color：文本颜色visibility：元素可见性  （所有元素可以继承）cursor：光标属性  （所有元素可以继承）内联元素可以继承的属性字体系列属性除了text-index text-align之外的文本系列属性块级元素可以继承的属性text-index text-align不能继承的属性display: 规定元素生成的盒子的类型text-decoration：规定添加到文本的装饰text-shadow：文本阴影效果white-space：空白符的处理盒子模型的属性：width height margin padding border背景属性：background定位属性：float clear position top right bottom left min-width min-height max-width max-height overflow clip z-indexcss提供了三个特殊值来处理继承问题1.inherit 继承父元素的样式2.initial 不继承，浏览器的默认样式3.unset 不设定 ，表现该规则本来的特性，如果该规则具有继承属性则继承，否则不继承。

文本样式

color ：指定字体颜色font-family：指定文字字体font-style：取值 normal（默认值）按照正常字体显示italic 斜体字体样式oblique 倾斜字体样式（模拟倾斜）font-weight：设置字体粗细 normal 正常  bold 加粗  100-900数值表示  400正常  700加粗text-transform： 设置或取消字体改变取值 none  防止任何改变uppercase  将文本转换为大写lowercase  将文本转换为小写capitalize 将所有单词第一个字母转换为大写full-width：转换为类似于一个等宽字体text-decoration：设置或取消文本修饰取值 none   取消所有文本修饰underline 为文本添加下划线overline  为文本添加上划线line-through 为文本添加删除线text-shadows：设置或取消文本阴影语法：text-shadow：h-shadow v-shadow blur color；取值：none 取消所有阴影h-shadow 必需 水平阴影位置  允许负值v-shadow 必需 垂直阴影位置  允许负值blur     可选 模糊的距离color    可选 阴影的颜色font-size：指定文字大小

列表样式

list-style-type：设置列表项标志类型取值：none 无标志disccirclesquaredecimallower-romanupper-romandecimal-leading-zerolist-style-position：设置列表标志出现的位置取值：  outside  列表项标志出现在主块框的外部inside  列表项出现在主块框的内部list-style-image：设置自定义列表项标志取值：  url（）  指定图标位置list-sttyle:列表样式速记写法取值： type image positionline-height：设置列表行高取值：绝对单位  相对单位超链接的默认样式cursor：调整光标悬浮到链接上的时候光标的形状outline：调整环绕链接的框text-decoration：自定义设置列表项标志text-align：文本对齐方式

盒子

盒子的属性：width height  设置盒子的宽高  默认为盒子内容的高度padding 内边距border 盒子的边框 默认为0margin 盒子的外边距  ----> 相邻元素的边框会合并## 默认盒子模型使用 box-sizing属性可以改变盒子的模型取值：  content-box 为默认盒子模型border-box 边框盒子模型## 盒子背景样式-backgroundbackground-color    设置背景颜色取值：  关键字#十六进制数rgbrgbahslhslabackground-image    设置背景图片取值：  none 无背景图url（） 背景图片位置路径background-clip     设置背景的覆盖范围取值：  border-box 背景位于边框以内padding-box 背景位于内边距以内content-box 背景位于内容区background-origin   设定背景的起始位置取值;   border-box 背景图片从边框的外边缘开始绘制padding-box 背景图片从内边距的外边缘开始绘制content-box 背景图片绘制在内容区background-position 设置背景图片的初始位置取值：  关键字   坐标background-repeat   设置背景图片的重复方式取值：  repeat  重复 切割背景图片space   空白分割背景图片 不切割round   将背景图片压缩/拉伸 适应整个背景范围 不切割no-repeat 不重复background-attachment   设置背景图片的固定点取值：  fixed   背景固定在视口上scroll  背景固定在自身元素上local   背景固定在自身元素的内容上background-size     设置背景的大小取值：  cover   背景铺满整个屏幕 （尽量不使用大图覆盖小范围）background          背景设置的速记写法取值： attachment clip color image position repeat## 边框盒子样式border-width    为元素指定边框的宽度取值：  关键字 thin medium thick单位 px emborder-style    为元素指定边框的样式取值:   none   不设置hidden  隐藏dotted  显示一系列的点dashed  显示一系列的小线段solid   显示一条单一的实心直线double  显示两条实心直线groove  边框雕刻效果（与ridge相反）ridge   与groove相反inset   嵌入式边界框（与outset相反）outset  突出的边界框border-color    为元素指定边框颜色取值：  关键字十六进制rgbrgbahslhslaborder-radius   为元素指定圆角边框的半径取值：  绝对值 px mm cm相对值 em remborder-image    为元素设置边框背景border-image-source     用于加载作为边框的图片border-image-slice      用于切割边框图片border-image-repeat     用于设置边框图片重复方式border          边框相关属性的速记写法## 表格样式 tabletable-layout    指定显示表格的盒子 行 列的算法取值：  auto 默认值  table 和 cell的宽度取决于包含在其中的内容fixed   table 的宽度以及列的宽度取决于表格的第一行各列设置的宽度border-collapse 指定表格的边框是合并还是分开取值：  separate    （默认值） 分开模式 表示相邻的两个格子都有独立边框collapse     合并模式，表示相邻的两个格子共享边框caption-side    指定caption坐落在表格的那个位置上取值：  top     标题位于表格的上方bottom  标题位于表格的下方

布局

1.默认文档流（Nomal layout flow）默认文档流就是对页面布局不加任何的修饰 元素自动的布局方式特点：元素在页面中的显示顺序与元素在代码中出现的顺序一致块级元素独占一行空间 宽度默认父级盒子的100% 高度由其内容决定行内元素与其他元素共享一行空间，宽高由其内容决定。2.浮动布局（float）浮动布局的主要用法是让块级元素在一行显示（列级布局），或者让文字在图片周围显示float取值：left    让左浮动元素right   向右浮动元素none    默认值 不浮动inherit 浮动方式继承父元素清除浮动（clear）1.伪元素清除浮动.clearfix:after {content：\"\";display：block；clear；both；overflow：hidden；}2.给浮动元素和非浮动元素之间添加块级元素。3.父元素添加overflow：hidden； （不推荐）3.定位布局（position）取值：static  静态定位 ：是所有元素的默认定位方式，就是将元素定位在默认文档流中。relative 相对定位  对于相对属性 它不会脱离默认文档流 会保留原有的位置，可以通过top bottom left right 属性来确定元素的最终位置，相对于元素本来的位置进行移动。absolute 绝对定位  绝对定位的元素会脱离默认文档流，漂浮在原有位置的上方， 不保留原有的位置  默认情况下的包含块是html，如果父元素中有定位元素，那么包含块就是拥有定位的元素。  两个有绝对定位的元素叠加在一起的时候，可以使用z-index属性来改变他们出现的顺序（z-index的取值为number，值越大越靠上）fixed 固定定位  固定定位和绝对定位相似 但是他们的包含块不同 固定定位的元素是相对于浏览器的视口，同样可以使用top bottom left right属性来进行最终位置的调整 并且不会随着滚动条的滚动而滚动sticky 粘性定位 ，相当于relative和fixed的结合 ，可以通过top right bottom left属性来进行设置距离4.伸缩盒布局（flexbox）display：flex；当前元素就会变成伸缩盒并且所有子元素自动成为父元素的一个成员项（item）子元素会有浮动的效果给父元素设置：flex-direction：row（列布局） / column（行布局）flex-wrap：wrap； 自动换行---->简写flex-flow：row wrap；align-items（在y轴上的位置）取值：stretch （默认值）将盒子在y轴上进行拉伸，直至适应整个伸缩盒子容器center   盒子在y轴中心显示flex-start  在伸缩盒子开始位置显示   盒子顶部flex-end      在伸缩盒子结束位置显示  盒子底部justify-content （在x轴上的位置）取值：flex-start（默认值）在主轴的开始显示flex-end   在主轴的结束位置显示center     在主轴的中心显示space-around  填充空白自适应在主轴中心显示space-between 填充空白自适应在主轴中心显示，但是首尾两个元素距离容器没有空白。给子元素设置：flex：number；<div><p></p><p></p><p></p></div><!-- 1.将父盒子div设置为伸缩盒 -->div {display:flex;}<!-- 3个子元素p各占一份--> 将父盒子平分给3个子元素p -->p {flex:1;}<!-- 第二个子元素p占两份--->相当于将父盒子div平分为四分第一、第三个子元素p各占一份 第二个子元素p占两份。 -->p:nth-child(2) {flxe:2;}如何让子元素在父元素中水平垂直居中1.子元素为行内元素text-align：center；line-height：height；2.子元素为块级元素给父元素设置：display：flex； <!--设置伸缩盒-->justify-content:center; <!--水平居中-->align-items:center;        <!--垂直居中-->给父元素设置 display:flex;给子元素直接设置：margin：auto；给父级元素设置定位属性，子元素设置绝对定位将子元素的top：50%； left：50%；再配合使用margin-top：-height/2； margin-left：-width/2；

动画 (animations)

animations是css3中的一个模块 ，使用 @keyframes 定义如何随着时间的移动改变css的属性值，可以通过指定持续时间 ，重复次数，如何重复来控制关键帧的行为。1.设置动画轨迹@keyframes move {from{//设定元素的开始样式}to{//设定元素的结束样式}}@keyframes move {0%{//设定开始样式}50%{}60%{}100%{//设定结束样式}}2.应用动画div {animation-name:move;  绑定@keyframes中定义的名字}animation-duration：；  设置动画完成一次循环所需的时间 默认值为0s。animation-iteration-count    设置动画重复的次数 默认值为1，不能为负数    infinite表示无限循环animation-delay         设置动画延迟时间 默认值为0sanimation-direction     设置动画方向取值：normal    默认值 正常播放reverse   播放帧的顺序反转，播放的起点为帧的结束alternate 交替反转播放alternate-reverse     交替反转播放 第一次播放时需要反转播放帧。animation-fill-mode     设置填充模式取值：  none    默认值forwards    保留执行期间遇到的最后一个关键帧所设置的计算值backwards   保留执行期间所遇到的第一个关键帧所设置的计算值animation-timing-function   设置动画的速度曲线取值:   ease    默认值ease-in 先慢后快ease-out    先快后慢ease-in-out 先慢后快再慢linear  线性增长（匀速）steps（num） 设置多少步完成一次循环## Transitionscss transitions提供了更改css属性时控制动画速度的方法。取值 ： delay   设置何时开始duration    设置持续时间timing-funtion  设置动画速度语法：div {transitions:<property> <duration> <timing-function> <delay>;}property:指定过度属性  （transitions-property）  取值all可以设置选择所有属性duration：指定过度时长 （transitions-duration）