免费数据库网站谷歌浏览器2021最新版
CSS基础
- 前言
- 一、CSS的概念
- 1.什么是CSS
- 2.CSS的发展史
- 3.CSS的优势
- 二、CSS的导入方式
- 1.行内样式
- 2.内部样式
- 3.外部样式
- 三、CSS的选择器
- 1.基本选择器
- 2.层次选择器
- 3.结构伪类选择器
- 4.属性选择器
- 四、美化网页元素
- 1.为什么要美化网页
- 2.字体样式
- 3.文本样式
- 4.阴影
- 5.超链接伪类
- 6.列表
- 7.背景
- 8.渐变
- 五、盒子模型
- 1.什么是盒子模型
- 2.边框
- 3.内外边距
- 4.圆角边框
- 5.阴影
- 六、浮动
- 1.标准文档流
- 2.display
- 3.float
- 4.父级边框塌陷问题
- 七、定位
- 1.相对定位
- 2.相对定位
- 3.固定定位
- 4.z-index
- 八、动画
前言
本文为CSS基础知识与语法介绍，Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~
一、CSS的概念
1.什么是CSS
- CSS：Cascading Style Sheet 层叠样式表。
- CSS：表现（美化网页）。
- 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动。
2.CSS的发展史
- CSS 1.0
- CSS 2.0 DIV(块)+CSS，HTML与CSS结构分离的思想，网页简单，SEO
- CSS 2.1 浮动，定位
- CSS 3.0 圆角，阴影，动画…浏览器兼容性~
3.CSS的优势
- 内容与表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
二、CSS的导入方式
1.行内样式
<!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: aquamarine">CSS3测试</h1>
2.内部样式
<!--内部样式-->
<style>h1{color: yellow;}
</style>
3.外部样式
- 链接式
<!--外部样式——链接式-->
<link rel="stylesheet" href="css/style.css">
- 导入式
<!--外部样式——导入式-->
<!--CSS2.1-->
<style>@import url("css/style.css");
</style>
三、CSS的选择器
1.基本选择器
- 标签选择器： 选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<style>/*标签选择器会选择页面上所有的对应标签*/h1{color: #c134b5;background: black;}
</style>
<style>p{background: aquamarine;color: red;font-size: 80px;}
</style><h1>王小姐</h1><h1>夏先生</h1><p>蜗牛小姐</p>
</body>
</html>
- 类选择器 class： 选择所有class属性一致的表情，跨标签.类名{}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--类选择器格式：.class的名称{}好处：可以选择一组类，类名一致-->
<style>.girl{color: #c134b5;}
</style>
<style>.boy{color: blue;}
</style>
<h1 class="girl">王小姐</h1>
<h1 class="boy">夏先生</h1>
<h2 class="girl">蜗牛小姐</h2>
<p class="girl">王苡辰</p>
</body>
</html>
- ID选择器： 全局唯一！ #id名{}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--id选择器 : id必须保证全局唯一#id 名称{}不遵循就近 原则，固定的优先级： id选择器 > class选择器 > 标签选择器-->
<style>#girl{color: #c134b5;}
</style>
<style>#boy{color: blue;}
</style>
<h1 id="girl">王小姐</h1>
<h1 id="boy">夏先生</h1>
<h2 class="girl">蜗牛小姐</h2>
<p class="girl">王苡辰</p>
</body>
</html>
2.层次选择器
- 后代选择器： 在某个元素的后面
/*后代选择器*/
body p{background: #c134b5;
}
- 子选择器 一代面
/*子选择器*/
body>p{background: #c134b5;
}
- 相邻兄弟选择器（对下不对上）
/*兄弟选择器： 只有一个，向下*/
.active +p{background: #c134b5;
}
- 通用选择器
/*通用兄弟选择器， 当前选中元素的向下所有的兄弟元素*/
.active~p{background: #c134b5;
}
3.结构伪类选择器
- 伪类： 条件
/*ul的第一个子元素*/
ul li:first-child{background: #24ff33;
}
/*ul的最后一个子元素*/
ul li:last-child{background: red;
}
/*选中p1: 定位到父元素，选择当前的第一个元素选择当前p元素的父级元素，选中父级元素的第一个并且是当前元素才生效！*/
p:nth-child(2){background: #67e4ff;
}
/*选中父元素下的p元素的第二个，类型 */
p:nth-of-type(2){background: yellow;
}
4.属性选择器
- id + class 结合
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性选择器</title><style>.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: aquamarine;text-align: center;color: gray;text-decoration: none;margin-right: 5px;line-height:50px;font: bold 20px/50px Arial;}/*属性名,属性名 = 属性值（正则）= 表示绝对等于*= 表示包含^= 表示以...开头$= 表示以...结尾存在id属性的元素a[]{}*/a[id]{background: deeppink;}a[id=first]{/*id=first的元素*/background: greenyellow;}a[class*="links"]{/*class 中有links的元素*/background: green;}a[href^=http]{/*选中href中以http开头的元素*/background: aquamarine;}a[href$=pdf]{/*选中href中以http开头的元素*/background: aquamarine;}</style>
</head>
<body>
<p class="demo"><a href="https://www.taobao.com/" class="links item first" id="first">淘宝</a><a href="" class="links item active" target="_blank " title="test">链接</a><a href="img/hello.html" class="links item">网页</a><a href="img/str1.png" class="links item">png</a><a href="img/str2.jpg" class="links item">jpg</a><a href="abc" class="links item">链2</a><a href="/fy.pdf" class="links item">pdf</a><a href="/quit.pdf" class="links item">pdf2</a><a href="dump.doc" class="links item">doc</a><a href="kiko.doc" class="links item last">doc2</a>
</p>
</body>
</html>
四、美化网页元素
1.为什么要美化网页
- 有效的传递页面信息
- 美化网页，页面漂亮才能吸引客户
- 凸显页面的主题
- 提高用户的体验
/*span标签：重点要突出的字，使用span标签套起来*/
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>美化网页</title><style>#title{font-size: 25px;}</style>
</head>
<body>
编程语言:<span id="title">Java</span>
</body>
</html>
2.字体样式
- font-family：字体
- font-size：字体大小
- font-weight：字体粗细
- color：字体颜色
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{font-family: "Arial Black";color: dodgerblue;}h1{font-size: 25px;}.p1{font-weight: 600;color: chocolate;}</style>
</head>
<body>
<h1>标题</h1>
<p>正文6699</p>
<p class="p1">正文4444444</p>
<p>Study English and Computer</p>
</body>
</html>
3.文本样式
- 颜色：color:agb / rgba()
- 文本对齐方式：text-align：center
- 首行缩进：text-indent：2em
- 行高：line-height：300px
- 下划线：text-decoration
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>h1{color: rgba(0,255,255,0.9);text-align: center;}.p1{text-indent:2em;}.p3{line-height:300px;background: mediumaquamarine;height: 300px;}/*下划线*/.l1{text-decoration: underline;}/*中划线*/.l2{text-decoration: line-through;}/*上划线*/.l3{text-decoration: overline;}/*超链接去下划线*/a{text-decoration: none;}</style>
</head>
<body>
<a href="">4399-7k7k</a>
<p class="l1">123123123</p>
<p class="l2">123123123</p>
<p class="l3">123123123</p>
<h1>概述</h1>
<p class="p1">夸克一词是盖尔曼取自詹姆斯·乔伊斯的小说《芬尼根的守灵夜》的词句“向麦克老人三呼夸克（Three quarks for Muster Mark）”。无非是指一个质子中有三个夸克。另外夸克在该书中具有多种含义，其中之一是一种海鸟的叫声。他认为，这适合他最初认为“基本粒子不基本、基本电荷非整数”的奇特想法，同时他也指出这只是一个笑话，这是对矫饰的科学语言的反抗。另外，也可能是出于他对鸟类的喜爱。 [7]盖尔曼原本想用鸭的叫声来命名夸克。开始时他并不太确定自己这个新词的实际拼法，直到他在詹姆斯·乔伊斯小说《芬尼根守灵夜》里面找到“夸克”这个词
</p>
<p>在1963年，我把核子的基本构成命名为“夸克”（quark），我先有的是声音，而没有拼法，所以当时也可以写成“郭克”（kwork）。不久之后，在我偶尔翻阅詹姆斯·乔伊斯所著的《芬尼根守灵夜》时，我在“向麦克老大三呼夸克”这句中看到夸克这个词。由于“夸克”（字面上意为海鸥的叫声）很明显是要跟“麦克”及其他这样的词押韵，所以我要找个借口让它读起来像“郭克”。但是书中代表的是酒馆老板伊厄威克的梦，词源多是同时有好几种。书中的词很多时候是酒馆点酒用的词。所以我认为或许“向麦克老大三呼夸克”源头可能是“敬麦克老大三个夸脱”，那么我要它读“郭克”也不是完全没根据。再怎么样，字句里的三跟自然中夸克的性质完全不谋而合。
</p>
<p class="p3">茨威格则用“埃斯”（Ace）来称呼他所理论化的粒子，但是在夸克模型被广泛接纳时，盖尔曼的用词就变得很有名。很多中国物理学家则称夸克为“层子”，在台湾地区亦曾翻译“亏子”，但并不普遍使用。
</p>
</body>
</html>
4.阴影
/*阴影的颜色，水平偏移，垂直偏移，阴影半径*/
#price{text-shadow: deepskyblue 10px 10px 2px;
}
5.超链接伪类
/*默认的颜色*/
a{text-decoration: none;color: #000000;
}
/*鼠标悬浮的状态（只需要记住）*/
a:hover{color: orange;font-size: 50px;
}
6.列表
/*ul li*/
/*circle 空心圆decimal 数字square 正方形*/
/*ul li*/
ul {background: grey;
}
ul li{height: 30px; /*行高*/list-style: none; /*去掉圆点*/text-indent: 1em;
}
7.背景
- 背景颜色：background
background-image:url(""); /* 默认是全部平铺的 */
background-repeat:repeat-x; /* 水平平铺 */
background-repeat:repeat-y; /* 垂直平铺 */
background-repeat:no-repeat; /* 不平铺 */
- 背景图片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 1000px;height: 700px;border: 1px solid red;background-image: url("images/ceshi.jpeg");/*默认是全部平铺的*/}.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>
8.渐变
- 渐变背景网址：https://www.grabient.com
- 径向渐变、圆形渐变
body{background-color: #0cd7f3;background-image: linear-gradient(43deg, #0093E9 0%, #80D0C7 46%, #23F549 100%);
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景</title><style>body{background-color: #08AEEA;background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);}div{width: 500px;height: 200px;border: 1px solid mediumaquamarine;background-image: url("img/str.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>
五、盒子模型
1.什么是盒子模型
- margin：外边距
- padding：内边距
- border：边框
2.边框
- 边框的粗细
- 边框的样式
- 边框的颜色
/* 边框大小 边框样式 边框颜色 */
border: 1px solid #000000;
3.内外边距
- margin：外边距
- padding：内边距
/*当margin/padding有一个参数，上下左右，都有边距有二个参数，上下，左右，表示四个参数时，上，右，下，左，表示
*/margin：0 1px 2px 3px;
盒子的计算方式：元素到底多大？
- margin+border+padding+内容宽度
4.圆角边框
- 4个角
div{width: 100px;height: 50px;margin: 30px;border: 2px solid red;border-radius: 50px 50px 0px 0px; /* 和边距的参数一样，左上，右上，右下，左下 */
}
5.阴影
/*
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。
*/
text-shadow: h-shadow v-shadow blur color;
六、浮动
1.标准文档流
- 块级元素：独占一行
<!-- h1-h6 p div ... -->
- 行内元素：不独占一行
<!-- span a img strong ... -->
- 注意：块级元素可以存在行内元素。
2.display
- block：块元素；
- inline：行内元素；
- inline-block：是块元素，但是可以内联，在一行；
- 这也是一种实现行内元素排列的方式，但是我们很多情况用float。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>dispaly</title><style>/*block: 块元素inline: 行内元素inline-block: 块元素，但是可以内联none: 隐藏*/div{width: 100px;height: 100px;border: 1px solid darkorange;display: inline-block;}span{width: 100px;height: 100px;border: 1px solid darkorange;display: inline-block;}</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
3.float
- 左右浮动
- 浮动的元素会脱离标准流
div{float: right;/*向右浮动*/
}
4.父级边框塌陷问题
/*
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none; 不允许有浮动元素
*/
.text{clear:both;
}
解决父级边框塌陷问题：
- 增加父级元素高度
#body{border: 1px #000 solid;height: 800px;
}
- 增加一个空的div标签，清除浮动
<div class="clear"></div>
.clear{clear: both;margin: 0;padding: 0;
}
- 父类添加一个伪类：after
#body:after{content: '';display: block;clear: both;
}
七、定位
1.相对定位
- 相对定位：positon：relstive；
- 相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置会被保留。
top:-20px; /* 向上偏移20px */
left:20px; /* 向右偏移20px */
bottom:10px; /* 向上偏移10px */
right:20px; /* 向左偏移20px */
2.相对定位
- 定位：基于xxx定位，上下左右
- 没有父级元素定位的前提下，相对于游览器定位
- 假设父级元素村咋i定位，我们通常会相对于父级元素进行便宜
- 在父级元素范围内移动
- 相对于父级或者游览器的位置，进行指定的偏移，绝对定位后，它仍然在标准文档流中，原来的位置不会被保留
div{position: absolute;/*绝对定位*/top: -20px;/*相对当前的位置 向上移动，负值相反方向*/left: 20px;/*相对当前的位置 向右移动*/
}
3.固定定位
- 固定定位使元素的位置相对于浏览器窗口来定位
- 即使窗口是滚动的它也不会移动
div{position: fixed;/*固定定位*/right: 0;bottom: 0;
}
4.z-index
- 图层，用定位的时候会产生会和其他元素重叠
- 相当于上一层盖住了下一层的内容
div{z-index:2;
}
八、动画
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<style>
div{width:100px;height:100px;background:red;animation:myfirst 5s; /* 动画执行时间 */
}
@keyframes myfirst{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}
}
</style>
</head>
<body><div></div>
</body>
</html>