第2章CSS样式基本知识
- 内联式CSS样式
- 嵌入式CSS样式
- 外部式CSS样式
- 三种方法的优先级
内联式CSS样式
css样式可以写在哪些地方了?从css样式代码插入的形式基本分为以下三种:内联式、嵌入式、外部式三种;
<p style="color: aqua;">大灰牛博客分享wordpress建站和dedecms等开源程序建站及web前端开发</p><!-- 内联式css样式 -->
嵌入式CSS样式
可以把css样式代码写在html页面中的style标签之间,一般情况下嵌入式css样式写在标签head之间,这种写法针对单一页面方便,但是对于一个包含很多页面的网址,不推荐使用
<!DOCTYPE html> <html> <heade> <title>嵌入式CSS样式</title> <meta charset="UTF-8"/> <link rel="stylesheet" type="text/css" href="style.css"/> <style type="text/css"> h1{font-size: 24px;color:#f90;font-weight: normal;} </style> </heade> <body> <h1>dhnblog.com大灰牛博客</h1> </html>
外部式CSS样式
外部式(外联式)外部样式就是把css代码写在一个以.css为拓展名的文件中,在标签head中不在style标签中,通过link标签链接到html页面中
<link rel="stylesheet" type="text/css" href="style.css"/>
- css文件名称以有意义的英文字母命名
- 其中rel=”stylesheet” type=”text/css”为固定写法,不可更改
- link标签一般写在head内,不写在style标签中
三种方法的优先级
对于同一个元素,我们同时使用三种方法设置css样式,根据优先级:内联式>嵌入式>外部式,其中嵌入式css样式>外部式的前提:嵌入式css样式位置一定再外部式后面,注意根据就近原则(离被设置元素越近,优先级别越高)
转载请注明:大灰牛博客 » CSS视频教程|CSS样式基本知识