初学者的CSS学习笔记

1.css的概述 1.问题 HTML属性修饰有一定局限，是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点：将css样式定义在HTML标记中 语法：中先增加一对<style></style>,在<style>标记写样式规则 样式规则：由选择器和样式声明组成 3.外部样式 独立于任何网页位置处，声明一个样式文件(.css为后缀)，在文件中声明样式，在使用的网页中引入.css文件。 使用步骤： 1.创建样式表文件（.css） 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <link rel="stylesheet" href="URL../.css"> 3.CSS样式特征 1.继承性 必须是父子（有层叠嵌套的关系）结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式（就近原则） 3.内联样式 4.!important; 绝对优先使用（） 格式 p{ color:red !important; } 2.css选择器 1.选择器的作用 规范页面中那些元素能够使用定义好的样式。 2.选择器详解 1.通用选择器 *{样式} 2.元素选择器 p{样式} 3.类选择器 1. 声明 .class名{样式} 2.引用可以引用多个类名用空格隔开 4.id选择器 #id名{样式} 3.特殊选择器 1.群组选择器 #id ,.class{样式} 1.子选择器 #id>.class{样式} 1.分类选择器 div .class{样式} 4.伪类选择器 作用：匹配元素不同状态的选择器 语法：所有的伪类都是以 : 作为开始 选择器：伪类选择器{样式} 伪类分类 1.伪类链接 :link 匹配尚未访问的超级链接状态 :visited 匹配访问过的元素的状态 2.动态伪类 :hover 匹配鼠标悬停在元素上时的状态 :active匹配鼠标激活时元素的状态 超链接、文本框、 密码框点击的时候，就是active。 :focus匹配元素获取焦点时的状态 文本框 和密码框 5.尺寸与边框 1.单位 1.尺寸单位 1.px 像素 1024*768 2.in 英寸 1in=2.54cm 3.pt 磅 （1pt=1/72in） 4.cm 厘米 5.mm 毫米 6.em 相对父元素乘以倍数 7.rem 相对于根元素(html,body)乘以倍数 8.% 相对单位 2.颜色单位（取值） 1.颜色英文单词 blue,red,green,yellow.... 2.rgb（r,g,b） r:red; g:green; b:blue; r,g,b:0-255 rgb(0-255,0-255,0-255) 3.rgb(r%,g%,b%) 4.rgba(r,g,b,aplha) aplha:透明度，0-1之间的小数，值越大，不透明度越高 5.#rgb 16位数字 ：0-9和a-f 2.尺寸属性 1.作用 改变元素的宽度和高度 2.语法 width:宽度 取值：px % min-width:最小宽度 max-width:最大宽度 height:高度 取值：px % min-height:最小高度 max-height：最大高度 3.页面中允许修改尺寸的元素 1.所有的块元素允许修改尺寸 ex:div,h1-h6,p,ul,li,ol,dl,dt,dd 2.行内元素允许修改尺寸 表单控件元素 3.本身具备width和height属性的元素 ex:img,table 注意：大部分行内元素不能修改 span,a,i,u,b,s 3.溢出处理 当内容多，元素区域小的时候，会产生溢出的效果，默认都是纵向溢出 属性：overflow,overflow-x,overflow-y 取值： 1.visible 可见的，默认值，溢出可见 2.hidden 隐藏的，溢出的内容全部隐藏，不可见溢出 3.scroll 显示滚动条，溢出时可用 4.auto 自动，溢出时自动显示滚动条并且可用 ============================== 9.29 1、边框线 属性：border： 取值： 2、边框倒角 属性：border-radius: 取值： px % 3、边框阴影 属性：box-shadow: 取值： inset h-shadow v-shadow blur spread color; 1、 h-shadow:阴影的水平偏移距离 px 正值为右偏移 负值为做偏移 2、v-shadow:阴影的垂直偏移方向 px 正值为下偏移 负值为上偏移 3、blur :模糊距离，取值越大模糊距离越远 越模糊 4、spread:阴影的大小，指定要在基础阴影上扩充出来的大小距离，取值以px为单位的数值 5、color：阴影颜色 6、inset:将默认外阴影转为内阴影 在第一位 4、轮廓 轮廓指的是边框的边框，绘制于边框外的线条。 属性：outline:width style color; width:宽度 style:线条样式 color:线条颜色 outline:none/0; 取消轮廓 5、框模型 保持设置的宽高 box-sizing:border-box; 1、内边距 padding 取值：left左 right右 top上 bottom下 px (%)少用 取值：auto 则内容居中 2、外边距margin 6、背景颜色 1.背景色 属性：background: 取值：颜色 2.背景图片 属性：background-image：url(); 取值：url() 3.背景图像平铺 属性：background-repeat 取值： 1.repeat 默认值，横向和纵向同时平铺 2..repeat-x 纵向平铺 4.背景图像尺寸 属性：background-size: 取值： 1.width hegiht 2.width% height% 3.cover 将背景图等比放大，直到背景图完全覆盖到元素的所有区域为止 4.contain 将背景图等比放大；直到背景图片碰到某个边缘位置 5.背景图片固定 作用：将普片固定在网页在某个位置，一直在可视区域内，不会随着 background-attachment: 取值： 1.scroll 默认值滚动 2.fixed 固定 6.背景图片定位 作用：改变背景图片的位置 属性：background-position: 取值： 1.x y x: 背景图片水平偏移距离 取正向下右 取负向左 y: 背景图片垂直偏移距离 取值为正向下 取负为上 2.% 0%为起始 50%为中间 ============================================ 9.30 1、渐变 1、什么是渐变 多种颜色平缓变化的一种显示效果 2、渐变的主要因素 色标：一种颜色及其出现的位置 一个渐变由多个色标组成（至少两个） 3、渐变分类 1.线性渐变 一直显得方向来填充渐变色 2。径向渐变 以圆形的方式实现填充的效果 3.重复渐变 将线性渐变或径向渐变重复几次实现效果 4、线性渐变 属性：background-image： 取值： liner-gradient(angle,color-point 1.....); 1.angle 1.关键字 to top:从下向上填充 to right:从左向右填充 to bottom:从上向下填充 to left:从右向左填充 2.角度值 0deg :从下向上填充 90deg:从左向右填充 180deg:从上向下填充 270deg:从右向左填充 2.color-point 色标：颜色及其位置 取值：颜色以及位置的组合，中间用空格分开 ex: red 0% 在填充方向的开始位置用红色 5、径向渐变 background-image:radial-gradient(100px at center center,red,yellow,blue); 6、重复渐变 1.重复线性渐变 background-image:repeating-linear-gradient(angle,color-point 1,color-point 2...); 2.重复径向渐变 background-image:radial-gradient() 2、文本格式化属性 1、指定字体 属性：font-family 取值：用逗号隔开字体名称列表 ex font-fmily:"微软雅黑","Arial","黑体"; 2、字体大小 属性：font-size 取值：以px或pt为单位的数值 3、字体加粗 属性：font-weight 取值： bold：加粗（b，h1~h6） normal:正常 value:400-900整百的数字 4、字体样式 属性：font-style 取值： italic：斜体（i） nromal:正常 5、小型大写字母 将小写字符 变称答谢，但大小与小写字符一致 属性：font-variant 取值： mormal 正常 small-caps 小型大写字符 -------------------------------------------------------------- 10.10日 1、定位 1、堆叠顺序 1、属性 属性：Z-index 取值：无单位的数字，数字越大越靠前（数字越大在上面 ） 2、注意 1、只要已定位元素才能修改堆叠顺序 2、默认堆叠顺序是后来者居上 3、父级元素无法修改堆叠顺序，子级永远在父级之上 2、固定定位 1、语法 position:fixed; 配合着 偏移属性 实现元素的位置初始化 2、注意 1、固定定位元素会变成块级 2、固定定位元素永远都是相对于body实现位置初始化的 3、固定定位元素也会脱离文档流 ==================== CSS3 Core (css3 核心) 1、复杂选择器 1、兄弟选择器 兄弟元素：具备相同父元素的平级的元素称之为兄弟元素 兄弟选择器，只能向后找，不能向前找 1、相邻兄弟选择器 作用：获取紧紧挨在某元素后的兄弟元素 语法：选择器1+选择器2{} 2、通用兄弟选择器 作用：获取某元素后所有满足条件的兄弟元素 语法：选择1~选择器2{} 2、属性选择器 1、 elem[attr] elem:表示任意元素 attr:表示任意属性 作用：匹配页面中所有附带attr属性的elem元素 2、p[class]{} 3、p[id]{} 4、[attr=value] 作用：匹配attr属性值为 value的元素 3、伪类选择器 以学过的伪类： 动态伪类：焦点 :hover,点击 :active,:focus, 链接伪类：:link,:visited 1、目标伪类 作用：突出显示活动的HTML锚点元素。匹配被激活的锚点 语法： selector:target{} div:target{} div作为锚点被激活是的样式 2、结构伪类 作用：通过元素的结构关系匹配元素 1、:first-child 匹配的元素是属于其父元素中的第一个子元素 p:first-child{} 2、:last-child 匹配的元素是属于其父元素中的最后一个子元素 3、 :nth-child(n){} 匹配的元素是属于其父元素中第n个子元素 table tr:nth-child(n); 4、:empty 匹配没有子元素的元素 5、 :only-child 匹配的元素是属于父元素中唯一的子元素 3、否定伪类 将满足指定选择器的元素给排除出去 语法: :ont(selector){} table tr:not(:first-child){ font-size:48px; //除第一行以外所有行的文字大小为48px } 4、伪元素选择器 1、 :first-letter 或 ::first-letter 作用：匹配某个元素的首字符 2、 :first-line 或 ::first-line 作用：匹配某个元素的首行 3、 ::selection 作用：匹配被用户选取的内容 注意：只能修改文本颜色 和 背景颜色 2、内容生成 1、什么是内容生产 使用css动态的向某个元素中插入一段能容 2、伪元素选择器 1、:before 或 ::before 作用：匹配到某元素的内容区域之前

