文章目录
2021/12/26
一、CSS
（1）如何学习
- CSS是什么
- CSS怎么用
- CSS选择器（重点+难点）
- 美化页面（文字，阴影，超链接，列表，渐变…）
- 盒子模型
- 浮动
- 定位
- 网页动画（特效效果）
- 推荐网站（W3C，菜鸟教程）
（2)选择器与常用属性
2.1常用的CSS选择器：
1.元素选择器：h1, img, p
demo：
<style>
/* 选择器 */
h1 {
/* 字体颜色*/
color: red;
/* 字体大小 */
font-size: 120px;
}
</style>
<body>
<h1>world</h1>
</body>
2.类选择器：.name
.test {
/* 字体颜色*/
color: green;
/* 字体大小 */
font-size: 120px;
}
</style>
</head>
<body>
<h1 class="test">hello world</h1>
3.id选择器：#id
<style>
/* id选择器 */
#test {
/* 字体颜色*/
color: blue;
/* 字体大小 */
font-size: 120px;
}
</style>
</head>
<body>
<h1 id="test">hello world</h1>
</body>
一个id选择器只能指定一个元素
但是类选择器可以指定多个
<style>
/* 选择器 */
.test {
/* 字体颜色*/
color: blue;
/* 字体大小 */
font-size: 120px;
}
</style>
</head>
<body>
<h1 class="test">hello world</h1>
<p class="test">sz </p>
工作的时候，每个公司都会有开发规范，到时候会指定用id还是class。
4.通配符选择器：*
找到整个页面的所有标签，统一化就可以用通配符选择器
* {
/* 字体颜色*/
color: blue;
/* 字体大小 */
font-size: 12px;
}
</style>
</head>
<body>
<h1 class="test">hello h1</h1>
<p class="test">hello p </p>
<a href="">hello a </a>
2.2常用的CSS属性
字体大小：font-size
字体颜色：color
宽度：width
高度：height
背景颜色：background-color
文本水平居中：text-align
文本行高（垂直居中）：line-height
1.demo:
/* 选择器 */
.demo {
/* chrome浏览器，font-size最小值是12px */
font-size: 50px;
color: red;
background-color: black;
/* 文字水平居中 */
text-align: center;
/* 文字的行高 */
line-height: 100px;
/* 一般用来设置文本每行的高度，一行文本的话可以实现垂直居中 */
}
img {
width: 500px;
height: auto;
}
</style>
2.图设置长宽的时候，图片容易拉伸看不清
img {
width: 300px;
height: 200px;
}
所以一般设置宽度，高度：auto，会根据原图片比例进行自动调整
或者只设置宽度，高度默认自动。
img{
width: 300px;
height: auto;
}
3.水平居中和垂直居中区别：
水平居中：就是横的中间，左右 是居中。
垂直居中:就是竖的中间，上下是居中
2.3连接样式
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
二、JavaScript
（1）parseInt()
16进制转化为10进制：
var a = 'b';//11，还没到16,不进1
//十六进制0123456789abcdef
console.log(parseInt(a, 16));//输出11 范围（2-36进制）
console.log(parseInt('abc123'));//NAN 非数字转化成number类型就是NAN
console.log(parseInt('123abc'));//123 ,它会从第一位开始看，如果第一位不是数字就是NAN
（2）parseFloat()
console.log(parseFloat(3.1415926));//3.1415926
保留小数点两位
var num = prompt('请输入一个数');
var num2 = parseFloat(num);
console.log(num2.toFixed(2))//保留小数点几位 (四舍五入)
(3) string类型转换：
//转换为字符串类，+最常用
//+ 又称之为隐式转换
var num = 10;
//1.加号拼接字符串 (和字符串拼接的结果都是字符串)
console.log(typeof ('' + num));//string类型
//2. .toString()
var num = 123;
var str = num.toString();
console.log(typeof str);
var str = undefined;
console.log(str.toString());//报错
var str = null;
console.log(str.toString());//报错
//3.我们利用String()
console.log(typeof (String(123)));//string 用的不是很多,最多用的就是''+num
.toString()的进制转换：
var str = '100';
//.toString(radix)里面有参数
console.log(parseInt(str, 2).toString(16));//4 过程：str二进制转化成10进制再转化成16进制
(4)Boolean
console.log(Boolean(1));//true
console.log(Boolean(null)); //false
console.log(Boolean(undefined));//false
打印出false的有：
undefined null NAN "" 0 false
其他的都是true
三、想问的问题
1.企业开发中，css里面的颜色是用的多的是16进制还是rgb格式还是直接写颜色名的多？
ym回答：16进制,当然要按照企业给的页面设计稿（上面会有颜色参数）
一般改颜色的方式：用snipaste软件，F1吸取想要改的颜色，然后按C复制颜色属性参数（16进制）
shift可以切换颜色格式（支持16进制和rgb格式）
qq截图只有rgb格式：
2.什么是cdn分发,什么是favicon？
四、学到的新东西
(1)typora设置
1.1typora中如何设置字体自定义样式
如图：
步骤一：
可以查看作者的字体被什么标签包裹
如下图的<p>标签下的<Code>标签
<code></code>标签:
定义和用法
<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。
软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code> 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来，对于大多数程序员和 W3School 的用户来说，这应该是十分熟悉的。
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 <code> 标签。虽然 <code> 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如，程序员的浏览器可能会寻找 <code> 片段，并执行某些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。
步骤二：
选择styles，将.markdown-body code{}里面的属性全部复制过来
步骤三：
在typora里面找到：文件->偏好设置->外观->打开主题文件夹，选择 主题名.css文本（白色的默认是github.css）
步骤四：crtl+f查找code{},然后把刚刚复制作者的属性样式全部覆盖到里面，或者按照自己的喜好修改颜色字体尺寸
步骤五：
保存，重启typora，再写或者``(可以crtl+/启用开发者源码模式，也可以直接写)。
光标移动到下一行就可以预览（标签隐藏）
1.2设置字体样式
<font></font>标签
颜色用color属性（支持rgb和16进制）
改变大小用size属性：
改变字体用face属性（字体需要加双引号）
还可以混合使用，属性之间用空格间隔
1.3插入图片的位置
1.插入图片靠左对齐：
方法一（手动）：
方法二（手动，比较推荐，粘贴或插入完图片直接按Tab键就可以靠左对齐）：
方法三：
CSS样式（自动靠左对齐，比较灵活，可以设置任意水平对其方式）
设置路径：文件>偏好设置>外观>打开主题文件夹，选择使用的主题的css文件打开（默认主题为github.css），在最后插入如下css代码。
p .md-image:only-child{
width: auto;
text-align: left;//或者text-align:inherit;
}
注意：对于已经打开的文件，更改css文件后要重启Typora软件才生效。
扫一扫
571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
