实训第二天:CSS样式
css两种基本选择器
-
class选择器:和点共同使用
<html> <head> <title>CSS样式</title> <style> .i{ font-family:"隶书"; font-size:50px; color:red; } </style> </head> <body> <p class="i">这是一段话</p> </body> </html>
-
id选择器:和#共同使用
<html> <head> <title>CSS样式</title> <style> #i{ font-family:"隶书"; font-size:50px; color:red; } </style> </head> <body> <p id="i">这是一段话</p> </body> </html>
注意:
-
当标签中同时出现了两个id选择器,不允许的,不会出现效果。
<p id="x y ">这是一段话</p>
-
当标签中同时出现两个class标签,这个是允许的。
<p class="x y ">这是一段话</p>
这就是class和id的区别
-
当标签中出现一个id选择器和一个class选择器,那么选择器的优先级是:id选择器>class选择器>标签选择器
<p class="x " id="y">这是一段话</p>
只有y有作用。
-
需要对td进行鼠标点击的操作,onclick是实现鼠标点击操作的属性
<td onclick="this.className='kong'"></td>
这个是联合点来使用
<td onclick="this.id='kong'"></td>
这个是联合#来使用
例:
<html> <head> <title>向你们致敬</title> <style> body{ background:black; } td{ width:400px; height:300px; background:url(1.jpg); } .candle{ background:url(3.jpg) } .a{ background:url(11.jpg) } .b{ background:url(12.jpg) } .c{ background:url(13.jpg) } .d{ background:url(14.jpg) } </style> </head> <body > <table > <tr> <td onclick="this.className='candle'"></td> <td onclick="this.className='candle'"></td> <td onclick="this.className='candle'"></td> <td onclick="this.className='candle'"></td> </tr> <tr> <td onclick="this.className='candle'"></td> <td onclick="this.className='a'"></td> <td onclick="this.className='b'"></td> <td onclick="this.className='candle'"></td> </tr> <tr> <td onclick="this.className='candle'"></td> <td onclick="this.className='c'"></td> <td onclick="this.className='d'"></td> <td onclick="this.className='candle'"></td> </tr> <tr> <td onclick="this.className='candle'"></td> <td onclick="this.className='candle'"></td> <td onclick="this.className='candle'"></td> <td onclick="this.className='candle'"></td> </tr> <tr></tr> </table> </body> <audio src="123.mp3" autoplay="autoplay"> </html>
-
css样式属性:
-
字体属性
font-family:字体名称
font-size:字体属性
color:字体颜色
font-weight:bold;字体加粗
font-style:itblic;字体倾斜
text-decoration:underline;下划线
text-align:center;文字居中
line-height:行间距
-
背景图片
background-color:背景颜色
background-image:背景图片background-repeat:背景图片是否重复
background-position:背景显示的位置
background-size:调整图片大小
也可以写成:写成如下形式。
background:颜色 图片名称 是否重复 图片显示的位置
-
边框属性
边框颜色 border-color
边框粗细 border-width
边框样式 border-style:solid;solid表示实线.
border-radius,圆角指四条边的角不是尖角化处理,而是圆滑处理。