css3

html+css+javascript

结构，表现，交互

css是什么

css怎么用（快速入门）

css选择器

美化网页（文字，阴影，超链接，列表，渐变）

盒子模型

浮动

定位

网页动画（特写）

快速入门

style

<style> 可以编写css代码
每一个声明最好用分号结尾
选择器{
	声明1;
	声明2;
}

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

引入
<link rel="stylesheet" href="css/style.css">

css优势

内容和变现分离

网页结构变现统一，可以实现复用

样式十分的丰富

建议使用独立于html的css文件

利用seo,容易被搜索引擎收录

（vue：极其不容易被收录））

css的3种导入方式

就近原则

行内样式
在便签中写一个style属性
<h1 style="color:red">我是标签<h1>

ctrl+/注释

/* 注释 */

选择器

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

标签选择器

会选择到页面所有的标签
<style>
	h1{
		color:#123131;
		balkground:#1211231;
		border-radius:24px;(圆角边框)
		}
	p1{
	
		}	
	
</style>

类选择器 class

<h1 class="qinjiang">狂神学java</h1>

<style>
	.qinjiang{
		color:#123131
		
	}

</style>

id选择器(唯一)

优先级

id选择器>类选择器>标签选择器

关广告

display:none

层次选择器

后代选择器：在某个元素后面

body p{
	background:red;
}

子选择器

body>p{
	background:red;
}

相邻兄弟选择器

.active+p{
	background:red:
}

通用选择器

.active~p{
	background:red;
}

结构伪类选择器

ul li:first-child{
	background:red;
}
ul li:first-child{
	background:red;
}

p:nth-child(1){
	background:red;
}
选择当前p元素的父类元素，选中父元素中的第一个，并且是当前元素才生效

P:nth-of-type(1){
	background:yellow;
}
选中父元素下的p元素的第二个

伪类：一些动作
<body>
	<a href="">伪类</a>
</body>

<style>
	a：hover{
		background:red;
	}
</style>

属性选择器

存在id属性的元素a[]{}

属性名，属性名=属性值（正则）

=是绝对等于

*=是包含 ^=是以这个开头

$=是以这个结尾

a[id]{

background:red;

}

a[id=first]{
	background:red;
}

class中含有links的元素
a[class*="links"]{
	background:red;
}

美化网页元素

span标签：重点突出的字套起来

字体样式

font-family字体

font-size字体大小

font-weight字体粗细

color颜色

文本样式

颜色：单词

RGB: 0-F

RGBA: A的数值0-1 透明度

text-align 排版，居中

text-indent：2me 段落首行缩进

height:300px

line-height:300px

text-decoration: underline 下划线

行高和块高一样就可以上下居中

文本阴影和超链接伪类

默认颜色
a{
	text-decoration；none;
	color:#000000

}

鼠标悬浮状态
a:hover{
	color:orange;
	font-size：50px；
}
鼠标按住不释放的状态
a:active{
	color:green;

}
text-shadow:#red 10px 10px 2px
阴影颜色，水平偏移，垂直偏移，阴影半径

超链接伪类
正常情况下
a,a:hover

列表

list-style:
none:去掉圆点
clircle:空心圆
declimal:数字列表
square:正方形

ul li{
	height:30px;
	list-style:none;
	text-indent:lem;
}

背景

背景颜色
背景图片
<style>
div{
	width:1000px;
	height：700px；
	border：1px solid red；
	background-image:url("image/tx.jpg");
	默认是全面平铺的 repeat
	
}
.div{
	backround-repeat:repeat-x;
	
}
.div2{
	backround-reprat:rapeat-y;
}
div3{
	backround-repeat:no-repeat;
}
</style>

background:red url("../image/.jpg") 270px 10px no-repeat；
颜色，图片，图片位置，平铺方式

渐变

grabient
网站

盒子模型

什么是盒子模型

margin：外边距

padding：内边距

border：边框

边框

<style>
body 总有一个默认的外边距margin：0 常见操作
h1，ul，li，a，body
margin：0
padding：0
text-decoration：none
border：粗细，样式，颜色


#box{
	width:300px;
	border:1px solid red;
	
}
h2{
	font-size；16px;
	background-color:#3cbda6
	line-height:30px;
	color:white;
}

form{
	background:#3cbda6;
}
div:nth-of-type(1)input{
	border:3px solid black;
}
div:nth-of-type(2)input{
	border:3px dashed #4d0b8c;
}
div:nth-of-type(2)input{
	border:2px dashed #008c27
}


</style>

内外边距

外边距的妙用：居中元素

margin：0 auto;居中
margin-

nis选择
margin：1px
margin：1px，2px
.....

盒子的计算方式：你这个元素到底多大

margin+border+padding+内容宽度

圆角边框

border-radius：50px;

圆圈：圆角=半径

盒子阴影

box-shadow：10px，10px，yellow;

margin： 0，auto居中

要求，

框架vue.js，element，飞冰（阿里巴巴）

浮动：

块级元素：独占一行

h1-h6 p div  列表...

行内元素；独占一行

span a img strong...

行内元素可以包含在块级元素中，反之不行

display

响应式设计

手机端

<meta name='viewport' content="width=device-width, intial-scale=1.0">

使用媒体查询

@media（....）

弹性盒子

Flexbox
.qingjiang{
	display:flex;//变为弹性容器
	flex-wrap:wrap;
}

网格布局

#grid{
	display:grid;
    /*使用网格布局*/
	padding:20px;
	grid-column-gap:20px;
	grid-row-gap:10px;
    /*行列之间的距离*/
	grid-template-colums:20px 200px 200px auto;
	
}

bootstrap

系统会自动分为12行

提供了4种分辨率规模

css3快速入门

css3

选择器

美化网页元素

盒子模型

bootstrap