font，选择器，外观样式

最新推荐文章于 2022-09-23 07:09:43 发布

海伦•

最新推荐文章于 2022-09-23 07:09:43 发布

阅读量290

点赞数 1

分类专栏： ==========前端========= CSS

本文链接：https://blog.csdn.net/qq_42794545/article/details/88908207

版权

==========前端========= 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

1.font

font-size ：大小一般单位px
font-family：字体
nunicode字体：更兼容。
宋体：SimSum---》“/5B8B/4F53”
微软雅黑：Marcrosoft-->"\5FAE\8F6F\96C5\9ED1"
font-weight：字体粗细 100 - 900 一般用normal，和，bold
font - style：normal，italic
font：[ [ <' font-style '> || <' font-variant '> || <' font-weight '> ]? <' font-size '> [ / <' line-height '> ]? <' font-family '> ]

2.选择器

标签选择器
类选择器 : .类名{ }
多类名选择器
id选择器
通配符选择器：*指的是所有的标签
链接伪类选择器：：link{} ：visited{} ：hover{} ：active{} 注意顺序。可以简写a：hover{}
结构伪类选择器：li：first-child{} 或者li：nth-child（odd/2n/even/2n + 1/n）{} 或者li：nth-last-child（odd/2n/even/2n + 1/n）{}
目标伪类选择器：：target{}

案例：

<!DOCTYPE html>  <!--DOCTYPE :文档类型 -->
<html> 
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>常用标签</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <!-- base 设置 总体默认格式 -->
    <base target="_blank">
    <style>
        img{/* 标签选择器 */
            width: 300px;
            height: 200px;
            
        }
        div{
           color: #e22b5cfc;
        }
        .head{/* 类选择器 */
            color: black;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            font-size: 42px;
        }
        #declear{
            font-style: italic;
        }
        *{/* 通配符 */
            color: darkslateblue;
        }
        a:hover{/* 链接伪类选择器 */
            color: olivedrab;
            font-size: 32px;
            font-family: "宋体";
        }
        li:nth-child(2n + 1){/* 结构伪类选择器 */
            color: midnightblue;
            font-size: 30px;
        }
        :target{/* 目标伪类选择器 */
            color: darkolivegreen;
            font-size: 30px;
        }
    </style>
</head>


<body>  <!-- body 和 h2 是嵌套的关系 -->
    <h2 class="head">这周，实现了一个小目标，拿到了阿里的offer</h2>
    2019年03月22日 17:44:43 bit_kaki 阅读数：1008更多<br><!-- 水平线 -->
    <!-- 锚点定位 -->
    <a href="#end" target="_self">下滑到底部</a>
<!-- b是加粗该字段 -->
<b id="start" >个人分类： </b> 
<p id="declear">版权声明：本文为博主原创文章，未经博主允许不得转载。</p>


<!-- 超链接的 href 属性 是必填 -->
<a href="https://blog.csdn.net/bit_kaki/article/details/88745124" alt = "博客地址">博主博客链接</a>
<hr>


<!-- div 表容器 -->
         <div>1.在我读书尤其是读研的时候，我的师兄师姐大都后来去了事业单位。当时整个周围的环境几乎所有人也大都是以进事业单位或者公务员为荣，<br/>
 <!-- 加粗 --> 
         <strong>所以我在学生时代基本上都是考虑将来去个研究所，并且后来毕业后我也就真的就去了个研究所。</strong> <br/>
 <!-- 斜体 --> 
         <em>
            去了研究所后才发现，其实在里面也就不过如此，和心里想象的工作完全不一样。以前总觉得研究所里的人应该是穿着白大褂的怪蜀黍，做着科研，
            然后一不小心就能做出改变的事情。但实际上，真的很让人失望。
          </em><br/>
 <!-- 删除线 --> 
         <del>
            我也是这个时候了解到更多关于阿里的信息。
          </del><br/>
 <!-- 下划线 --> 
         <ins>
            除了已经用习惯的支付宝、淘宝等以外，也真的觉得它做出了很多改变我们生活方式的事情，所以我期待有一天自己也能去阿里，也能在那里通过自己努力让这个世界更美好一点，哪怕是一点点。
          </ins><br/>

       <ol>
           <li>
       能去阿里的人本身就很厉害，而他们在阿里里接触到的都是亿万级用户的项目，用到的技术也是能引领时代潮流的技术，还能和各类大佬近距离接触，时不时接受各种培训。           
               
           </li>

           <li>
            这些事和自己所做的事情比较起来，感觉差距好像越拉越大。
               
           </li>
           <li>
            所以一度我认为我这辈子来不了阿里了。
               
           </li>
           <li>
       去年我先后有阿里的朋友、师兄和我联系，问我是否考虑阿里。实话来说当时我心里还是很没底的，但我想人嘛，总该给自己定个目标啥的，于是我就说明年，我一定要来阿里。<br>           
               
           </li>
       </ol>
      
      
       
       </div><br/>
       
     
