(:◎)≡前端学习之CsS篇

前端学习之CSS篇

1.CSS简介
2.CSS语法规范
3.CSS选择器
- （1）标签选择器
- （2）类选择器
- （3）id选择器
- （4）通配符选择器
- （5）选择器总结
4.CSS字体属性
5.CSS文本属性
6.CSS的引入方式
7.Chrome调试工具
8.Emmet语法的使用
9.复合选择器
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
- 后代选择器
10.CSS的元素显示模式
- 让文字在块元素内居中
11.CSS背景
12.CSS三大特性
13.盒子模型
14.浮动
15.常见网页布局
16.清除浮动
17.定位
18.元素的显示与隐藏
19.精灵图和字体图标
20.css新样式--三角、用户界面样式vertical-align、溢出
21.html5新特性
22.CSS3
23.网页制作流程
24.2D--动画--3D

注明：该文章仅为笔记所用，图片截至视频内容，侵权必删，出处为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个不能省）