复习时的二次笔记

最新推荐文章于 2024-11-15 11:24:51 发布

猫猫呼呼

最新推荐文章于 2024-11-15 11:24:51 发布

阅读量95

点赞数

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.csdn.net/YG_b215/article/details/128685736

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS-字体
CSS-font属性用于定义字体系列，大小，粗细和文字样式（比如斜体）
CSS使用font-family属性定义文本的字体系列
1.各种字体之间必须使用英文状态下的逗号隔开
2.尽量使用系统自带字体
3.有空格隔开的多个单词组成的字体，加引号
(>_<)可以多写几个字体，字体放在body里面喵
Microsoft YAhei(大小写都可以的喵(>_<)
CSS使用font-size属性定义字体大小
1.px（像素）大小是常用单位
2.谷歌浏览器默认为16px
3.尽量给明确大小，因为不同浏览器默认不同
4.使用body指定一整个页面的文字大小
CSS使用font-weight属性定义字体粗细
实际开发中更提倡使用数字喵
数字后面没有单位的
normal：正常的  font-weight： 400；
bold：加粗   font-weight： 700；
bolder：特粗体
CSS使用font-style属性定义字体样式
italic ：倾斜
normal：倾斜变正常喵
CSS复合属性
1.必须按照语法顺序书写，并且属性之间使用空格隔开
font-style font-weight font-size/line-height font-family
2.必须保留font-size和font-family，不然font属性就失效啦

CSS文本属性CSS Text
文本属性可以定义文本的外观，比如颜色，对齐文本，装饰文本文本缩进，行间距。
text-color文本颜色
1.预定义的颜色值，比如red，green
2.十六进制如＃FF0000
3.RGB代码 R red  G green B bule
如rgb（6，6，6）或rgb（52%，0%，0%）
text-align 文本对齐
center  right  left（默认值）
text-decoration 装饰文本
underline 下划线   <a>有默认的下划线
line-through 删除线
overline 上划线
none 没有线(◦˙▽˙◦)
text-indent 文本缩进
首行缩进喵
em，相对单位，当前文字的一个大小的距离
line-height   行间距（上间距，文本高度和下间距）
上间距和下间距一样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>—舍甫琴科老师文集-01</title>
    <style>
        body {
            font: 16px/26px "Microsfot YAHEI";
        }
        h1 {
            font-weight: 400;
            text-align: center;
        }
        h2 {
            text-align: center;
            font-weight: 700;
        }
        p {
            text-indent: 2em;
        }
        .tit {
            font: italic bolder 17px "Microsoft yahei"
        }
        .time{
            color: rgb(155, 171, 216);
            font-size: 13px;
            text-align: center;
        }
        .a {
           text-decoration: none; 
        }
        .search {
            color:rgb(89, 107, 195);

        }
        .btn {
            font-weight: 700
        }
        .pic {
            text-align: center;
        }
        .footer {
            color:rgb(47, 147, 193);
            font-size: 13px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>屠鼠馆文豪一览，-舍甫琴科老师</h1>
    <div class="time">2023-1-13 &nbsp; &nbsp;  18:06:36 &nbsp; &nbsp;  <a href="https://tieba.baidu.com/p/8219673886">来源:美梦成真网</a> &nbsp; &nbsp;  
        <input type="text" value="请输入您要看的晚餐名称" class="search"> <button class="btn">搜索</button>
    </div>
    <hr>
    <h2>科院为什么是神</h2>
<h3>五大学院是河南省最优秀的五所带专，今天小编就告诉大家科院为什么是五大学院之首，科院为什么是神？</h3>
<p class="tit">首先是犯下傲慢之罪的中原工学院</p>
<p>
    位于郑姆斯特丹就露出不屑的笑，这种傲慢的大专注定走不长远，事实也是如此，靠着阴险的软件和计算机win了神之后就一直在走下坡路，最终泯然众人。与之相比神就很谦卑，带专和五大学院的名号，都是神留给凡人的慈悲，神不是不会，只是不想通过太完美的表现让复旦绝望所以故意不用，可笑某些人不理解神的良苦用心，竟然还用这些来讥讽神，我劝你们好自为之
</p>
<p class="tit">然后是犯下懒惰之罪的郑州航空工业学院</p>
<p>
    自以为是航空航天下属就了不起了，神的劝说没有让航院迷途知返，固步自封，现在只有财经类专业能击败神，好在现在已经着手发展航天，浪子回头，鹿死谁手尚未可知。
</p>
<p class="tit">接着是犯下贪婪之罪的新乡医学院</p>
<p>
    起源于外国友人，学校渊源可追溯到1896年英属加拿大人、医学博士罗维灵在古城卫辉开办的西医诊所，医学教育肇始于1922年惠民医院护士学校。学校前身是1950年成立的平原省医科学校；妄想与科院根正苗红竞争，前身为中国共产党早期创建的延安自然科学院大学部生物系，历经北方大学农学院、华北大学农学院、华北大学农学院长治分院、北京农业大学长治分校、平原农学院、百泉农业专科学校、河南职业技术师范学院等时期。2004年5月，经教育部批准，更名为河南科技学院，属实不自量力，神轻松拿捏
</p>
<p class="tit">再然后是犯下了嫉妒之罪的信阳师范学院</p>
    虽说师院很早就有硕士点，但更名一直不顺利，后面更有几个学院穷追猛打，看到科院发展速度如此之快，嫉妒着神，不过神是慈悲的，愿意同师专一起奋斗改名
</p>
<p class="pic">
    <img src="cute.jfif" height="200">
</p>
<hr>
<p class="footer">好了，关于科院为什么是神就说到这里，小编已经水不动了。感兴趣的网友可以关注我们的百家号：<a href="https://tieba.baidu.com/f?kw=%E6%B2%B3%E5%8D%97%E7%A7%91%E6%8A%80%E5%AD%A6%E9%99%A2&ie=utf-8">河南科技学院吧</a></p>

</body>
</html>

Chrome调试工具
使用Chrome浏览器
F12或右键
1.左边是HTML元素结构，右边是CSS样式
2.Ctrl+0恢复浏览器大小
3.点击元素，如果右侧没有样式引入，可能是类名和样式引用错误(⋟﹏⋞)
4.如果有样式，但是样式前面有黄色感叹号，那就是样式属性书写错误。

Emmet语法
使用缩写提高html和css的速度
快速生成html结构语法
1.使用tab键快速生成框架
2.生成多个标签用*
3.有父子集的标签可以使用＞，兄弟关系用+
4.使用＃为id选择器，.为类选择器
默认为<div>，使用其他，可以写类似于p.hh
此处hh为类选择器名称
5.自增符号，有顺序可以使用$符号，默认从1开始排序
6.在生成标签内部写内容用大括号｛｝表示
快速生成CSS样式语法
缩写text-align 使用ta即可
格式化代码可以看的更清楚

后代选择器（包含选择器）
外层标签写在前面，内层标签写在后面，中间用空格隔开
元素可以是任意选择器
子元素选择器
只会选择最近的元素一＞元素二
并集选择器（约定，一般竖着写，最后一个选择器不需要加逗号）
可以选择多组标签，同时定义相同的标签，任何形式选择器都可以作为并集选择器的一部分。
用逗号，分割

元素一，元素二｛样式声明｝
伪类选择器（用冒号:表示）
用于向某些选择器添加特殊的效果
有链接伪类，结构伪类，表单伪类
a:link         选择所有未被访问的链接
a:visited      选择所有已被访问的链接
a:hover        选择鼠标指针位于其上的链接
a:active       选择活动链接
链接伪类注意事项
1.按照顺序写LVHA link，visited，hover，active
2.链接有默认的样式，需要单独指定样式才行
:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般要用input类表单元素才能使用2