CSS-狂神笔记

CSS：

一、简单了解

1. CSS选择器，美化网页（美化文字，阴影，超链接，列表美化，渐变），盒子模型，网页动画。

<style>
	h1{
		color:red;
	}
</style>

语法：
选择器{
声明1；
声明2；
}
3. 外部样式的两种写法
链接式：

<link rel=”stylesheet” href=”css/style.css”>

导入式：

<style>
@import url(“css/style.css”);
</style>

二、选择器

作用：选择页面上的某一个或者某一类元素

2.1 基本选择器
1.标签选择器
会选择页面上所有的这个标签的元素

<style>
	h1{
		color:red;
	}
</style>

2.类选择器
类选择器的格式 .class的名称{

3.id选择器
id必须保证全局唯一，不遵循就近原则

<style> 
	#miao{
		color:red;
	}
</style>
<h1 id="miao">标题1</h1>

2.2 层次选择器
1.后代选择器：在某个元素的后面
后面的都变成红色

body p{
	background:red;
}

2.子选择器
body后面的p标签背景变成红色

body>p{
	background:red;
}

3.相邻兄弟选择器
相邻向下的

.active + p{
	background:red;
}

4.通用选择器
当前选中元素的向下所有兄弟元素

.active~p{
	background:red;
}

2.3 结构伪类选择器
ul的第一个元素

<style>
	ul li:first-child{
	background:red;
}
</style>

选中p1：定位到父元素，选择当前的第一个元素

p:nth-child{
	background:red;
}

选中父元素下的p元素的第二个类型

p:nth-of-type{
	background:red;
}

2.4 属性选择器
存在id属性的元素 a[]{}
a[id=first]{
background:red;
}

*=是包含
a[class*="links item"]{
	background:red;
}

选中href中以http开头的元素
a[href^=http]{
background:red;
}
以。。。结尾的
a[href$=doc]{
background:yellow;
}

三、文本样式
3.1 颜色
RGB
RGBA rgba(0，255，255，0.5);
3.2 文本样式
左右居中:
text-align:left/right/center
3.3 首行缩进

  text-indent：2em
  行高
  line-height：
  text-decoration:underline  //下划线
  text-decoration:overline  //上划线
  text-decoration:line-through //中划线

3.4 阴影
text-shadow：
3.5 超链接伪类
a:hover
a:active
3.6 背景图像
background-image:url(“image/tx.jpg”);
默认是全部平铺，x方向和y方向

background-repeat：repeat-x;
background-repeat:   repeat-y;
background-repeat:   no-repeat;

箭头：
background：red url("…/images/d.gif") 270px 10px no-repeat;

3.7 渐变
网站：grabient
background-image:linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);

3.8 盒子模型

margin：外边距
padding：内边距
border：边框

边框：边框的粗细，样式，颜色

<style>
	h1,ul,li,a,body{
		margin:0;
		padding:0;
		text-decoration:none;
	}
	#box{
		width:300px;
		border:1px solid red;
	}
	form{
		background:green;
	}
	div:nth-of-type(1)input{
		border:3px solid black;
	}
	div:nth-of-type(2)input{
		border:3px dashed red;
	}
	div:nth-of-type(3)input{
		border:3px solid green;
	}
</style>
<div  id="box">
	<h2>会员登陆</h2>
	<form action="#">
			<div>
					<span>用户名</span>
					<input type="text">
			   </div>
			   <div>
					<span>密码</span>
					<input type="text">
			   </div>
	</form>
</div>

外边距
border/padding: 0 0 0 0
上 右 下 左（顺时针）
border-radius: 50px; 左上 右上 右下 左下

浮动：

块级元素：独占一行
h1-h6 p div 列表
行内元素：不独占一行
span a img strong
行内元素可以被包含在块级元素中，反之不可以

display:inline-block
inline行内元素
inline-block是块元素但是可以在一行。

float:left/right/none;
clear:right; 清除右侧浮动

1.浮动元素后加空div
2.设置父元素的高度
3.overflow
4.父类添加伪类after

定位
1.绝对定位
position:absolute;

2.相对定位

position:relative;
	top: -20px;      往上20px;
	left:20px;         往右20px;

3.固定定位
position:fixed;

透明度
opacity:0.5;