CSS如何随机定义网页中的背景颜色

html-css011

CSS如何随机定义网页中的背景颜色,第1张

步骤如下:

1、首先打开电脑上自带的记事本程序,然后输入html网页基本结构语句。<html><body></body></html>

2、由于css样式必须在标签<head></head>之间,因此我们点击<html>后面,输入<head></head>标签。

3、在head标签之间输入样式标签<style></style>,然后定义一些属性,例如

<style type="text/css">

body {background-color: yellow} 定义网页背景色为黄色;

h1 {background-color: #00ff00} 定义h1标签背景色为#00ff00;

h2 {background-color: transparent} 定义h2标签背景色为透明;

p {background-color: rgb(250,0,255)} 定义p标签背景色为rgb值;

p.no2 {background-color: graypadding: 20px} 这个定义class属性为no2的p标签背景色为灰色,并且边距为20px;

</style>

4、然后点击body标签后面输入正文标签内容,例如

<h1>这是KING</h1>

<h2>这是KING</h2>

<p>这是KING</p>

<p class="no2">这个KING设置20内边距。</p>

5、点击记事本菜单中的文件,选择另存为,把内容保存为html网页格式。双击打开预览效果。6、我们可以发现代码中两个同样的<p>标签显示的css样式却不同,区别就在于样式中定义的p.no2,这就是正文代码中class="no2"的优势所在,可以定义个性风格。

我只写了一个字的变色其他也是一样的 利用随机数生成颜色编码 然后改写css

每次刷新 颜色都不一样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>会变色的字</title>

</head>

<body>

<p id="ppp"><b>会变色的字</b></p>

</body>

<script>

var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']

function generateMixed(n) {

var res = ""

for(var i = 0i <n i ++) {

var id = Math.ceil(Math.random()*16)

res += chars[id]

}

return res

}

var num = generateMixed(6)

var p = document.getElementById('ppp')

p.style.color = "#"+num

</script>

</html>