JavaWeb基础知识day02——CSS知识

CSS：Cascading Style Sheets 层叠样式表 

div:
	块标签
	<div></div>
span:行内的块标签
	<span><span>

css:渲染
	层叠样式表
	作用:
		渲染页面
		提高工作效率
	格式:
		选择器{属性:值;属性1:值1;}
	后缀名:
		.css 独立的css(样式)文件
	和html元素的整合★
		方式1:内联样式表 通过标签的style属性设置样式
                <span style="color:red">文本</span>
		方式2:内部样式表 在当前页面中使用的样式
			通过head标签的style子标签导入
			例如:
				<style>
					#divId2{
						background-color: #0f0;
					}
				</style>
				
		方式3:外部样式表 有独立的css文件
			通过head标签的link子标签导入
			例如:
				<link rel="stylesheet" href="css/1.css" type="text/css"/>
	选择器:★
		id选择器
			要求:
				html元素必须有id属性且有值   <xxx id="id1"></xxx>
				css中通过"#"引入,后面加上id的值  #id1{...}
		class选择器
			要求:
				html元素必须有class属性且有值 <xxx class="cls1"/>
				css中通过"."引入,后面加上class的值  .cls1{...}
		元素选择器
			直接用元素(标签)名即可   xxx{...}
		
	派生的选择器
		属性选择器★
			要求:
				html元素必须有一个属性不论属性是什么且有值  <xxx nihao="wohenhao"/>
				css中通过下面的方式使用
					元素名[属性="属性值"]{....}
					例如:
						xxx[nihao="wohenhao"]{....}
		后代选择器
			选择器 后代选择器{...}   在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式
	了解的选择器
		锚伪类选择器
			a:link {color: #FF0000}		/* 未访问的链接 */
			a:visited {color: #00FF00}	/* 已访问的链接 */
			a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
			a:active {color: #0000FF}	/* 选定的链接 */

	
	选择器使用小结:
		id选择器:一个元素(标签)
		class选择器:一类元素 
		元素选择器:一种元素
		属性选择器:元素选择器的特殊用法
	使用的时候注意:(了解)
		若多个样式作用于一个元素的时候
			不同的样式,会叠加
			相同的样式,最近原则
		若多个选择器作用于一个元素的时候
			越特殊优先级越高 id优先级最高
//
属性(了解)
	字体
		font-family:设置字体(隶书) 设置字体家族
		font-size:设置字体大小
		font-style:设置字体风格
	文本:改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进
		color:文本颜色
		line-height:设置行高
		text-decoration: 向文本添加修饰。 none underline
		text-align:对齐文本
	列表:
		list-style-type:设置列表项的类型 例如:a 1  实心圆 
		list-style-image:设置图片最为列表项类型 使用的时候使用 url函数  url("/i/arrow.gif");
	背景:
		background-color:设置背景颜色
		background-image:设置图片作为背景 url
	尺寸:
		width:
		height:
	浮动:
		float: 可选值 left right
		
	分类:
		clear:设置元素的两边是否有其他的浮动元素
			值为:both 两边都不允许有浮动元素
		display:设置是否显示元素以及如何显示元素。
			none 此元素不会被显示。 
			block 此元素将显示为块级元素，此元素前后会带有换行符。 
			inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
框模型:(理解)
	一个元素外面有padding(内边距) border(边框) margin(外边距)
		padding:元素和边框的距离
		margin:元素最外层的空白
	上面这三个属性都有简写的属性
		若设置大小的时候 四个值:顺序 上右下左
			padding:10px 10px 10px 10px
			若只写一个的话 代表四个边使用同一个值  padding:10px
			若只写两个个的话 代表四个边使用同一个值 padding:10px 20px
			若只写三个个的话 代表四个边使用同一个值 padding:10px 20px 30px
	border(边框)
		还可以设置颜色 风格
		简写属性:
			border:宽度	风格 颜色;

			border:5px solid red;
			
			solid:实线
			dashed:虚线
			double:双实线