浙江嘉兴建设局网站,外贸网站建设公司方案,备案期间网站怎么关闭,手机网页禁止访问解除CSS的4种引入方式 目录CSS的4种引入方式一、内嵌式#xff1a;CSS写在style标签中二、外联式#xff1a;CSS写在一个单独的.css文件中三、行内式#xff1a;CSS写在标签的style属性中四、导入外部样式五、css引用的优先级六、link和import的区别一、内嵌式#xff1a;CSS写…CSS的4种引入方式 目录CSS的4种引入方式一、内嵌式CSS写在style标签中二、外联式CSS写在一个单独的.css文件中三、行内式CSS写在标签的style属性中四、导入外部样式五、css引用的优先级六、link和import的区别一、内嵌式CSS写在style标签中
提示style标签虽然可以写在页面任意位置但是通常约定写在head标签中
案例代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle/* css注释 *//* 这里写的都是css *//* 选择器{css属性} *//* 选择器查找标签 */p {/* 文字颜色变红色 */color: red;/* 字变大 px:像素 */font-size: 30px;background-color: green;/* width height */width: 400px;height: 400px;}/style/headbodyp这是一个p标签/p/body
/html
二、外联式CSS写在一个单独的.css文件中
提示需要通过link标签在网页中引入
案例代码 my.css文件
/* 选择器{} */
p{color: red;
}html中通过link标签的href属性引入 html代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title!-- 关系样式表 --link relstylesheet href/my.css //headbody!-- css到底能写在哪里 --p这是p标签/pdiv stylecolor: green; font-size: 30px这是div标签/divdiv这是一个div/div
/body
/html三、行内式CSS写在标签的style属性中
提示会配合js使用
案例代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodyp stylecolor: red这是一个p标签/p/body
/html
四、导入外部样式
外部样式 hello.css文件
p{color: red;
}
div{background-color: green;
}html文件
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyleimport url(hello.css);/style/headbodyp这是一个p标签/pdiv这是一个div标签/div/body
/html
五、css引用的优先级
记住就近原则 内部样式、import都出现在HTML的里面就近原则距离修改元素近的优先级高
行内样式内部样式linkimport建议开发中链入外部样式无需改动HTML结构有利于代码的维护开发效率高
六、link和import的区别
1、引入的内容不同
link引入样式文件、图片资源等而import只引入样式文件
2、加载的顺序不同
link在页面加载的同时加载import在页面加载以后加载
3、兼容性不同
link是XHTML标签没有兼容性问题import在css2.1提出低版本的浏览器不支持
4、对js的支持不同
link支持js控制dom去改变样式import则不能支持
