前端学习之CSS篇
注明：该文章仅为笔记所用，图片截至视频内容，侵权必删，出处为b站pink老师
1.CSS简介
2.CSS语法规范
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体验语法规范</title>
<style>
/* 选择器{样式} */
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
</html>
运行结果如下：
----------分割线----------
3.CSS选择器
（1）标签选择器
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02标签选择器</title>
<style>
p {
color: green;
}
div {
color: pink;
}
</style>
</head>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>
运行结果如下：
----------分割线----------
（2）类选择器
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03类选择器</title>
<style>
/*口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用 */
.red {
color: red;
}
</style>
</head>
<body>
<ul>
<li class="red">冰雨</li>
<li>一剪梅</li>
<li>生僻字</li>
</ul>
</body>
</html>
运行结果如下：
----------分割线----------
多类名选择器用法（在复杂的页面下超级好用）
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05类选择器-多类名</title>
<style>
.red {
color: red;
}
.font35 {
font-size: 35px;
}
</style>
</head>
<body>
<div class="red font35">刘德华</div>
</body>
</html>
----------分割线----------
（3）id选择器
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06id选择器</title>
<style>
/* 样式#定义，结构id调用，只能调用一次，别人切勿使用 */
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">迈克尔·杰克逊</div>
</body>
</html>
----------分割线----------
（4）通配符选择器
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07通配符选择器</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>我的</div>
<span>我的</span>
<ul>
<li>还是我的</li>
</ul>
</body>
</html>
----------分割线----------
（5）选择器总结
4.CSS字体属性
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08css字体</title>
<style>
body {
/* 字体系列：字体之间逗号隔开，字体名几部分用引号框住，浏览器按顺序识别字体，最好用默认字体 */
font-family: 'Microsoft Yahei',tahoma,arial,'Hiragino Sans GB';
/* 字体大小 */
font-size: 16px;
}
h1 {
/* 字体大小 */
/* 标题标签比较特殊，需要单独指定 */
font-size: 16px;
}
.bold{
/* 字体粗细 */
/* font-weight: bold; */
/* 400是标准,即normal,700是粗体 */
font-weight: 700;
}
.unitalic {
/* 字体斜体 不常用 一般是把斜的弄成不屑的*/
/*font-style: italic; */
font-style: normal;
}
.fuhe {
/* 复合属性：简写的方式 顺序不可改 前2可省后2不可省*/
/* font: font-style font-weight font-size/line-height font-family */
font: italic 700 16px '微软雅黑';
}
</style>
</head>
<body>
<h1>你好</h1>
<p class="bold">我是你爹</p>
<em class="unitalic">我是不是斜的</em>
<p class="fuhe">经典复合怪</p>
</body>
</html>
----------分割线----------
5.CSS文本属性
网页量尺：
总结：
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本属性</title>
<style>
.color {
/* 文字颜色 */
/* 颜色选取的3种形式，名字，十六进制，rgb */
/* color: red; */
/* color: #703180; */
color: rgb(255, 0,0);
}
.duiqi {
/* 文本对齐 */
/* left right center */
text-align: center;
}
.decoration {
/* 装饰文本 */
/* none underline overline line-through */
text-decoration: line-through;
}
.indent {
/* 文本缩进 */
/* em相对于当前文字大小的一个字的单位 */
text-indent: 2em;
}
.jianju {
line-height: 26px;
}
</style>
</head>
<body>
<div class="color">我是什么颜色</div>
<h1 class="duiqi">居中对齐</h1>
<div class="decoration indent jianju">把你的心我的心串一串</div>
</body>
</html>
----------分割线----------
6.CSS的引入方式
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>
css引入
</title>
<style>
/* style理论上可以放在本页面的任何地方,但一般放在head里面 */
.color {
color:rgb(226, 4, 4);
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="color">内部样式表</div>
<div style="color:rgb(115, 16, 207); font-size: 12px;">行内样式表</div>
<div class="color1">外部样式表</div>
</body>
</html>
----------分割线----------
7.Chrome调试工具
8.Emmet语法的使用
9.复合选择器
后代选择器
子选择器
并集选择器
伪类选择器
后代选择器
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器</title>
</head>
<body>
<!-- 后代选择器 -->
<ol>
<li>我是ol的儿子</li>
<li><a href="#">我是你爹</a></li>
</ol>
<ul>
<li>我是ul的儿子</li>
</ul>
<ul class="nav">
<li><a href="#">我是你爷</a></li>
</ul>
<style>
/* 后代选择器 */
ol li {
color: pink;
}
ul li {
color: red;
}
ol li a {
color: black;
}
.nav li a {
color: yellow;
}
</style>
<!-- 子选择器 -->
<div class="navie">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
<style>
/* 子选择器 */
.navie>a {
color: red;
}
</style>
<!-- 并集选择器 -->
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
<style>
/* 并集选择器 */
div,
p,
.pig li {
color: pink;
}
</style>
<!-- 伪类选择器 -->
<a class="wei" href="#">小猪奇奇</a>
<br>
<input type="text">
<style>
/* 未访问过的链接 */
.wei,
a:link {
color: red;
text-decoration: none;
}
/* 已经访问过的连接 */
.wei,
a:visited {
color: green;
}
/* 鼠标放在上面的时候 */
.wei,
a:hover {
color: greenyellow;
}
/* 鼠标正在按下还没松开的时候 */
.wei,
a:active {
color: slateblue;
}
/* 把获得光标的input表单元素选取出来 */
input:focus {
background-color: springgreen;
color: tomato;
}
</style>
</body>
</html>
----------分割线----------
10.CSS的元素显示模式
让文字在块元素内居中
11.CSS背景
12.CSS三大特性
13.盒子模型
14.浮动
15.常见网页布局
16.清除浮动
17.定位
18.元素的显示与隐藏
19.精灵图和字体图标
如何使用：点进demo.html，然后复制他的小正方形，然后再在给他的标签加入font-family。
20.css新样式–三角、用户界面样式vertical-align、溢出
（transparent是透明的意思）
（先写个大盒子，然后在里面放一个小的，然后再定位）
（文本域写在同一行，不然里面会有空格）
（只要给父盒子添加这个，里面的所有的行内元素和行内块元素都会水平居中）
#css初始化代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清楚内外边距 */
* {
margin: 0;
padding: 0
}
/* 斜体文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li的小圆点 */
li {
list-style: none
}
/* border：0是照顾低版本浏览器，如果图片外卖包含链接会有边框的问题 */
img {
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当鼠标经过button的时候鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* 抗锯齿性，让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
/* 字体12，1.5倍行高 */
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
</style>
</head>
<body>
</body>
</html>
21.html5新特性
22.CSS3
（如果想写多个属性，利用逗号进行分割）
23.网页制作流程
24.2D–动画–3D
简写：（前2个不能省）
4305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
