中科获平安医院殊荣 https://disease.39.net/bjzkbdfyy/180102/5972953.htmlCSS(层叠样式)由网景公司在年发布,取代了html专门用来渲染页面的样式,文件以.css结尾严重区分大小写毫无容错性css的第一个宗旨是将页面的结构和样式解耦引入css的三种方式内嵌式直接将css代码书写head标签内style:专门用来放置css代码进入此标签内语法改变为css语法type:MIME数据类型,此数据类型囊括了数十种后缀名,专门用来提示浏览器按照何种语法解析因为在h5技术中css和js已经被包含在h5技术序列中则此处可以省略这种引入方式初步的将结构和样式解耦但是解耦不彻底代码重用性不高外联式引入一个外部独立的css文件到本页面rel:表示引入的是一个样式表type:MIME可以省略href:表示独立css文件的引入路径这种引入方式彻底将结构和样式解耦代码重用性较高内行式直接将css代码书写在标签内这种方式将结构和样式再次耦合在一起严重违背了css结构和样式解耦的原则多种引入方式出现冲突时优先级问题行内式内嵌式和外联式谁放在后面会覆盖之前出现冲突的样式选择器(selector)在页面中使用简练的代码快速选择元素标记选择器tagName{直接使用标签名作为选择元素的依据,非常引起误操作}类别选择器.className{直接使用.类名选择元素}id选择器#idName{直接使用#id名作为元素的依据}css层叠特性基本选择器出现冲突时优先级问题id选择器类别选择器标记选择器与顺序无关这里如果添加上内行式,则以内行式为准在css中一般id选择器的属性值尽量在全文中唯一class没有这个限制,css并没有这个语法限制,但是一般页面在使用css后肯定会使用jsjs中存在以下方法document.getElementById(idName)根据id属性值拿取唯一一个元素如果出现id属性名重复的情况则有可能出现错误隐患交集选择器tagNeme.className{}tagName#idName{}由一个标记后面紧跟一个类别或者id则必须满足其中两个条件才可以正确选取并集选择器sel1,sel2,sel3,selN{}多个基本或者复合选择器用逗号隔开只要满足其中任意一个就可以成功选取css继承特性在没有任何冲突的情况下,css中子元素会完全继承父元素的所有css渲染样式效果后代选择器sel1sel2sel3selN{}根据左祖右后代的原则用空格隔开具有家族关系的元素可以精确选取具有特定祖先关系的子元素全局选择器*{}页面元素类型css中将元素分成了多种类型,比较典型的以下几种1)块元素(block)eg:divph1~h6ulliimg*以上元素都是块元素块元素自带换行一行只能书写一个设置对齐方式有效设置盒子模型有效2)内联元素(inline)eg:labelspanaimg*内元素没有换行一行可以存在多个从左向右排列设置对齐方式和盒子模型等参数一律无效img(inline-block)内联快元素本身属于内联元素但是具备块元素的所有特征3)空元素(empty)一般不嵌套内容由一个元素表示特定的结构或者样式brmetahr都属于空元素盒子模型在css中所有的元素都具有四个边框,类似一个个的盒子摆放在页面上通过border属性可以将元素的边框显示出来border:边框类型边框粗细边框颜色;类型solid表示单实线double双实线dotted点状线四个参数表示四个方位margin:上右下左三个参数上(右左)下两个参数(上下)(右左)一个参数(上右下左)浮动ul{list-style-type:none;}重新排列元素的顺序left从左往右right从右向左float:left;margin-right:20px;margin-top:80px;定位相对定位根据元素原先所在位置的左上角进行定位定位之后元素依然保持原先的类型原先的位置依然被占用绝对定位容易盖住下面的元素根据距离元素最近的定位过的父元素的左上角进行定位定位之后的元素不再占用一行原先的位置会被别的元素占用如果没有定位过的父元素则根据body定位
转载请注明：http://www.aierlanlan.com/rzfs/7558.html
