CSS

最新推荐文章于 2024-02-27 16:22:56 发布

原创最新推荐文章于 2024-02-27 16:22:56 发布 · 82 阅读

0 ·

CC 4.0 BY-SA版权

HTML的块标签

div标签:默认占一行,自动换行
span标签:内容显示在同一行

CSS的代码规则:

	选择器{
		属性名:属性值;(;隔开)
		属性名:属性值;
	}

在这里插入图片描述

例子

在这里插入图片描述

CSS中的选择器:

选择器,它的作用就是选中某个或者某些标签,以便于我们给这些标签设置属性

注意:id和class不要用数字开始作为选择器名

标签选择器/标记选择器/元素选择器: 同一类的标签,都会起作用
	格式: 标签名{
		属性名:属性值;
	      }

	id选择器: 选中标签,id值是指定值的标签 
		格式:
			#id值{
				属性名:属性值;
			}
class选择器:选中标签,class值是指定值的标签
	格式:
		.类名{
			属性名:属性值;
		}

扩展:属性选择器

属性选择器:只选中符合我们要求属性值的标签
	格式:
		选择器[属性名=属性值]{
			属性名:属性值;
		}
包含选择器/后代选择器:
	格式:
		选择器1 选择器2{
			属性名:属性值;

		}
		是选中选择器2的标签,但是这个标签必须包含在选择器1中,而且可以是直接子元素,可以是孙子元素

CSS中都有哪些样式(就是选择器中的属性名)

1.border:边框样式
		border:边框的宽度    边框的样子 	     	边框颜色;
	
		        单位是px   double:双线边框	    英文单词red,blue	
			               solid:实线边框	    #RGB 比如 #FF0000
2.width:宽度 单位px
  height:高度 单位px

3.color:内容的颜色 	英文单词red,blue	  #RGB 比如 #FF0000
 font-size:内容的文字大小  单位px

4.background-color:设置标签的背景色

--------------------------------------------------------------------分割线--------------------------------------------------------------------

5.display: 转换样式, 把一个块级元素转成行内元素
        	值: block(转成块级元素)  inline(转成行内元素)  none(隐藏)

--------------------------------------------------------------------分割线--------------------------------------------------------------------

6.float: 浮动,设置元素的浮动效果,让元素浮起来
	值: left 漂起来向左
		right 漂起来向右
 clear: 清除元素两边的浮动效果
	值both 清除该元素左右两边的浮动效果

在这里插入图片描述

小练习

<head>
	<meta charset="utf-8"/>
	<title>test</title>

	<style>	
		div {	
			border: 5px solid gainsboro;			
			width: 800px;
			height: 600px;
			float: left;//
		}
		#tdhuiyuan{
			color: royalblue;
			font-family: "微软雅黑";
			font-size: 20px;
		}
		#inputzhuce{
			width: 100px;
			height: 50px;
			background-color: crimson;
		}
	</style>


	
</head>
<body>

<div>
	<form>
		<table border="0px" bgcolor="white">
			<!--顶部留白-->
			<tr>
				<td height="45px"></td>
			</tr>
			<!--会员注册-->
			<tr>
				<td id="tdhuiyuan">会员注册</td>
				<td colspan="2"><font face="微软雅黑">USER REGISTER</font></td>
			</tr>
			<!--用户名-->
			<tr>
				<td colspan="2">用户名:</td>
				
				<td>
					<input type="text" value="请输入用户名"/>
				</td>
			</tr>
			<!--密码-->
			<tr>
				<td>密码:</td>
				<td colspan="2">
					<input type="text" value="请输入密码"/>
				</td>
				
			</tr>
			<!--确认密码-->
			<tr>
				<td>确认密码:</td>
				<td colspan="2">
					<input type="text" value="请再次输入密码"/>
				</td>
			</tr>
			<!--email-->
			<tr>
				<td>Email:</td>
				<td colspan="2">
					<input type="text" value="请输入Email地址"/>
				</td>
			</tr>
			<!--姓名-->
			<tr>
				<td>姓名:</td>
				<td colspan="2">
					<input type="text" value="请输入姓名" />
				</td>
			</tr>
			<!--性别-->
			<tr>
				<td>性别:</td>
				<td colspan="2">
													//checked写这个表示默认值
					男<input type="radio" name="sex" checked="checked"/>
					女<input type="radio" name="sex"/>
				</td>
			</tr>
			<!--出生日期-->
			<tr>
				<td>出生日期:</td>
				<td colspan="2">
					<input type="date" />
				</td>
			</tr>
			<!--验证码-->
			<tr>
				<td>验证码:</td>
				<td colspan="2">
					<input type="text" />
				</td>
				<td>
					<input type="image" src="../img/captcha.jhtml" />
				</td>
			</tr>
			<!--提交-->
			<tr>
				<td colspan="3" align="center">
					<input id="inputzhuce" type="submit" value="注册" />
				</td>

			</tr>
		</table>
	</form>
</div>

			
</body>

在这里插入图片描述