css 样式的导入的三种方式

html-css012

css 样式的导入的三种方式,第1张

1.行内样式 行内样式只能影响它所在的标签，而且总会覆盖嵌入样式和链接样式。

<p style="font-size: 12pxfont-weight:boldfont-style:italiccolor:red">By adding inline CSS styling to the></p>

2.嵌入样式 嵌入样式的应用范围仅限于当前页面。页面样式会覆盖外部样式表中的样式，但会被行内样式覆盖。

<head>

<style type="text/css">

h1 {font-size:16px}

p {color:blue}

</style>

</head>

3.链接样式

<link href="styles.css" rel="stylesheet" type="text/css" />

样式的写法

例子如下

1 ) p {color:redfont-size:12pxfont-weight:bold}

2 ) h1 {color:bluefont-weight:bold}

h2 {color:bluefont-weight:bold}

h3 {color:bluefont-weight:bold}

3）假设，你在写完前面那条规则后，又想只把h3变成斜体，那可以再为h3写一条规则：

h1, h2, h3 {color:bluefont-weight:bold}

h3 {font-style:italic}

有3种方式：

分别如下：

1--行间样式表(内联样式)

<div style="……"></div>

2--内部样式表

<style>

选择器｛属性：属性值｝

</style>

3--外部样式表

<link href="style.css" rel="stylesheet“ type=“text/css”/>

在vue中导入自定义的css文件或js文件

css文件

在main.js中导入公共的css

import '../static/css/common.css' //引入公用css

在页面中引入单独css

<style scoped>

@import '../../static/css/header.css'

</style>

Js文件

自定义js 中写：

function title(t){

alert(t)

}

export {

title //多个方法在此处json中export出去

}

页面中使用：

<template>

<div>

<button class="btn" @click="clickme">click me</button>

</div>

</template>

<script>

import {title} from './js/common.js' //可以选择需要的方法引入

export default {

data(){

return{

}

},

methods:{

clickme(){

title('你点我了')

}

}

}

</script>

或者

import Comjs from './js/common.js' //引入公用js

Vue.prototype.$comjs = Comjs//添加到vue属性中

自定义js 中写：

const comjs = {

}

comjs.title = function (title) {

alert(title)

}

export default comjs

页面中使用：

<template>

<div>

<button class="btn" @click="clickme">click me</button>

</div>

</template>

<script>

export default {

data(){

return{

}

},

methods:{

clickme(){

this.$comjs.title('你点我了')

}

}

}

</script>