(:before)内容

2、:after 或 ::after 作用：匹配到某元素的内容区域之后

内容(:after)

3、属性 属性：content 作用：相匹配到的位置处增加内容 取值： 1、用 "" 引起来的普通文本 2、 url():生成一副图像 4、解决问题 1、浮动元素父元素高度问题 .clear:after{ content:""; display:block; clear:both; } 2、子元素的外边距溢出问题 1、#d1的最后一个子元素位置处 : :after 2、增加一个 "空"元素 3、必须是一个 块级 或 table 的元素 #d2:before{ content:""; /*解决上外边距溢出属性值加 table*/ display:table; clear:both; } 3、弹性布局(Flexible Layout) 1、什么是弹性布局 弹性布局(Flexible Layout),是一种布局方式， 只要是解决某元素中 "子元素" 的布局方式。为 布局提供最大的灵活性 2、弹性布局的相关概念 1、弹性布局的容器 简称为 "容器"，子元素的父元素，称为“容器” 2、弹性布局的项目 简称为“项目”，要实现布局效果的元素，称为“项目” 3、主轴（main axis） 项目们排列方向的一根轴，就称之为 主轴 如果项目们按x轴排列（横向排列），那么x轴就是主轴 如果项目们按y轴排列（纵向排列），那么y轴就是主轴 4、交叉轴(cross axis) 与主轴交叉的一根轴就是交叉轴 如果主轴是X轴，那么y轴就是交叉轴 如果主轴是y轴，那么x轴就是交叉轴 3、语法 1、flex的容器 将元素变为flex容器后，那么所有的子元素都浆变为flex项目， 都允许按照弹性布局的方式排列如何将元素变为flex容器？？ 属性：display 取值： 1、flex将块级元素变为容器 2、inline-flex :将行内元素变为容器 注意： 1、元素设置为flex容器之后，子元素的 float,clear,vertical-align将失效 2、元素设置为flex 容器之后，子元素的尺寸允许被修改 3、容器的text-align 属性失效 2、容器的属性 1、flex-direction 作用：指定容器的主轴及其排列方向 取值： 1、row 默认值，即主轴为x轴，起点在左端 2、row-reverse 主轴为x轴,起点在右端 3、column 主轴为y轴，起点在顶端 4、column-reverse 主轴为y轴，起点在底端 2、flex-wrap 作用：当主轴排列不下所有项目时如何换行 取值： 1、nowrap 默认值，即空间不够时，也不换换行，项目会自动缩小 2、wrap 换行 3、wrap-reverse 反换行 3、flex-flow 作用：是flex-direction 和 flex-wrap的缩写形式 取值： 1、row nowrap;（默认值） 2、direction wrap; 4、justify-content 作用：定义项目在主轴上的对齐方式 取值： 1、flex-start 在主轴的起点对齐 2、flex-end 在主轴的终点对齐 3、center 在主轴上居中对齐 4、space-between 两端对齐 5、space-around 项目两边的外边距相同，但是中间的元素外边距叠加 5、align-items 作用：项目在交叉轴上的对齐方式 取值： 1、flex-start 交叉轴起点对齐 2、flex-end 交叉轴的终点对齐 3、center 交叉轴的居中对齐 4、baseline 交叉 5、stretch 3、项目属性 该组属性只能设置在某一项目元素上，只控制一个项目， 是不影响容器以及其他项目的效果 1、order 作用：定义项目的排列顺序，值越小，越靠近起点，默认为0 取值：整数数字，无单位 2、flex-grow 作用：定义项目的放大比例，如果容器有足够的剩余空间， 项目将如何放大 取值： 整数数字，无单位 数字越大，占据的剩余空间越多 3、flex-shrink 作用：定义项目的缩写比例，即容器空间不足时，项目该如何缩小 取值： 默认值为1，空间不足时，则等比缩小 取值为0，则不缩小 4、align-self 作用：定义当前项目在交叉轴的对齐方式 取值： 1、flex-start 2、flex-end 3、center 4、baseline 5、stretch 6、auto 继承自父元素的align-items属性 ===================================== 10.13 1、css Hack 1、解决问题 解决 IE 浏览器的兼容性问题 针对不同的浏览器编写不同的css代码 2、CSSHack 的原理 使用css样式的优先级来解决兼容性问题的 3、CSSHack 的实现方式 1、css类内部 Hack 在样式属性名称前或属性后增加前后缀， 以识别不同的浏览器 + ： IE6,7 的前缀 - ：IE6 的前缀 两者都出现时+号支持IE7，-号支持IE6 2、css选择器Hack 在选择器的前面增加前缀以便识别不同的浏览器 *：识别IE6 *+：识别IE7 *div{IE6的显示效果} *+div{IE7的显示效果} 3、HTML头部引用Hack 使用IE条件注释来判断IE浏览器的版本， 从而执行不同的代码 语法： <!--[if 条件 IE 版本号]> 满足条件要执行的HTML代码 改段代码只在IE6以上的浏览器中执行 1：放大 <1: 缩小 负数：物极必反 2、scale(x,y) x:横向缩放比例 y:纵向缩放比例 3、单向缩放scale(x) scale(y); 3、旋转 /*背向的元素隐藏*/ backface-visibility:hidden; 1、什么是旋转 改变元素在页面上的角度 2、语法 属性：transform 取值：rotate(ndeg) n取值为正，顺时针旋转 n取值为负，逆时针旋转 注意： 1、转换原点会影响最终的转换效果 2、元素旋转时是连同坐标轴一起旋转， 会影响后续的位移 4、倾斜 1、什么是倾斜 改变元素在页面中的形状 2、语法 属性：transform 取值： 1、skewX(xdeg); 让元素向着x轴的方向产生倾斜效果， 实际上是改变y轴的倾斜角度值 x 取值为正，y轴逆时针倾斜 x 取值为正，y轴顺时针倾斜 2、skewY(ydeg) 让元素向着y轴的方向产生倾斜效果， 实际上是改变x轴的倾斜角度值 y取值为正，x轴顺时针倾斜 y取值为负，x轴逆时针倾斜 4、3D转换 /*背向的元素隐藏*/ backface-visibility:hidden; 1、透视距离 模拟人的眼睛到3D转换元素之间的距离 属性：perspective 注意：该属性要加在3D转换元素的父元素上 2、3D的旋转 属性：transform 取值： 1、rotateX(xdeg) 以x轴为中心轴，旋转元素的角度 2、rotateY(xdeg) 以Y轴为中心轴，旋转元素的角度 3、rotateZ(xdeg) 以Z轴为中心轴，旋转元素的角度 4、rotate3D(x,y,z,ndeg) x,y,z取值为大于0的数字时，表示该轴要 参与旋转，取值为0则不参与旋转 rotate3d(1,0,0,45deg); 3、过渡 1、什么是过渡 使得css的属性值，在一段时间内平缓变化的效果 2、过渡的语法 - 4个属性 1、指定过渡属性 作用：指定那个属性值在变化的时候需要使用 过渡的效果来体现 属性：transition-property 取值： 1、all （所有） 能使用过渡的属性，一律用过渡 2、具体属性名 ex: 1.transition-property:background;背景颜色变化时用过渡 2.transition-property:border-radius;边框倒角变化时用过渡 3.transition-property:all;所有可以过渡的元素都用过渡 允许设置过渡效果的属性 1.颜色属性 2.取值的数字属性 3.转换属性 - transform 4.阴影属性 5.渐变属性 6.visibility属性，可见属性 2、过渡的时长 作用：指定在多长时间曲线函数 属性：transition-duration 取值：以 s 或 ms 为单位的数值 1000ms = 1s 3、指定过渡速度时间曲线函数 属性：transition-timing-function 取值： 1。ease 默认值，慢速开始，快速变快，慢速结束 2.linear 匀速 3.ease-in 慢速开始，加速结束 4.ease-out 快速开始，慢速结束 5.ease-in-out 慢速开始和结束，中间先加速后减速 4、指定过渡延迟时间 属性：transition-delay 取值：以 s 或 ms 为单位的数值 3、过渡属性编写位置 1、将过渡声明在元素声明的样式中 即管去，又管会 2、将过渡声明在触发的操作中（hover） 只管去，不管回 4、过渡的缩写 transition:property duration timing-function delay; transition:background 2s linear,border-raidus 2s; transition:all 2s; 4、动画 1、什么是动画 使元素从一种样式逐渐变化为另一种样式 即将多个过渡效果放在一起 动画是通过 “关键帧”，来控制动画的每一步 关键帧： 1、动画执行的时间点 2、在该时间点上的样式是什么 2、动画的使用步骤 1、声明动画 为动画起名 定义关键帧 2、为元素调用动画 指定元素调用的动画名称以及各个参数属性 3、声明动画 @keyframes 动画名称{ /*定义该动画的所有的关键帧 */ 0%{ /*动画开始时元素的样式*/ } 25%{ /*动画执行到1/4时元素的样式*/ } 50%{ /*动画执行到1/2时元素的样式*/ } 100%{ /*动画结束时的样式*/ } } 兼容问题 -webk- -o- -ms- @-webk-keyframes 动画名称{ /*定义该动画的所有的关键帧 */ 0%{ /*动画开始时元素的样式*/ } 25%{ /*动画执行到1/4时元素的样式*/ } 50%{ /*动画执行到1/2时元素的样式*/ } 100%{ /*动画结束时的样式*/ } } 4、动画属性（调用动画） 1、animation-name 作用：指定调用动画的名称 2、animation-duration 作用：指定动画执行一个周期的时长 取值：以 s 和 ms 3、animation-timing-function 作用：指定动画的速度时间曲线函数 取值： :ease,linear,ease-in,ease-out,ease-out 4、animation-delay 指定动画的延迟时间 5、animation-iteration-count 作用：指定动画的播放次数 取值： 1、具体数值 2、infinite 6、animation-direction 作用：指定动画的播放方向 1、normal 默认值，正常播放 0%~100% 2、reverse 逆向播放 100%~0% 3、alternate 轮流播放 奇数次数播放时，正向播放 偶数次数播放时，逆向播放 7、动画的简写方法 animation:name duration timing-function delay iteration-count animation-direction; 8、animation-fill-mode 作用：规定动画在播放前或播放后的状态 取值： 1.none :默认值 2.forwards 动画播放完成停留在最后 3.backwards 动画播放器，延迟时间内，动画保存在第一个帧状态 4.both forwards和backwards的结合 9、animation-play-state 作用：指定动画是处与什么状态 取值： 1.paused 暂停 2、running ：播放 CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。 -webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。 现在规范中支持的效果有： grayscale 灰度 值为0-1之间的小数 sepia 褐色　　　　　　 值为0-1之间的小数 saturate 饱和度　　　　 值为num hue-rotate 色相旋转　　值为angle invert 反色　　　　　　 值为0-1之间的小数 opacity 透明度　　　　　值为0-1之间的小数 brightness 亮度　　　　 值为0-1之间的小数 contrast 对比度　　　　 值为num blur 模糊　　　　　　 值为length drop-shadow 阴影 例子 1.灰色 -webkit-filter: grayscale(1); filter: grayscale(1); 2.饱和度 -webkit-filter: saturate(3.6); filter: saturate(3.6); 3.