HTML css/style/关键字位置不同

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
      background-color:red;    
            width: 100px;
            height: 100px;
            margin-top: 35px;
        }
    </style>
</head>
<body>
<div class="box"  >
</div>
<script>
    var box=document.getElementsByClassName("box")[0];
    box.onclick=function() {
    box.style.backgroundColor = "blue";
    }
</script>
</body>
</html>

两边的backgroundcolor 关键字名字不同 

body  style 里的写法

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 100px; height: 100px;background-color:pink;"></div>
    <script>
      var div= document.getElementsByTagName("div")[0];
      div.onmouseover=function(){
          div.style.width="200px";
          div.style.height="200px";
          div.style.backgroundColor="black";
          div.style.opacity="0.2";
          div.style.filter="alpha(opacity=20)";
      }
    </script>
</body>
</html>
时间: 2024-08-10 02:10:49

HTML css/style/关键字位置不同的相关文章

CSS initial 关键字,用于设置 CSS 属性为它的默认值

CSS initial 关键字 实例 设置 <div> 元素内的文本颜色为红色,但是为 <h1> 元素保持最初的颜色: div {color: red; }h1 {color: initial; } 浏览器支持 除了 Internet Explorer,其他的主流浏览器都支持 initial 关键字. Opera 15 之前的版本不支持 initial 关键字. 定义和用法 initial 关键字用于设置 CSS 属性为它的默认值. initial 关键字可用于任何 HTML 元素

css调整图片位置布局

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"><!--#include file="conn.inc"--><meta name="view

CSS 技术关键字

CSS 技术关键字 元素 替换元素 非替换元素------替换元素和非替换元素的分类是CSS范畴内的,其它的分类都不属于CSS定义的                替换元素和非替换元素的定义是出于“我要不要管你内容区域的样式”考量的. 行内元素 块元素 行内块元素   ---   行内元素.块元素.嵌套规则属于HTML里面定义里的语义范畴.具体而言,行内元素(标签).块元素(标签)的区分只停留在HTML4阶段,HTML5早就已经放弃这种分类方式了.样式和结构/语义的分离体现在,我们说到元素时,指

css style与class之间的区别

问题描述:    网页点击[导出]按钮后,将页面table内容另存成excel文件,却发现无法保存表格样式 分析过程: 1.table表格用class,而不是style.导出时并没有导出class定义,若换成style,将颜色样式直接写在style中,就会导出样式. style是样式,在HTML中用这个来标明属性样式,是css中的内容,而class是类,申明和定义里面的内容,导出页面时并不会导出定义即class所定义的样式. 2.将类定义放到table中也可以导出样式 解决方法-: 将class

css style与class之间的区别,cssclass

问题描述:    网页点击[导出]按钮后,将页面table内容另存成excel文件,却发现无法保存表格样式 分析过程: 1.table表格用class,而不是style.导出时并没有导出class定义,若换成style,将颜色样式直接写在style中,就会导出样式. style是样式,在HTML中用这个来标明属性样式,是css中的内容,而class是类,申明和定义里面的内容,导出页面时并不会导出定义即class所定义的样式. 2.将类定义放到table中也可以导出样式 解决方法-: 将class

css固定元素位置(fixed)

我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置,无论如何滚动滚动条,位置不变,就例如经常看到的弹出广告.方法一般是使用js控制,或者使用css.这里我写的是css的控制方法. 在IE7以上版本及firefox.opera.safari里,都支持css属性"position:fixed",它的作用就是将元素相对于窗口固定位置.代码如下 #ads{    position:fixed;    right:0;    bottom:0;    border:1px solid r

css线性渐变 位置问题

/* 线性渐变 */div.radial { width: 600px; height: 100px; margin: 30px auto; border: 1px #f00 solid; background: -webkit-gradient(linear, 0 0, 0 100%, from(yellow), color-stop(50%, red), color-stop(80%, blue));} <!-- 线性渐变 --> <div class="radial&qu

随机分散位置的文字排版中,利用align-self等CSS属性分配位置

今天拿到一个稿件,其中一个段落是这样的:(当然文字内容被我改了) 拿到这个我是有点崩溃的,我们设计真喜欢玩各种花样.就不能老老实实扁平化排版吗... 好吧,虽然随机,还是可以分出四行出来的.这就有办法了.闲话少说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l

CSS背景图像位置属性background-position百分比详解

百分比值同关键字很接近,但其操作方式不一样.用百分比值来居中一幅背景图像,也很简单: body { background-image;url(beijing.gif); background-repeat:no-repeat; background-position:50% 50%; } 这使得背景图像的中心同其父元素中心对齐.换句话说,百分比值同时应用于元素及其背景图像. 为理解这一概念,让我们桌仔细观察其过程.当在某一元素里居中背景图像时,图像中被描述为50% 50%的点将与元素中同样描述的