怎么引入css文件

首先要知道html只是一个框架就如人体的骨架一样没有内在东西,内在东西是通过css样式去为他添加的。

第一种写法:(不推荐使用)将css代码写入标签内部

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

    </head>

    <body>
    <div style=" width: 100px; height:100px; background-color:red; " >

    这是一个div
    </div>
    </body>
</html>

style后面的就是css样式

第二种写法:(不推荐)将css代码写在同一个页面内

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
       <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
       </style>

    </head>

    <body>
    <div  >

    这是一个div
    </div>
    </body>
</html>

第三种写法:(推荐使用)

网页代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
       <link rel="stylesheet" type="text/css" href="../css/index.css" />

    </head>

    <body>
    <div  >

    这是一个div
    </div>
    </body>
</html>

css样式代码

  div{
        width: 100px;
        height: 100px;
        background-color: red;
     }

必须在link标签中的href属性中引入css代码的地址。

原文地址:https://www.cnblogs.com/qf928/p/11399949.html

时间: 2024-10-18 23:49:50

怎么引入css文件的相关文章

vue中引入css文件

两种方式引入css文件,一种是直接在main.js中引入,即下面这种写法: import 'element-ui/lib/theme-default/index.css' 这种写法适用于此css文件存在于项目中,不适用于通过网址访问的方式引入,会报错.偶试着引入Font Awesome,结果报错: import "http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 而直接在组件中引入却可

引入css文件时,css link和@import区别

这里link与@import介绍的是html引入css的语法单词.两者均是引入css到html的单词. 一.了解基本 1.link语法结构 <link href="CSSurl路径" rel="stylesheet" type="text/css" /> 实际应用截图: 使用link标签截图 Html link标签说明 此标签是引入CSS文件link标签,只要设置好路径即可. 2.@import语法结构 @import + 空格+ u

引入CSS文件的@import与link的权重分析

我很少在CSS用到@import这个标签,最近看到一句话“link方式的样式的权重 高于@import的权重”,感觉不太对,@import只是一个引入外部文件而已,怎么会有高于link的权重呢?于是我比较懒,直接在一个静态页面里面测试了一下,分别把@import的样式放置在link的前面和后面测试,结果发现前面的被后面的link所覆盖,也就是说这个说法是错误的. 因而得出结论(只考虑html中样式文件的优先级): 当@import与内联样式一起时,内联样式>导入样式 除了第一种情况,其它时候以样

引入CSS文件的方式,以及link与@import的区别

一.引入css的方式 在HTML中引入css的方法主要有4种:行内式.内嵌式.链接式和导入式. 1.行内式 <div style="background:yellow;"></div> 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 <html> <head> <style> ..// 此处添加css代码 </style> </head> <

jquery,js引入css文件,js引入头尾

今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始标签下面添加<header></header>,在body结束标签的地方添加<footer></footer>,然后引入common.js文件,还有每行添加注释 例如: <!-- header --> <header></header> <!-- footer --&

vue引入css文件报错Unrecognised input

一个vue项目中用到了swiper插件,引入swiper.css时报错 显示引入的css文件Unrecognised input ,在文件的line4,column12 . 其实是引入位置不对,样式文件应该在style标签中引入而不是script下引入 解决问题! 原文地址:https://www.cnblogs.com/changzz/p/10478597.html

vueJS-单文件组件引入css文件

main.js 引入css样式 import './assets/style.css' 如果报错 1.安装 https://github.com/webpack-contrib/style-loader npm install style-loader --save-dev / cnpm install style-loader --save-dev 2.配置webpack.config.js { test: /\.css$/, use: [ { loader: "style-loader&qu

webpack2.0 引入.css文件报错解决方法

main.js文件引入 import './my-style.css' webpack.config.js 文件 之后莫名其妙报错: 解决方法 注意 先style再css,顺序问题,一定不能颠倒 { test: /\.css$/, loader: 'style-loader!css-loader' } 原因是应该是版本迭代的问题

bootstrap内容web项目引入css文件的问题

1.当引入的是压缩文件的时候,红色标记内的文字没有出现样式 . 当本地导入的不是压缩文件的时候,样式立马就出来了!!!!!!!!