前端学习心得
css基础
一初始css
1.css作用：美化html
2.css语法：选择器{css属性}
3选择器用于查找html里的标签
4.css会样式重叠，后面的属性会覆盖前面的属性
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是第一个html网页</title>
<style>
/*css*/
p{
color: yellow;
font-size: 40px;
background: blue;
width: 400px;
height: 600px;
}
/*css*/
</style>
</head>
<body>
<p>这是网页的身体</p>
</body>
</html>
4.css的三种引入方式
二基础选择器（寻找标签）
1.标准选择器
结构：标签名{css属性名：属性值;}
2.类选择器
结构：.类名{css属性名：属性值;}
类名可以由数字，字母，下划线，中划线组成，但是不能以数字或中划线开头。
使用：<标签名 class=“类名”></标签名>
3.id选择器
结构：#id{css属性名：属性值;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.blue{
color: blue;
}
#id{
font-size: 66px;
}
</style>
</head>
<body>
<p>类选择器</p>
<p class="blue">类选择器</p>
<p id="id">id选择器</p>
</body>
</html>
4.通配符选择器(选择所有标签)
结构：*{css属性名：属性值;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
color: red;
}
</style>
</head>
<body>
<div>通配符选择器</div>
<p>通配符选择器1</p>
<h1>通配符</h1>
</body>
</html>
三字体和文本样式
1.字体样式
(1)大小
语法：font-size: 数字px;
(2)粗细
属性名：font-weight
(3)倾斜
语法：font-style: italic;
(4)字体系列
语法：font-family: 字体名称;(sans-serif表示任意一种非衬线字体)
(5)font复合属性(只能省略前面两个属性)
语法：font:style weight size 字体;(必须按照顺序填写)
ps:要把单独写在连写的下面，若写在上面则不会生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font: italic 700 66px 宋体;
}
</style>
</head>
<body>
<p>font复合属性</p>
</body>
</html>
2.文本样式
(1)文本缩进
形式：
1.text-indent: 数字px;
2.text-indent: 数字em;(1em=当前标签的font-size的大小)
(2)文本水平对齐方式
形式：
1.text-align:left;(左对齐)
2.text-align:right;(右对齐)
3.text-align:center;(居中)设置元素的父元素对元素居中
(3)文本修饰
形式：
1.text-decoraion:underline;(下划线)
2.text-decoraion:line-throgh;(删除线)
3.text-decoraion:overline;(上划线)
4.text-decoraion:none;(无修饰线)
(4)行高
形式：
1.line-height: 数字px;
2.line-height: 倍数;(当前标签的font-size的几倍)
ps:连写时的覆盖问题：font:style weight size/line-height 字体;
(5)颜色
形式：
1.color: 颜色名;(文本颜色)
2.blackground-color: 颜色名;(背景颜色)
(6)标签水平居中
形式：margin: 0 auto;
css进阶
一选择器的进阶
1.复合选择器
(1)后代选择器
语法：选择器1 选择器2{css}
(1)子代选择器
语法：选择器1>选择器2{css}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div p{
color: red;
}
div>a{
color: yellow;
}
</style>
</head>
<body>
<div>
<p>后代</p>
</div>
<div>
<a href="#">父代</a>
<p>
<a href="#">子代</a>
</p>
</div>
</body>
</html>
2.并集选择器
语法：选择器1,选择器2{css}
3.交集选择器
语法：选择器选择器2{css}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,p{
font-size: 99px;
}
a.box{
color: yellow;
}
</style>
</head>
<body>
<div>1</div>
<p>2</p>
<a href="#" class="box">凯尔美</a>
<br>
<a href="#" >凯尔美</a>
</body>
</html>
4.hover伪类选择器(设置鼠标悬停时的状态)
语法：选择器:hover{css}
二背景相关属性
1.背景颜色
语法：background-color: 颜色名;
2.背景图片
语法：background-image: url(图片路径);
3.背景平铺
语法：
(1)background-repeat: repeat;(水平竖直都平铺)
(2)background-repeat: no-repeat;(不平铺)
(3)background-repeat: repeat-x;(水平平铺)
(4)background-repeat: repeat-y;(竖直平铺)
4.背景位置
语法：background-position: 水平位置 垂直位置;
水平位置和垂直位置可用英文或具体数字表示。
5.背景属性的连写
语法：background: color image repeat position;(无顺序要求)
三元素显示模式
1.块级元素(独占一行；宽度为默认父元素宽度，高度默认内容撑开；可设置宽高)
代表标签：div,p,h,ui,li,dl,dt,dd,form,header,nav,footer
2.行内元素(一行显示多个；宽度高度默认内容撑开；不可设置宽高)
代表标签：a,span,b,u,i,s,strong,ins,em,del
3.行内块元素(一行显示多个；可设置宽高)
代表标签：input,textarea,button,select
img标签有行内块元素特点，但是Chrome调试工具显示结果为inline
4.元素显示模式转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
/*行内块*/
display: inline-block;
/*块*/
display: block;
/*行内*/
display: inline;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
5.标签嵌套
(1)p标签不要嵌套div,p,h等块级元素
(2)a标签可嵌套任何元素但不嵌套它本身
(3)块级元素可嵌套文本，块级元素，行内元素，行内块元素
三css特性
1.继承性：文字控制属性均可继承
2.层叠性：.css会样式重叠，后面的属性会覆盖前面的属性
css盒子模型
1.盒子模型简介
组成：内容(content)，内边距(padding)，边框(border)，外边距(margin)
2.内容的宽高：width和height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
/*边框*/
border: 1px solid #000;
/*内边距*/
padding: 20px;
/*外边距*/
margin: 50px;
}
</style>
</head>
<body>
<div>盒子1</div>
<div>盒子2</div>
</body>
</html>
3.边框
语法：border: 边框线条粗细 边框线条种类 边框线条颜色;(无顺续)
例如：border: 1px solid red;
边框的单方向设置：属性词：border-方向词
4.内边距
语法：padding: 数值px;
padding的复合属性：
1.padding: 四个方向;
2.padding:上下 左右;
3.padding:上 左右 下;
4.padding: 上 右 下 左;
5.外边距
语法：margin: 数值px;
margin的复合属性：
1.margin: 四个方向;
2.margin: 上下 左右;
3.margin: 上 左右 下;
4.margin: 上 右 下 左;
6.清除默认样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>hahaha</div>
</body>
</html>
7.版心居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 0 auto;
}
</style>
</head>
<body>
<div>版心</div>
</body>
</html>