文章插图
CSS引入有哪些引入方式？通过link和@import引入有什么区别？（* ）CSS引入方式有4种 内联、内嵌、外链、导入外链 link 除了可以加载css之外,还可以定义rss、rel等属性 ， 没有兼容性问题 ， 支持使用javascript改变样式导入@import 是css提供的 ， 只能用于加载css ， 不支持通过javascript修改样式页面被加载的时候 ， link会被同时加载 ， 而@import则需等到页面加载完后再加载 ， 可能出现无样式网页Style 标签写在 body 后和 body 前有什么区别？一般情况下 ， 页面加载时自上而下的 。将style标签至于body之前 ， 为的是先加载样式 。若是写在body标签之后 ， 由于浏览器以逐行方式对html文档进行解析 ， 当解析到写在写在文档尾部的样式表时 ， 会导致浏览器停止之前的渲染 ， 等待加载且解析样式表完成之后会重新渲染 ， 在windows的IE下可能会出现FOUC现象（页面闪烁） 。、什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC当使用@import导入CSS时 ， 会导致某些页面在IE出现奇怪的现象：没有样式的页面内容显示瞬间闪烁 ， 这种现象被称为“文档样式暂时失效” ， 简称FOUC 。产生原因： 当样式表晚于结构性html加载时 ， 加载到此样式表时 ， 页面将会停止之前的渲染 。等待此样式表被下载和解析后 ， 再重新渲染页面 ， 期间导致短暂的花屏现象 。解决办法： 只要在之间加入一个或者元素即可 。CSS选择器CSS选择器的解析是从上到下 ， 从右向左解析 ， 为了避免对所有元素进行解析
可继承的样式：font-size, font-family, color ， ul ， li ， dl ， dt ， dd；不可继承的样式：border, padding, margin, width, heightCSS选择器种类id选择器根据提供的唯一id号快速获取标签对象用于充当label标签for属性的值：用户名： ， 表示单击此label标签时 ， id为userid的标签获得焦点类选择器 (class )标签选择器 (h1)相邻选择器直接相邻元素选择器 (h1+p)普通相邻元素选择器 （h2 ~ h2）子选择器(ul>li)后代选择器(li a)通配符选择器(*)属性选择器（a[rel = “XXX”]）伪类选择器( :hover :first-child ···)伪元素选择器( :before :after ···)分组选择器CSS选择器优先级优先级由高到低 !important > 内联style > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器>继承优先级算法(权重)元素标签（派生选择器）：1class选择符：10id选择符：100内联样式最大：1000元素选择符的权值继承得到的样式的优先级最低比较多个权重相同的CSS选择器优先级 ， 定义的位置决定一切 。从位置上由高到低分为六级：1. 位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权 。2. 位于 <style/>标签中的 @import 引入样式表所定义 。3. 由<link/>标签所引入的样式表定义 。4. 由<link/>标签所引入的样式表内的 @import 导入样式表定义 。5. 用户设定 。6. 浏览器默认 。同位置情况下样式定义最近者为准（优先级相同 ， 选择最后出现的样式）CSS伪类和伪元素CSS伪元素::selection 选择被用户选取的元素部分:first-line 选择元素中的第一行:first-letter 选择元素中的第一个字符:after 在元素在该元素之后添加内容:before 在元素在该元素之前添加内容CSS伪类:root 选择文档的根元素 ， 等同于html元素:empty 选择没有子元素的元素:target 选取当前活动的目标元素:not(selector) 选择除 selector 元素意外的元素:enabled 选择可用的表单元素:disabled 选择禁用的表单元素:checked 选择被选中的表单元素:first-child 选取当前选择器下第一个元素 。:last-child 和 first-child 相反 ， 选取当前选择器下最后一个元素 。:only-child 选取唯一子元素 。如果一个元素的父元素只有它一个子元素 ， 这个伪类就会生效 。如果一个元素还有兄弟元素 ， 这个伪类就不会对它生效 。:only-of-type 选取唯一的某个类型的元素 。如果一个元素的父元素里只有它一个当前类型的元素 ， 这个伪类就会生效 。这个伪类允许父元素里有其他元素 ， 只要不和自己一样就可以 。静态伪类（只用于a标签）:link 指示这个“超链接”（即 a 元素里有一个 href 属性）未被访问:visited 指示这个“超链接”已被访问动态伪类（使用时鼓励“LVHT”顺序）:focus 指示这个元素拥有输入“焦点”——即可以接受键盘输入 ， 或通过某种方式可以激活:hover 指示当鼠标停留在这个元素上时 ， 外观可以作相应改变:active 指示这个元素可以被用户输入“激活” ， 如 ， 用户停留在一个超链接上 ， 当点击鼠标时 ， 这个链接就会“激活”伪类和伪元素的根本区别它们是否创造了新的元素(抽象) 。从我们模仿其意义的角度来看 ， 如果需要添加新元素加以标识的 ， 就是伪元素 ， 反之 ， 如果只需要在既有元素上添加类别的 ， 就是伪类 。伪元素在一个选择器里只能出现一次 ， 并且只能出现在末尾 。伪类则是像真正的类一样发挥着类的作用 ， 没有数量上的限制 ， 只要不是相互排斥的伪类 ， 也可以同时使用在相同的元素上 。伪类用一个冒号表示 :first-child ， 伪元素则使用两个冒号表示 ::first-line(为了向下兼容 ， 现在的浏览器中伪元素选择器用单冒号和双冒号都可以) 。CSS盒模型盒模型分类IE盒模型（怪异盒模型）width = border + padding + content一个盒子的宽度 = width + marginW3C盒模型（标准盒模型）width = content一个盒子的宽度 = width + padding + border + margin转换盒模型Css中默认的盒模型是W3C盒模型 ， 两者间的转换可以通过设置属性box-sizing来转换

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：

• 垂直居中的多种方式 html中div水平居中
• 三个字大气响亮公司的名字 有什么三个字大气响亮公司的名字
• 男性常做三个动作有助强身抗衰
• 华为智慧屏怎么投屏?这三个方法完美解决! 用三个方法解决华为智慧屏投屏
• 乒乓球正手发力的三个重要环节
• 橄榄球在中国的三个阶段
• 这三个方法送给大家 微信聊天记录删了怎么恢复找回来
• 荒天帝娶的三个老婆结局谁最惨 石昊三个老婆的结局
• 安全风险评估的三个要素 信息系统安全风险评估指南
• 四大神兽被谁吃了（上古四大神兽死了哪三个,死在哪里