CSS3的属性和值
CSS3属性和值是用于定义和控制HTML元素样式的基本组成部分。属性是样式规则的关键字,用于设置特定的样式效果,而值是赋予属性的具体效果参数。
1. CSS属性
CSS属性用于指定HTML元素的样式。每个属性都有其特定的功能,例如设置颜色、字体、边距、布局等。常见的CSS属性包括color
、font-size
、margin
、padding
、border
、width
、height
等。
2. CSS值
CSS值是赋予CSS属性的具体数值或参数,用于定义该属性的具体效果。例如,color
属性可以有red
、#ff0000
、rgb(255,0,0)
等值。
常见CSS属性及其值的示例
1.颜色属性:
color
:设置文本颜色。
p { color: red; /* 使用颜色名称 */ color: #ff0000; /* 使用十六进制值 */ color: rgb(255, 0, 0); /* 使用RGB值 */ }
background-color
:设置背景颜色。
div { background-color: lightblue; /* 使用颜色名称 */ background-color: #add8e6; /* 使用十六进制值 */ background-color: rgba(173, 216, 230, 0.5); /* 使用RGBA值 */ }
2.字体属性:
font-size
:设置字体大小。
h1 { font-size: 24px; /* 使用像素值 */ font-size: 2em; /* 使用相对于父元素字体大小的倍数 */ font-size: 150%; /* 使用相对于父元素字体大小的百分比 */ }
补充使用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS中的属性和值的使用</title> <style> /* *在计算机中除了可以表达 乘法之外,还可以表达 选择所有 */ *{ /* ctrl+/ 生成注释: 外间距 */ margin:0; /* 内间距 */ padding:0; } .box{ /* background就是属性,右边是值 */ background:#eee; } h1{ background:red; } </style> </head> <body> <!-- 所有的HTML标签用的时候都会自带间隔 --> <!-- 容器,什么效果都没有 --> <div class="box"> <h1>71muke网上线了</h1> <p>这是一段!!</p> <p>这是一段!!</p> <p>这是一段!!</p> <p>这是一段!!</p> <p>这是一段!!</p> </div> </body> </html>
除此之外还有文本属性、布局属性,后续都会学习。
需要购买本课才能留言哦~