style= 这样肯定是最优的，但也是最不推荐的。前端标签直接写入。
延伸阅读：读取优先，灵活使用，如大量页面，每页面都要设置。工作繁琐，大量写入增加代码量。不利优化。
<style type="text/css"> 这样属于第二读取方式。直接写在对应的页面。
延伸阅读：每页面都要设置。工作繁琐，大量写入增加代码量。不利优化。
<link type="text/css" href=" 引用CSS文件 第三级。这全局引入
延伸阅读：全局CSS。可以分离代码及外部引入，简单快捷。也是现在都在用的。
CSS代码修改。
有时候在写CSS的过程中，某些限制总是不起作用，这就涉及了CSS样式覆盖的问题，如下。
css的顺序是“元素上的style”>“文件头上的style元素”>“外部样式文件”，但对于样式文件中的多个相同样式的优先级怎样排列，没有详细说明。经过测试和继续搜索，得知优先级如下排列：
样式表的元素选择器选择越精确，则其中的样式优先级越高：id选择器指定的样式>类选择器指定的样式>元素类型选择器指定的样式。所以上例中，#navigator的样式优先级大于current_block的优先级，及时current_block是最新添加的，也不起作用。
对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高。注意，这里是样式表文件中越靠后的优先级越高，而不是在元素class出现的顺序。比如class2在样式表中出现在class1之后：
3如果要让某个样式的优先级变高，可以使用!important来指定：
将border从#navigator中拿出来，放到一个classblock中，而block放到current_block之前：
这属于"多重样式（Multiple Styles）"
多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。
一般情况下，优先级如下：
（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style,例如：
<head><style type="text/css">
/ 内部样式 /
h3{color:green;}
</style>
<!-- 外部样式 stylecss -->
<link rel="stylesheet" type="text/css" href="stylecss"/>
<!-- 设置：h3{color:blue;} -->
</head>
<body>
<h3>测试！</h3>
</body>
在选择器的情况下：
如图:
解释：
1 内联样式表的权值最高 1000；
2 ID 选择器的权值为 100
3 Class 类选择器的权值为 10
4 HTML 标签选择器的权值为 1
利用选择器的权值进行计算比较，示例如下：
<html><head>
<style type="text/css">
#redP p {
/ 权值 = 100+1=101 /
color:#F00; / 红色 /
}
#redP red em {
/ 权值 = 100+10+1=111 /
color:#00F; / 蓝色 /
}
#redP p span em {
/ 权值 = 100+1+1+1=103 /
color:#FF0;//
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>
结果：<em> 标签内的数据显示为蓝色。
CSS 优先级法则：
A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
E 在同一组属性设置中标有“!important”规则的优先级最大；示例如下：
<html><head>
<style type="text/css">
#redP p{
/两个color属性在同一组/
color:#00f !important; / 优先级最大 /
color:#f00;
}
</style>
</head>
<body>
<div id="redP">
<p>color</p>
<p>color</p>
</div>
</body>
</html>
语法：元素style样式名=样式值
注意：如果CSS的样式名中含有-，这种名称在JS中是不合法的，比如 background-color 。需要将这种样式名修改为驼峰命名法：去掉-，然后将-后的第一个字母大写，比如 backgroundColor
我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
所以尽量不要为样式添加!important
语法：元素style样式名
通过style属性设置和读取的都是内联样式，无法读取样式表中的样式
语法:元素currentStyle样式名
如果当前元素没有设置该样式，则获取它的默认值
例如： box1currentStylewidth
这个方法是window的方法，可以直接使用需要两个参数
第一个:要获取样式的元素
第二个:可以传递一个伪元素，一般都传null
该方法会返回一个对象，对象中封装了当前元素对应的样式
可以通过对象﹒样式名来读取样式
如果获取的 样式没有设置 ，则会获取到真实的值，而不是默认值
比如:没有设置width，它不会获取到auto，而是 一个长度
注意：通过currentStyle和getComputedstyle()读取到的样式都是只读的，不能修改,如果要修改必须通过style属性
参数：
obj 要获取样式的元素
name 要获取的样式名
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）