CSS
1、CSS选择器
1.1 元素选择器
元素选择器根据元素名称来选择 HTML 元素。
p { text-align: center; color: red; }
1.2 id 选择器
根据id 属性来选择特定元素。
#box { text-align: center; color: red; }
1.3 类选择器
根据class属性来选择特定元素。
.box { text-align: center; color: red; }
1.4 通用选择器
选择页面上的所有的 HTML 元素。
* { text-align: center; color: red; }
2、使用CSS的三种方式
2.1 外部CSS
引用外部的CSS文件。
<head> <link rel="stylesheet" href="./css/style.css"> </head>
2.2 内部CSS
内部样式是在 head 部分的 <style> 元素中进行定义。
<head> <style> body { margin: 0; } </style> </head>
2.3 行内CSS
在元素上定义样式。
<h1 style="color:blue;text-align:center;">This is a heading</h1>
3、CSS 背景
3.1 background-color
background-color
属性指定元素的背景色。
颜色通常由以下方式指定:
- 有效的颜色名称 - 比如 "red"
- 十六进制值 - 比如 "#ff0000"
- RGB 值 - 比如 "rgb(255,0,0)"
<!DOCTYPE html> <html> <head> <style> div { background-color: skyblue; } </style> </head> <body> <div> 背景颜色 </div> </body> </html>
3.2 不透明度 / 透明度
opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低,越透明。
使用 opacity
属性为元素的背景添加透明度时,其所有子元素都继承相同的透明度。
RGBA 的透明度:
不对子元素应用不透明度。
RGBA 颜色值指定为:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
div {
background: rgba(0, 128, 0, 0.3)
}
3.3 背景图片
background-image
属性指定用作元素背景的图像。
默认情况下,在水平和垂直方向上都重复图像,以覆盖整个元素。
div {
background-image: url("img/tulip.jpg");
width: 500px;
height: 500px;
}
背景重复 background-repeat:
在水平方向重复:
background-repeat: repeat-x;
在垂直方向重复:
background-repeat: repeat-y;
不重复:
background-repeat: no-repeat;
背景位置:
background-position
属性用于指定背景图像的位置。
body {
background-image: url("img/tulip.jpg");
background-color: aliceblue;
width: 500px;
height: 500px;
background-repeat: no-repeat;
background-position: right top;
}
背景附着:
background-attachment
属性指定背景图像是应该滚动还是固定的(不会随页面的其余部分一起滚动):
background-attachment: fixed;
background-attachment: scroll;
背景属性简写:
body {
background-color: #ffffff;
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}
简写后:
body {
background: #ffffff url("tree.png") no-repeat right top;
}
在使用简写属性时,属性值的顺序为:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
属性值之一缺失并不要紧,只要按照此顺序设置其他值即可。
border-style
属性指定要显示的边框类型。<!DOCTYPE html> <html> <head> <style> p.dotted { border-style: dotted; } p.dashed { border-style: dashed; } p.solid { border-style: solid; } p.double { border-style: double; } p.groove { border-style: groove; } p.ridge { border-style: ridge; } p.inset { border-style: inset; } p.outset { border-style: outset; } p.none { border-style: none; } p.hidden { border-style: hidden; } p.mix { border-style: dotted dashed solid double; } </style> </head> <body> <h1>border-style 属性</h1> <p>此属性规定要显示的边框类型:</p> <p class="dotted">点状边框。</p> <p class="dashed">虚线边框。</p> <p class="solid">实线边框。</p> <p class="double">双线边框。</p> <p class="groove">凹槽边框。</p> <p class="ridge">垄状边框。</p> <p class="inset">3D inset 边框。</p> <p class="outset">3D outset 边框。</p> <p class="none">无边框。</p> <p class="hidden">隐藏边框。</p> <p class="mix">混合边框。</p> </body> </html>
5、边框宽度
<!DOCTYPE html> <html> <head> <style> p.one { border-style: solid; border-width: 5px 20px; /* 上、下边框 5 像素,左、右边框 20 像素 */ } p.two { border-style: solid; border-width: 20px 5px; /* 上、下边框 20 像素,左、右边框 5 像素 */ } p.three { border-style: solid; border-width: 25px 10px 4px 35px; /* 上 25 像素、右 10 像素、下 4 像素、左 35 像素 */ } </style> </head> <body> <h1>border-width 属性</h1> <p>border-width 属性可接受一到四个值(依次对应上、右、下、左边框):</p> <p class="one">一些文本。</p> <p class="two">一些文本。</p> <p class="three">一些文本。</p> </body> </html>
6、边框颜色
<!DOCTYPE html> <html> <head> <style> p.one { border-style: solid; border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */ } </style> </head> <body> <h1>border-color 属性</h1> <p>border-color 属性可接受一到四个值(依次对应上、右、下、左边框):</p> <p class="one">多色的实线边框</p> </body> </html>
7、简化边框属性
border
属性是以下各个边框属性的简写属性:
border-width
border-style
(必需)border-color
<!DOCTYPE html> <html> <head> <style> p { border: 5px solid red; } </style> </head> <body> <h1>border 属性</h1> <p>此属性是 border-width、border-style 以及 border-color 的简写属性。</p> </body> </html>