前端基础学习
CSS学习
1 CSS简介
Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位浮动等等
2 选择器
2.1 标签选择器
css注释符：/**/
2.1.1 内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<!--
规范：<style>可以编写css代码，每一个声明最好用分号结尾
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<link rel="stylesheet" href="css/style.css">
<style>
h1{
color:rgb(32, 221, 79);
}
p{
color: blueviolet;
}
</style>
</head>
<body>
<h1>HelloWorld</h1>
<p>
Hello!
</p>
</body>
</html>
2.2.2 外部样式
建议使用下列方法，html与css独立：
创建style.css
h1{
color: bisque;
}
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
2.2 类选择器
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/*
类选择器的格式 .class的名称{}
好处：可以多个标签归类，是同一个class，可以复用
*/
.first{
color: red;
}
.second{
color: blue;
}
</style>
</head>
<body>
<h1 class="first">HelloWorld!</h1>
<h1 class="second">HelloWorld!</h1>
<h1 class="first">HelloWorld!</h1>
</body>
</html>
2.3 id选择器
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/*
id选择器：id必须保持全局唯一
#id名称{}
*/
#first{
color: red;
}
</style>
</head>
<body>
<h1 id="first">标题</h1>
</body>
</html>
2.4 层次选择器
<body>
<p>p1</p>
<p class="first">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
2.4.1 后代选择器
body p{
background-color: aqua;
}
2.4.2 子选择器
body>p{
background-color: aquamarine;
}
2.4.3 相邻兄弟选择器
.first +p{
background-color: blue;
}
2.4.4 通用选择器
.first~p{
background-color: brown;
}
2.5 结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>
/*选中第一个子元素*/
ul li:first-child{
background-color: blue;
}
/*选中最后一个子元素*/
ul li:last-child{
background-color: aqua;
}
/*选中父元素下的第二个*/
p:nth-of-type(2){
background-color: yellow;
}
2.6 属性选择器
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<p class="demo1">
<a href="http://www.baidu.com" class="links item first" id="first>">1</a>
<a href="http://Super.icu" class="links item" id="second">2</a>
<a href="../images/123.png" class="links item">3</a>
<a href="../images/123.jpg" class="links item">4</a>
<a href="abc" class="links item">5</a>
<a href="/a.pdf" class="links item">6</a>
<a href="/abc.pdf" class="links item">7</a>
<a href="abc.doc" class="links item last">8</a>
</p>
</body>
</html>
美化界面
<style>
.demo1 a{
float:left;
display:block;
height: 50px;
width: 50px;
border-radius: 10px;
background-color: aqua;
text-align: center;
color: black;
margin-right: 5px;
font: bold 20px/50px Arial;
}
</style>
/*选择存在id属性的元素*/
a[id]{
background-color: blue;
}
/*选择id属性为first的元素*/
a[id=first]{
background-color: red;
}
/*选择class中有links的元素*/
a[class*="links"]{
background-color: blueviolet;
}
/*选择href中以http开头的元素*/
a[href^=http]{
background-color: green;
}
属性为：=
包含元素：*=
以*为开头：^=
以*为结尾：$=
3 优先级问题
3.1 样式优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
h1{
color:rgb(32, 221, 79);
}
</style>
</head>
<body>
<h1 style="color: red;">HelloWorld</h1>
</body>
</html>
优先级：行内样式>内部样式>外部样式（**就近原则**）
（1）<link rel="stylesheet" href="css/style.css">
（2） <style>
h1{
color:rgb(32, 221, 79);
}
</style>
就近原则取（2）
3.2 选择器优先级
id选择器>类选择器>标签选择器
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
h1{
color: red;
}
.first{
color: blue;
}
#second{
color: green;
}
</style>
</head>
<body>
<h1 id="second" class="first">HelloWorld!</h1>
</body>
</html>
4 美化网页元素
4.1 字体美化
4.1.1 span标签
重点突出要突出的字，使用span套起来
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
#first{
font-size: 50px;
}
</style>
</head>
<body>
Hello <span id="first">World!</span>
</body>
</html>
4.1.2 字体样式
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/*
font-family: 字体
font-size:字体大小
font-weight:字体粗细
color:字体颜色
*/
body{
font-family: 宋体;
color: black;
}
h1{
font-size: 30px;
}
.p1{
font-weight: lighter;
}
.p2{
font-weight: 900;
}
</style>
</head>
<body>
<h1>CSS （层叠样式表）</h1>
<p class="p1">层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 </p>
<p class="p2">CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 </p>
</body>
</html>
4.1.3 文本样式
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/*
text-align:排版，居左，居中，居右
text-indent: 2em;段落首行缩进
img,span水平对齐：vertical-align: middle;
height,line-height行高和块的高度一致，可以上下居中
*/
h1{
color:rgba(0, 255, 255, 0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p2{
background-color: aqua;
height: 300px;
line-height: 300px;
}
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<h1>CSS （层叠样式表）</h1>
<p class="p1">层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 </p>
<p class="p2">CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 </p>
<p><img src="../../resources/images/纸飞机.png"><span>saafsa</span></p>
</body>
</html>
4.1.4 超链接伪类
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/*默认颜色*/
a{
text-decoration: none;
color: blue;
}
/*鼠标悬浮的颜色*/
a:hover{
color: brown;
font-size: larger;
}
/*鼠标按住未释放的状态*/
a:active{
color: green;
}
</style>
</head>
<body>
<a href="#"><img src="../../resources/images/纸飞机.png"></a>
<p><a href="#">纸飞机</a></p>
<p><a href="#">text</a></p>
</body>
</html>
4.2 列表
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link href="../css/style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a> </li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a> </li>
<li><a href="#">电脑</a> <a href="#">办公</a> </li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a> </li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a> </li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a> </li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a> </li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> </li>
</ul>
</div>
</body>
</html>
#nav{
width: 300px;
background-color: #a0a0a0;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background-color: red;
}
/*
list-style：
none：去掉原点
circle：空心圆
decimal：数字
suqare：正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: #000;
}
a:hover{
color: orange;
text-decoration: underline;
}
4.3 背景
4.3.1 图片平铺
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
div{
width: 1000px;
height: 700px;
border:1px solid red;
background-image: url("../../resources/images/纸飞机.png");
/*默认全部平铺*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
4.3.2 渐变
工具：https://www.grabient.com/
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
body{
background-color: #4158D0;
background-image: linear-gradient(256deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
</style>
</head>
<body>
</body>
</html>
5 盒子模型
5.1 盒子
margin：外边距
padding：内边距
border：边框
5.2 内外边距问题
Ⅰ.div{padding:?;margin:?}
- padding或margin属性有四个值时，顺序为上，右，下，左，顺时针
- padding或margin属性有三个值时，顺序为上，左右，下
- padding或margin属性有两个值时，顺序为上下，左右
- padding或margin属性有一个值时，所有的边距一样
Ⅱ.可以将外边距margin设为auto，可以使元素在容器内水平居中
5.3 圆角边框
div{
width: 100px;
height: 100px;
border: 10px solid red;
}
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50px 50px 50px 0;
}
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px 100px 100px 100px;
}
图片边框：
img{
width: 280px;
height: 280px;
border: 10px solid red;
border-radius: 280px 280px 280px 280px;
}
6 浮动
6.1 display用法
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/*
block块元素
inline行内元素
inline-block是块元素，但是可以内联在一行
*/
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>
div元素
</div>
<span>行内元素</span>
</body>
</html>
6.2 float浮动
div{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
float: right;
}
clear:清除浮动
7 定位
7.1 相对定位
position: relative;相对定位，利用上下左右进行调整
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
}
#first{
border: 1px dashed #191b9e;
background-color: blue;
position: relative;
left: 20px;
}
#second{
background-color: blue;
position: relative;
right: 20px;
}
#thrid{
background-color: blue;
position: relative;
top: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="thrid">第三个盒子</div>
</div>
</body>
</html>
7.2 绝对定位
position: absolute;
定位：基于xxx定位，上下左右
1.没有父级元素定位的前提下，相对于浏览器定位
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
/*绝对定位*/
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>盒子1</div>
<div>盒子2</div>
</body>
</html>
7.3 固定定位
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
/*绝对定位*/
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
/*固定定位*/
width: 100px;
height: 100px;
background-color: yellowgreen;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>盒子1</div>
<div>盒子2</div>
</body>
</html>