实训第二天：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，圆角指四条边的角不是尖角化处理，而是圆滑处理。

实训第二天：CSS样式

实训第二天：CSS样式

css两种基本选择器

css样式属性：

猜你喜欢