CSS样式覆盖问题

html-css019

CSS样式覆盖问题,第1张

请按照下面标准执行即可;

1.行内样式>指定样式>通用class样式>通用未指定CLASS样式

2.例子:

1)<div style="...">aaaaaa</a>这就是指定用style的行内样式;

2)<div id="side" >aaaaaa</div>这就是指定id使用side样式;

3)<div class="ot">aaaaaa</div>这就是指了通用的class为ot的样式;

4)如<body><table><tr><th>这些一开始样式文件就定义好全程的样式,为通用为指定的样式;

最高就是指行内样式,接着就是指定ID的,然后就是CLASS,最后就是未指定通用样式;

主要有局部引入和全局引入。

1、局部引入:在各自vue文件中使用,互不干扰style标签里面的关键字scoped【限位标记】添加这个关键字的作用:将这个style里面的样式都限制在该组件中,不会影响其他的组件。

2、全局引入:作用于全局,让很多内容都使用这个样这个就要回到App.vue中;

步骤一:建立自己专门存放自定义样式的css文件;

步骤二:在App.vue中新建;

步骤三:将css文件通过import‘css文件位置’引入到style标签中,作为全局样式覆盖。