CSS和HTML语法

  • 1.CSS概述
  • 概念:Cascading style Sheets 层叠样式表
  • 好处
  • 2.CSS与HTML结合方式
  • 1.内联样式
  • 2.内部样式
  • 3.外部样式
  • 3.CSS语法格式
  • 4.CSS选择器(基础选择器)
  • 1.id选择器
  • 2.元素选择器
  • 3.类选择器
  • 5.CSS选择器(扩展选择器)
  • 1.选择所有元素
  • 2.并集选择器
  • 3.子选择器:筛选选择器1下的选择器2元素
  • 4.父选择器:筛选选择器2的父元素选择器1
  • 5.属性选择器:选择元素名称,属性名=属性值的元素
  • 6.伪类选择器:选择一些元素具有的状态
  • 6.CSS属性
  • 1.字体、文本
  • 2.背景:background
  • 3.边框
  • 4.尺寸
  • 5.盒子模型:控制属性
  • 1.margin:外边距
  • 2.padding:内边距
  • 3.float:浮动


1.CSS概述

页面美化和布局控制

概念:Cascading style Sheets 层叠样式表

层叠:多个样式可以作用在同一个html元素上,同时生效

好处

1.功能强大
2.将内容展示和样式控制分离
降低耦合,解耦。
让分工协作更容易
提高开发效率

2.CSS与HTML结合方式

三种方式:

1.内联样式

在标签内使用style属性指定css代码

<div style="color:red;">hello</div>

2.内部样式

在head标签内,定义style标签,style标签的标签体内容就是css代码

<head>
<style>
	div{
		coloe:blue;
	   }
</style>
<div>hello</div>
</head>

3.外部样式

1.定义css资源文件
2.在head标签内,定义link标签,引入外部的资源文件

在a.css文件中

div{
	color:green;
}
在html文件中
<link rel="stylesheet" href="css/a.css">
<div>hello</div>
<div>hello</div>

注意:
1.三种方式中,css作用范围越来越大
2.一不常用,后期常用二三。
3.第三种格式可以写为:

<style>
	@import "css/a.css";
</style>

3.CSS语法格式

格式:
选择器{
属性名1:属性值1;
属性名2:属性值2;

}
选择器:筛选具有相似特征的元素
注意:每一对属性需要使用;隔开,最后一对属性可以不加;

4.CSS选择器(基础选择器)

1.id选择器

选择具体的id属性值的元素,建议在一个html页面中id唯一
语法:#id属性值()

<head>
	<style>
		#div1{
			color:red;
			}
	</style>
</head>
<body>
<div id="div1">麦克斯韦</div>
<div>小迷妹</div>
</body>

2.元素选择器

选择具有相同标签名称的元素
语法:标签名称{}
注意:id选择器优先级高于元素选择器

<head>
	<style>
		#div1{
			color:red;
			}
		div{
			color=green;
			}
	</style>
</head>
<body>
<div id="div1">麦克斯韦</div>
<div>小迷妹</div>
</body>

3.类选择器

选择具有相同的class属性值的元素
语法:.class属性值()
注意:类选择器优先级高于元素选择器

<head>
	<style>
		#div1{
			color:red;
			}
		div{
			color=green;
			}
		.clsl{
			color:blue;
			}
	</style>
</head>
<body>
<div id="div1">麦克斯韦</div>
<div>小迷妹</div>

<p class="clsl">李晶</p>
</body>

结局: id选择器优先级最高

5.CSS选择器(扩展选择器)

1.选择所有元素

语法:

2.并集选择器

语法:选择器1,选择器2{}

3.子选择器:筛选选择器1下的选择器2元素

语法:选择器1 选择器2{ }

<head>
<style>
	div p{              //div下的p标签 麦克斯韦就不会生效
		color:red;
	}
</style>
</head>

	<div>
		<p>lijing</p>
	</div>
	<p>麦克斯韦</P>

4.父选择器:筛选选择器2的父元素选择器1

语法:选择器1>选择器2{ }

<head>
<style>
	div>p{                  //对div的控制
		border: 1px solid;
	}
</style>
</head>
	<div>
		<p>lijing</p>
	</div>
	<p>麦克斯韦</P>
	<div> mm</div>   //不会被选中  因为不是父元素

5.属性选择器:选择元素名称,属性名=属性值的元素

语法: 元素名称[属性名=“属性值”]{ }

<head>
<style>
	input[type='text']{
	border: 5px solid;
	}
</style>
</head>

<input type="text">

6.伪类选择器:选择一些元素具有的状态

语法:元素:状态{ }
如:
状态:
link:初始化的状态
visited:被访问过的状态
active:正在访问的状态
hover:鼠标悬浮状态

<head>
<style>
	a:link{
		color:pink;
	}
	a:hover{
		color:green;
	}
	a:active{
		color:yellow;
	}
	a:visited{
		color:red;
	}
</style>
</head>

<a href="#">麦克斯韦</a>

6.CSS属性

1.字体、文本

font-size:字体大小
color:文本颜色
text-align:对齐方式
line-height:行高
<style>
p{
	color:#FF0000;
	font-size:30px;
	text-align:center;
	line-height:100px;
}
</style>

2.背景:background

<style>
p{
	color:#FF0000;
	font-size:30px;
	text-align:center;
	line-height:100px;
	border:1px solid red;
}
div{
	border:1px solid red;
	height:200px;
	width:200px;
	background:url("img/logo.jpg"); no-repeat center;  //背景
	}
</style>

3.边框

border:复合属性,每一条线都可以单独控制(borde-left-style)
<style>
p{
	color:#FF0000;
	font-size:30px;
	text-align:center;
	line-height:100px;
	border:1px solid red;             //边框
}
</style>

4.尺寸

width:宽度
height:高度

<style>
p{
	color:#FF0000;
	font-size:30px;
	text-align:center;
	line-height:100px;
	border:1px solid red;
}
div{                                    //尺寸
	border:1px solid red;
	height:200px;
	width:200px;
	}
</style>

5.盒子模型:控制属性

1.margin:外边距

2.padding:内边距

<style>
	div{                                    
	border:1px solid red;
	}
	div1{                                    
	width:100px;
	height:100px;
//	margin:50px;        外边距
	}
	div2{                                    
	width:200px;
	height:200px;
//	padding:50px;  不可以!!!默认情况下会影响盒子的大小       内边距
	//设置盒子的属性:让width和height就是最终盒子的大小
	box-sizing:border-box; 
	}
</style>
<body>
	<div class="div2">
		<div class="div1"></div>
	</div>
</body>

3.float:浮动

left:左浮动
		right:右浮动
<style>
	div{                                    
	border:1px solid red;
	}
	div1{                                    
	width:100px;
	height:100px;
//	margin:50px;        外边距
	}
	div2{                                    
	width:200px;
	height:200px;
//	padding:50px;  不可以!!!默认情况下会影响盒子的大小       内边距
	//设置盒子的属性:让width和height就是最终盒子的大小
	box-sizing:border-box; 
	}
	.div3{
		float:left;
		}
	.div4{
		float:left;
		}
	.div5{
		float:right;
		}
</style>
<body>
	<div class="div2">
		<div class="div1"></div>
	</div>
<div class="div3">aaaaa</div>
<div class="div4">bbbbbb</div>
<div class="div5">cccc</div>
</body>