畅读版
CSS是用来修饰网页元素的,其中重要的知识点就是属性和定位,属性譬如文字的字号\字体\颜色,文本的对齐方式\修饰元素\是否加粗;定位用来指定譬如属性的有效范围,可以通过标签名称指定,也可以通过类名和id名称来指定,标签与标签之间可能是并列关系,也可能是嵌套关系,我们可以通过父子后代来指定嵌套关系的元素,可以通过序列,交集,并集指定并列关系的元素,通过属性值来指定属性为某一值的元素,通过通配符遍历所有元素.
元素的定位有三大特性,分别是继承性,层叠性,优先级,用于表示当多个定位器指向同一个元素时,元素应该听哪一个定位器的.
元素的显示模式有三种分别是行内\块级\行内块级,行内对应元素的内容元素,块级对应元素的容器元素,内容元素中只有p是默认的块级元素,其余都是行内元素,三种显示模式之间可以相互转换,其中块级元素独占一行可以设置宽高,行内元素相反.
属性中经常用的有背景,包括背景颜色,背景图片,背景平铺方式,背景定位,相对于插入图片,背景图片的检索优先级低,但是能设置定位,要学会利用FW分析精灵图.
盒模型时完成网页布局的重要元素,有内容宽高,内边距,边框,外边距组成,一般添加盒模型的边框和内边距时,元素的宽高会跟着变化,要想元素的宽高始终与内容的宽高一样,就要设置box-sizing属性,这也是经常用到的.
之前说的三种显示模式都属于标准流,实际上标准流中除了行内\块级\行内块级三种外,还有flex这种,经常用于调剂列表元素胡列表之间的水平等间隔排版,需结合另外一个语句一起使用.除了上述说的四种标准流,还有浮动流,浮动流会脱离标准流,贴靠同一边的元素,如果后面贴靠的元素宽度超过父元素的宽度,就会出现换行的现象,贴靠到父元素一侧,如果宽度还是大于父元素就不用管了.在设置浮动流时margin-top属性会失效,我们如果想在上下两行中间流出间隔,有很多方法,最常用的是给第一个元素设置overflow属性.
要使元素在想要的为止除了前面讲的标准流和浮动流外还有定位流,定位流分为绝对定位,相对定位,固定定位,和静止定位,其中静止定位就是指元素默认的定位方式,绝对定位默认是相对于body定位,如果祖先元素有定位元素,就改成相对于离得最近的祖先定位元素定位,绝对定位会脱离标准流,不分行内块级元素,相对定位不会脱离标准流,是相对于标准流中原来的位置定位,分行内块级元素,固定定位不会随网页的下拉而移动.
过渡模块是通过鼠标的状态触发动画,三要素包括要素状态的变化,转化要素,转化时间,还可以设置转化的速度,是来回或者单向.
动画模块是自动播放的,不需要触发,包括变化要素,变化内容,变化时间,变化速度,延迟时间,动画次数.
2D转换模块和3D转化模块是CSS3新加的特性,2D转换模块有旋转,移动,形变,形变默认的中心点是中心位置,可以通过转换定位属性重新设置中心点,只有在父元素中设置透视属性,才能看到近大远小的效果,如果相体现3d效果就必须活用2D属性,并且在父元素中设置3d-preserve属性.
编写网页中最常用的就是元素居中,盒子居中,我们用margin属性设置,文字居中我们用text-align属性设置,如果插入图片大于父元素,上述两种居中方法失效,我们用子绝父相的定位方法,也可以用父元素设置text-align属性,子元素设置margin:0 -100%来设定.
编写网页的步骤是先创立站点文件夹,在创立其下的子文件夹和子文件,一般一个网页占用一个css文件和一个html文件,图片/css外联文件/js文件夹是必须的子文件,css文件一般通过link连接到html文件,这样的好处是先加载样式在加载元素,便于读写,然后通过创建html文件,编写注释,理清编程思路,消除元素默认样式,这里body也就是整个网页的默认样式,一般包括默认字体大小,颜色,网页背景颜色.然后就通过盒子模型创建网页的垂直布局,通过浮动元素常见网页的水平布局,通过定位元素创建多个背景图片叠加.在通过过渡属性设置一些触发动画效果.
我们对于文件的切换只要按住ctrl键选中定位的元素就可以切换到外联的CSS文件了,定位技巧除了巧用类名和祖先元素外,还用通过设置公用属性类名来简化样式的编写.
助记视频:
CSS
网友评论