CSS

概念：

Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html元素上，同时生效

好处：1.功能强大 2.将内容展示和样式控制分离，降低耦合度，提高开发效率

三种样式

1.行内有效
2.当前页面有效：外部样式
3.所有引入均有效：
step1:定义CSS资源文件
step2：在head标签内，定义link标签，引入外部资源文件

	<body>
		<div style="color:red;">1111 word</div>
	</body>

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
		<style>
			div{
				color:blue;
			}
		</style>
	</head>
	
	<body>
		<div>helloo 1212 word</div>
	</body>
</html>

//-----------css1.css-----------
div{
	color:green;
}

//-----------css.html-----------

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="CSS/css1.css">
	</head>
	
	<body>
		<div>1111 word</div>
		<div>222 word</div>
	</body>
</html>

CSS语法规则

格式：

选择器{
     属性名1：属性值1；
     属性名2：属性值2；
      ·····
}

注意：每一对属性需要用分号；隔开，一对键值对之间用的是：冒号

选择器：筛选具有相似特征的元素

选择器

基础选择器

基础选择器： id选择器 / 元素选择器 / 类选择器

id选择器：选择具体的id属性值的元素   //建议在一个html中ID唯一
      语法：#id属性值{ ..... }
      注意:优先级最高
元素选择器:具有相同标签名称的元素
     语法: 标签名称{ ... }
     注意: 优先级最低
类选择器:选择具有相同的class属性值元素
     语法:{ ... }.class属性值

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<style>
		#div1{
			color:red;
		}
		.classname{
			color:yellow;
		}
		div{
			color:blue;
		}
	</style>
	</head>
	
	<body>
		<div id="div1">
			变成红色 <br>
			变变变
		</div>
		
		<div class="classname"> 
			变黄
		</div>
		
		<div>
			变蓝
		</div>
	</body>
</html>

扩展选择器

* : 选择所有元素
    语法:       *{....}
并集选择器 : 并集都选上
    语法:       选择器1,选择器2{ ... .}
子选择器: 筛选选择器1下的选择器2元素
    语法:       选择器1 选择器2 {...}
父选择器: 筛选选择器2的父亲选择器1的元素
    语法:       选择器1>选择器2{....}
属性选择器: 选择元素名称,属性名=属性值的元素
    语法:       元素名称[属性名="属性值"]{...}
伪类选择器:选择一些元素具有的状态
     常用于超链接等11_10:00

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<style>
		input[type="text"]{
			border:5px solid;
		}
	</style>
	</head>
	
	<body>
		
		<input type="text">
		<br>
		<input type="password">
		
	</body>
</html>

属性

字体,背景,边框,尺寸

盒子模型

以红点处为对象,此时的外边距和内边距如图

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<style>
		div{
			border:1px solid blue;
		}
		.divbig{
			width:200px;
			height:200px;
		
		}
		.divsm{
			width:100px;
			height:100px;
			margin:50px;
		}
	</style>
	</head>
	
	<body>
		
		<div class="divbig">
		<div class="divsm"></div>
		</div>
		
	</body>
</html>

CSS举例 - 注册页面

分析页面

html阶段

form输出表单 + br控制的格式不太好后来采用tr td写法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
	<div class="rg_layout">  
		<div class="rg_lefe">
			<p>新用户注册</p>
			<br>
			<p>USER REGISTER</p>
		</div>	
		
		<div class="rg_center">
			<form action="#" method="get">
				<lael for="first">用户名</lael>:<input type="text" name="username" placeholder="请输入用户名" id="first">
				密码:<input type="password" name="password" placeholder="请输入密码">
				<br>
				性别:<input type="radio" name="gender" value="male"> 男
					<input type="radio" name="gender value="femal"> 女
				<br>
				爱好:<input type="checkbox" name="hobby" value="shopping">逛街
					<input type="checkbox" name="hobby" value="java" checked>Java
					<input type="checkbox" name="hobby" value="game">游戏
				<br>
				图片上传:<input type="file" name="file">
				<br>
				隐藏域:<input type="hidden" name="id" value="偷偷上传">
				<br>
				取色器:<input type="color" name="color">
				<br>
				年月日:<input type="date" name="ymd">
				<br>
				年月日秒:<input type="datetime-local" name="birthday">
				<br>
				邮箱:<input type="email name="email">
				<br>
				年龄:<input type="number" name="age">
				<br>
				<input type="submit" value="登陆">
				<input type="button" value="一个按钮">
				<input type="image" src="./resource/picture/picturename.png">
				
			</form>

		</div>	
		
		<div class="rg_right">
			<p>已有账号<a href="#">立即登录</a></p>
			
		</div>	
		
	</div>
</body>
</html>

