前言
本文为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; }
