CSS-狂神笔记

CSS:

一、简单了解

  1. CSS选择器,美化网页(美化文字,阴影,超链接,列表美化,渐变),盒子模型,网页动画。
<style>
	h1{
		color:red;
	}
style>

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


导入式:


二、选择器

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

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


2.类选择器
类选择器的格式 .class的名称{
CSS-狂神笔记_第1张图片
3.id选择器
id必须保证全局唯一,不遵循就近原则

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

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的第一个元素


选中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 盒子模型
CSS-狂神笔记_第2张图片
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是块元素但是可以在一行。
CSS-狂神笔记_第3张图片
float:left/right/none;
clear:right; 清除右侧浮动

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

定位
1.绝对定位
position:absolute;
CSS-狂神笔记_第4张图片

2.相对定位

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

3.固定定位
position:fixed;

透明度
opacity:0.5;

你可能感兴趣的:(cs,css3,前端)