td tr表格写法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
	<div class="rg_layout">  
		<div class="rg_lefe">
			<p>新用户注册</p>
			<p>USER REGISTER</p>
		</div>	
		
		<div class="rg_center">
			<form action="#" method="get">
				<table>
					<tr>
						<td><label for="username">用户名:</label></td>
						<td><input type="text" name="username" placeholder="请输入用户名"></td>
					</tr>
					<tr>
						<td><label for="password">密码:</label></td>
						<td><input type="password" name="password" placeholder="请输入密码"></td>
					</tr>
					<tr>
						<td><label for="username">用户名:</label></td>
						<td><input type="radio" name="gender" value="male"> 男
						<input type="radio" name="gender" value=femal"> 女</td>
					</tr>
					<tr>
						<td><label for="hobby">爱好:</label></td>
						<td><input type="checkbox" name="hobby" value="shopping">逛街
							<input type="checkbox" name="hobby" value="game">游戏
							<input type="checkbox" name="hobby" value="java" checked>Java</td>
						
					</tr>
					<tr>
						<td><label for="ymd">年月日:</label></td>
						<td><input type="date" name="ymd"></td>
					</tr>
					<tr>
						<td><label for="email">邮箱:</label></td>
						<td><input type="email" name=email"></td>
					</tr>
					<tr>
						<td><label for="age">年龄:</label></td>
						<td><input type="number" name="age"></td>
					</tr>
					<tr>
						<td><input type="submit" value="登陆"></td>
					</tr>
				</table>
			</form>
		</div>	
		
		<div class="rg_right">
			<p>已有账号<a href="#">立即登录</a></p>
			
		</div>	
		
	</div>
</body>
</html>

添加部分CSS代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
	<style>
		*{
			margin:0px;
			padding:0px;
			box-sizing:border-box;
		}
		body{
			background:url("./picture.jpg") no-repeat center;
		}
		.rg_layout{
			width:900px;
			height:500px;
			border:8px solid #EEEEEE;
			background-color:white;
			/*	div水平居中 */
			margin:auto;
			margin-top:70px;	
		}
		.rg_left{
			border:1px solid red;
			float:left;
			margin:15px;
		}
		.rg_left > p:first-child{
			color:#FFD026;
		}
		.rg_left > p:last-child{
		color :A6A6A6;
		font-size:20px;
		}
		.rg_center{
			border:1px solid red;
			float:left;
			width:450px;
			margin:50px;
		}
		.rg_right{
		border:1px solid red;
		float:right;
		margin:15px;
		}
		.rg_right > p:first-child{
			font-size:15px;
		}
		.rg_right p a{
			color:green;
		}
	</style>
<body>
	<div class="rg_layout">  
		<div class="rg_left">
			<p>新用户注册</p>
			<p>USER REGISTER</p>
		</div>	
		
		<div class="rg_center">
			<form action="#" method="get">
				<table>
					<tr>
						<td><label for="username">用户名:</label></td>
						<td><input type="text" name="username" placeholder="请输入用户名"></td>
					</tr>
					<tr>
						<td><label for="password">密码:</label></td>
						<td><input type="password" name="password" placeholder="请输入密码"></td>
					</tr>
					<tr>
						<td><label for="username">用户名:</label></td>
						<td><input type="radio" name="gender" value="male"> 男
						<input type="radio" name="gender" value=femal"> 女</td>
					</tr>
					<tr>
						<td><label for="hobby">爱好:</label></td>
						<td><input type="checkbox" name="hobby" value="shopping">逛街
							<input type="checkbox" name="hobby" value="game">游戏
							<input type="checkbox" name="hobby" value="java" checked>Java</td>
						
					</tr>
					<tr>
						<td><label for="ymd">年月日:</label></td>
						<td><input type="date" name="ymd"></td>
					</tr>
					<tr>
						<td><label for="email">邮箱:</label></td>
						<td><input type="email" name=email"></td>
					</tr>
					<tr>
						<td><label for="age">年龄:</label></td>
						<td><input type="number" name="age"></td>
					</tr>
					<tr>
						<td><input type="submit" value="登陆"></td>
					</tr>
				</table>
			</form>
		</div>	
		
		<div class="rg_right">
			<p>已有账号<a href="#">立即登录</a></p>
			
		</div>	
		
	</div>
</body>
</html>

AKUANer

发布了100 篇原创文章 · 获赞 3 · 访问量 4482

私信关注

JavaWeb - 静态资源 -CSS

CSS

概念：

三种样式

CSS语法规则

选择器

基础选择器

扩展选择器

属性

字体,背景,边框,尺寸

盒子模型

CSS举例 - 注册页面

html阶段

猜你喜欢