<!-- 换行 -->
       

       </div>

<!-- img 的 src 属性必填 alt 属性表示是如果加载不出则显示改文本 -->
      <img src="https://img-blog.csdnimg.cn/20190322174144551.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpdF9rYWtp,size_16,color_FFFFFF,t_70">
      <br/>
      <img src="https://img-blog.csdnimg.cn/20190322174215666.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpdF9rYWtp,size_16,color_FFFFFF,t_70">
      <br/>
      <br/>
       <span>当时我也把我的微博签名改成了，下一站一定是阿里巴巴。</span>
       <br/>
       <img src="https://img-blog.csdnimg.cn/2019032217483319.png">
       <br/>
 

       <span>终于，在这个礼拜，我收到了阿里的offer。算是实现了自己的一个梦想，也是实现了去年自己立下的flag吧！</span>
       <br/>
       <img src="https://img-blog.csdnimg.cn/20190322174852220.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpdF9rYWtp,size_16,color_FFFFFF,t_70">
       <br/>


       <div id="end">最近真的十分开心，感觉就跟做梦一般。新的起点，新的开始。未来几年，希望不让初心，继续努力加油吧！  </div>
     <a href="#start">回到顶部</a>
</body>
</html>

3.外观样式

line-height:单位一般为px比字体大七八像素
text-align：水平对齐方式
text-indent:首行缩进 em为单位
letter - spacing：字间距（中文）
word- spacing：单词间距（英文）
color：rgba（0，0,0,0.5）半透明
text-shadow：文字阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外观样式</title>
    <style>
         div{
             line-height: 30px;
             text-indent: 2em;
             letter-spacing: 6px;
         }
         h1{
             font-size: 100px;
             text-align: center;
             text-shadow:10px -1px 0px rgb(30, 21, 7, 0.5);
         }
    </style>
</head>
<body>
        <h1>数学</h1> 
    <div>
          
            数学是考研的重头戏，很拉分，而且数学考的好，复试很有优势，导师喜欢数学好的同学。
            
            3月-4月 高数上下册 看视频（张宇高数基础班）+刷题（李永乐全书）
            把高数上下课本过了一遍，然后看的张宇基础班视频。后来发现其实没必要。建议大家可以直接看宇哥的基础班视频，然后对应写李永乐全书，一开始可能很崩溃，因为还是比较难的，或者可以选择课后习题练练手在写李永乐全书。（如果觉得宇哥讲的很抽象，无法做题的同学，可以看看汤家凤的视频，汤老师人超级好，讲课很详细）
            5月 线代 看视频（李永乐线代基础班）+刷题（李永乐线代辅导讲义）
            线代毫无疑问推荐永乐大帝，跟着李永乐老师走美滋滋。每看一章视频，记得写讲义的习题。
            6月 概率论 看视频（汤家凤/王式安）+刷题（我用的是张宇的线代9讲）
            概率论的公式比较多，背好公式，做题就好很多。我看是的汤老师的概率基础班视频，然后刷题。
            7月-9月 强化阶段 看强化班视频（张宇）+刷题（汤家凤1800）
            要好好利用暑假阶段，考研人没有暑假，这是弯道超车的好机会。这段时间进入数学强化阶段，看看宇哥的强化视频，建立知识框架，然后刷1800基础题。整体过完一遍的，记得刷1800强化题。我当时1800是刷了2遍。
            10月-12月 冲刺阶段 真题（李永乐真题/张宇真题大全集）
            我选的是李永乐真题，因为一开始买了李永乐全套，不过张宇真题大全集也不错。十月初上真题，我是从1987年开始做的，每天上午写一套，晚上订正。大约3天2套卷。
            真题一定要好好研究，弄懂每一道题，至少刷两遍，先横向刷一遍，在纵向刷一遍。即第一遍按年份刷，第二遍按知识点分布刷。在12月后期我写了几套模拟卷，选的是张宇四套卷。但是现在考完之后，我觉得emmm…（你们要不还是写写李林的模拟卷吧），毕竟…
            --------------------- 
            作者：小橘子的AC之旅 
            来源：CSDN 
            原文：https://blog.csdn.net/qq_43493562/article/details/88877174 
            版权声明：本文为博主原创文章，转载请附上博文链接！
    </div>
</body>
</html>