[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Fresource\u002Fdocument\u002Flist?undefined":3,"\u002Fresource\u002Fdocument\u002Fquery\u002Fjo74ciirtg8wh90y?undefined":462,"\u002Fresource\u002Fadvertise\u002Flist?type=all?undefined":467},{"data":4,"status":460,"success":461},[5,148,202,291,332,370,420],{"books":6,"desc":145,"id":8,"image":146,"title":147},[7,40,63,78,93,105,117],{"cateId":8,"chapters":9,"desc":36,"id":11,"time":37,"title":38,"video":39},1,[10,15,18,21,24,27,30,33],{"bookId":11,"id":12,"indexOrder":13,"name":14},24,"8egfulw98v3h680j",0,"JavaSE 笔记（一）走进Java语言",{"bookId":11,"id":16,"indexOrder":13,"name":17},"pew6po6wrou23pk3","JavaSE 笔记（二）面向过程编程",{"bookId":11,"id":19,"indexOrder":13,"name":20},"eldst1fgrbdkmfs7","JavaSE 笔记（三）面向对象基础",{"bookId":11,"id":22,"indexOrder":13,"name":23},"48zphgkpjto8cath","JavaSE 笔记（四）面向对象高级篇",{"bookId":11,"id":25,"indexOrder":13,"name":26},"6r4llai92yc15j98","JavaSE 笔记（五）泛型程序设计",{"bookId":11,"id":28,"indexOrder":13,"name":29},"k6fmxd6qabgkwm9i","JavaSE 笔记（六）集合类与IO",{"bookId":11,"id":31,"indexOrder":13,"name":32},"qrd0xfttsz32gpqg","JavaSE 笔记（七）多线程与反射",{"bookId":11,"id":34,"indexOrder":13,"name":35},"td5tgn04nqmkrryt","JavaSE 笔记（八）GUI程序开发","基于Java25全新录制的SE课程",2025,"JavaSE 核心内容","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV163GGz2E8c",{"cateId":8,"chapters":41,"desc":59,"id":8,"time":60,"title":61,"video":62},[42,44,46,49,51,53,55,57],{"bookId":8,"id":43,"indexOrder":13,"name":14},"ibeeuwsbbi00undq",{"bookId":8,"id":45,"indexOrder":13,"name":17},"dncxjecdv4wciqcp",{"bookId":8,"id":47,"indexOrder":13,"name":48},"jviyz2hsht9ete5k","JavaSE 笔记（三）面向对象基础篇",{"bookId":8,"id":50,"indexOrder":13,"name":23},"qb9i6q9fap7bg1cc",{"bookId":8,"id":52,"indexOrder":13,"name":26},"hnkrjrkm3hjzeq6s",{"bookId":8,"id":54,"indexOrder":13,"name":29},"erpm32wduoaaqmrx",{"bookId":8,"id":56,"indexOrder":13,"name":32},"lfqtvxr7azumcwja",{"bookId":8,"id":58,"indexOrder":13,"name":35},"qs7gqok56gzc6idr","2022年制作的JavaSE版本",2022,"JavaSE 22年旧版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1YP4y1o75f\u002F",{"cateId":8,"chapters":64,"desc":75,"id":66,"time":60,"title":76,"video":77},[65,69,72],{"bookId":66,"id":67,"indexOrder":13,"name":68},2,"g96k66kczovvbm1i","JVM 笔记（一）走进JVM",{"bookId":66,"id":70,"indexOrder":13,"name":71},"ydd7n3jg8unc3clg","JVM 笔记（二）内存管理",{"bookId":66,"id":73,"indexOrder":13,"name":74},"r9dq37de0kaeauoi","JVM 笔记（三）类与类加载","了解Java的底层运作机制","Java JVM 虚拟机","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Er4y1r7as\u002F",{"cateId":8,"chapters":79,"desc":90,"id":81,"time":60,"title":91,"video":92},[80,84,87],{"bookId":81,"id":82,"indexOrder":13,"name":83},3,"asncyye9ya18gfar","JUC 笔记（一）再谈多线程",{"bookId":81,"id":85,"indexOrder":13,"name":86},"5tr1sm4ho6ygpt9q","JUC 笔记（二）并发编程核心",{"bookId":81,"id":88,"indexOrder":13,"name":89},"1scf51z5300mzxkh","JUC 笔记（三）并发编程进阶","你也可以成为多线程的主宰者","Java JUC 并发编程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1JT4y1S7K8\u002F",{"cateId":8,"chapters":94,"desc":102,"id":96,"time":60,"title":103,"video":104},[95,99],{"bookId":96,"id":97,"indexOrder":13,"name":98},4,"eedesc445ygiqhil","NIO 笔记（一）基础内容",{"bookId":96,"id":100,"indexOrder":13,"name":101},"ndz9t0uunrmfmv4n","NIO 笔记（二）Netty框架专题","编写畅快的高性能网络服务器","Java NIO 网络编程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1ar4y1J7mC\u002F",{"cateId":8,"chapters":106,"desc":114,"id":108,"time":60,"title":115,"video":116},[107,111],{"bookId":108,"id":109,"indexOrder":13,"name":110},5,"9890i8ofuadpwy2b","[扩展篇] Java 9-17新特性介绍",{"bookId":108,"id":112,"indexOrder":13,"name":113},"tsrkqvb6zpmtwh0n","[扩展篇] JavaSE关键字总结 笔记","精彩仍在继续，不要停止脚步","其他内容","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1tU4y1y7Fg\u002F",{"cateId":8,"chapters":118,"desc":141,"id":120,"time":142,"title":143,"video":144},[119,123,126,129,132,135,138],{"bookId":120,"id":121,"indexOrder":13,"name":122},6,"4db9h32opv7imszh","JavaSE 笔记（一）面向过程编程",{"bookId":120,"id":124,"indexOrder":13,"name":125},"c93u3v37br7hgn1q","JavaSE 笔记（二）面向对象基础篇",{"bookId":120,"id":127,"indexOrder":13,"name":128},"yglsjde9gi1jxkcb","JavaSE 笔记（三）泛型与集合类",{"bookId":120,"id":130,"indexOrder":13,"name":131},"ilhi987n986rmvo3","JavaSE 笔记（四）异常机制",{"bookId":120,"id":133,"indexOrder":13,"name":134},"pqv38vexmenglk4k","JavaSE 笔记（五）IO",{"bookId":120,"id":136,"indexOrder":13,"name":137},"jiq41n87i9ia7ilw","JavaSE 笔记（六）多线程",{"bookId":120,"id":139,"indexOrder":13,"name":140},"wn7x2mge9ws79zps","JavaSE 笔记（七）反射","此版本为早期录制的旧版本",2021,"JavaSE 21年旧版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Gv411T7pi\u002F","包含JavaSE基础路线全部教程笔记，打下坚实的基础","https:\u002F\u002Fpic2.zhimg.com\u002F80\u002Fv2-bf1a927f037a79f4d57d9ae543430a0d_1440w.webp","JavaSE 系列笔记 ☕️",{"books":149,"desc":199,"id":66,"image":200,"title":201},[150,166,178],{"cateId":66,"chapters":151,"desc":162,"id":153,"time":163,"title":164,"video":165},[152,156,159],{"bookId":153,"id":154,"indexOrder":13,"name":155},21,"iqbc2haub31bwqtz","Lombok 极速上手",{"bookId":153,"id":157,"indexOrder":13,"name":158},"ijay2hay19kn1k031","Mybatis 快速上手",{"bookId":153,"id":160,"indexOrder":13,"name":161},"ru4ogh2waocpn4jo","Maven 快速上手","JavaWeb阶段必须扩展知识点",2024,"常用知识讲解","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1gb421J7ok\u002F",{"cateId":66,"chapters":167,"desc":175,"id":169,"time":163,"title":176,"video":177},[168,172],{"bookId":169,"id":170,"indexOrder":13,"name":171},22,"ek20yvb6huhxizx7","JavaWeb 笔记（一）计算机网络基础",{"bookId":169,"id":173,"indexOrder":13,"name":174},"pgevws6w2krkffa4","JavaWeb笔记（二）Java与数据库","全面升级的JavaWeb课程","JavaWeb 网站开发","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1kS421X7rq\u002F",{"cateId":66,"chapters":179,"desc":196,"id":181,"time":142,"title":197,"video":198},[180,184,187,190,193],{"bookId":181,"id":182,"indexOrder":13,"name":183},7,"ggwwj09j2vkfftvd","JavaWeb 笔记（一）Java网络编程",{"bookId":181,"id":185,"indexOrder":13,"name":186},"sauvq105istskjaz","JavaWeb 笔记（二）数据库基础",{"bookId":181,"id":188,"indexOrder":13,"name":189},"xgbeasmvrhxx9tn4","JavaWeb 笔记（三）Java与数据库",{"bookId":181,"id":191,"indexOrder":13,"name":192},"k7dfwua3bsezvw9q","JavaWeb 笔记（四）前端基础",{"bookId":181,"id":194,"indexOrder":13,"name":195},"ycpagby2v7j4p728","JavaWeb 笔记（五）后端开发","搭建属于自己的Web网站","JavaWeb 旧版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1CL4y1i7qR\u002F","包含JavaWeb路线全套笔记，从零开始搭建自己的网站！","https:\u002F\u002Fpic3.zhimg.com\u002F80\u002Fv2-df3b38e3012258ed70c23b586309e3f6_1440w.webp","JavaWeb 系列笔记 🚛",{"books":203,"desc":288,"id":81,"image":289,"title":290},[204,220,235,255,273],{"cateId":81,"chapters":205,"desc":216,"id":207,"time":217,"title":218,"video":219},[206,210,213],{"bookId":207,"id":208,"indexOrder":13,"name":209},8,"h7sjo5oy0l03607e","SSM笔记（一）Spring基础",{"bookId":207,"id":211,"indexOrder":13,"name":212},"eve8gq72qmdb46sg","SSM笔记（二）SpringMvc基础",{"bookId":207,"id":214,"indexOrder":13,"name":215},"63v73g0zh1qlr6fk","SSM笔记（三）SpringSecurity基础","Spring的探索之路从这里开始",2023,"JavaSSM 基础部分","[\"https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Kv4y1x7is\u002F\", \"https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Lh4y1M7kx\u002F\", \"https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1fV411M7aS\u002F\"]",{"cateId":81,"chapters":221,"desc":232,"id":223,"time":217,"title":233,"video":234},[222,226,229],{"bookId":223,"id":224,"indexOrder":13,"name":225},16,"0k66v5r6slsfuog4","SpringBoot笔记（一）核心内容",{"bookId":223,"id":227,"indexOrder":13,"name":228},"bqlrnc2yvkaxo8s1","SpringBoot笔记（二）数据交互",{"bookId":223,"id":230,"indexOrder":13,"name":231},"wci9lb9tgea866jt","SpringBoot笔记（三）前后端分离","SpringBoot全新重制版","SpringBoot 新版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1xu4y1m7UP\u002F",{"cateId":81,"chapters":236,"desc":252,"id":238,"time":60,"title":253,"video":254},[237,240,243,246,249],{"bookId":238,"id":239,"indexOrder":13,"name":225},9,"e43gl1ilygps032v",{"bookId":238,"id":241,"indexOrder":13,"name":242},"emnmd8nzfdb3hr50","SpringBoot笔记（二）Git版本控制",{"bookId":238,"id":244,"indexOrder":13,"name":245},"jjlolj5igvttvyhv","SpringBoot笔记（三）Redis数据库",{"bookId":238,"id":247,"indexOrder":13,"name":248},"skgr4ivb5curdoux","SpringBoot笔记（四）其他框架介绍",{"bookId":238,"id":250,"indexOrder":13,"name":251},"le91fqhu4dqui1k4","SpringBoot笔记（五）Linux系统","逐步走向企业级开发","SpringBoot 旧版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1UL411V7f3\u002F",{"cateId":81,"chapters":256,"desc":270,"id":258,"time":60,"title":271,"video":272},[257,261,264,267],{"bookId":258,"id":259,"indexOrder":13,"name":260},10,"oejzo0l77zeb6a7e","SpringCloud笔记（一）微服务基础",{"bookId":258,"id":262,"indexOrder":13,"name":263},"f6eya9taaelsl35p","SpringCloud笔记（二）微服务进阶",{"bookId":258,"id":265,"indexOrder":13,"name":266},"35v1hbsfcdgagdnw","SpringCloud笔记（三）微服务应用",{"bookId":258,"id":268,"indexOrder":13,"name":269},"a782u84512tyuo1m","SpringCloud笔记（四）消息队列","体验微服务架构带来的魅力","SpringCloud 进阶","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1AL4y1j7RY\u002F",{"cateId":81,"chapters":274,"desc":285,"id":276,"time":142,"title":286,"video":287},[275,278,280,282],{"bookId":276,"id":277,"indexOrder":13,"name":209},11,"efjw75u8a251qxk5",{"bookId":276,"id":279,"indexOrder":13,"name":212},"guc134xb7sl78vju",{"bookId":276,"id":281,"indexOrder":13,"name":215},"u8ekxxucowr2b1tm",{"bookId":276,"id":283,"indexOrder":13,"name":284},"vkpmw9wbej21nei6","SSM笔记（四）MySQL进阶","此教程为2021年旧版教程","JavaSSM 旧版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1xL4y1H7Tq\u002F","包含Spring全套框架笔记，从开始到Spring Boot，以及众多运维小知识。","https:\u002F\u002Fpic4.zhimg.com\u002F80\u002Fv2-28c3144421220d7c048703281bc34f63_1440w.webp","Spring 系列笔记 🍏",{"books":292,"desc":329,"id":96,"image":330,"title":331},[293,308],{"cateId":96,"chapters":294,"desc":305,"id":296,"time":60,"title":306,"video":307},[295,299,302],{"bookId":296,"id":297,"indexOrder":13,"name":298},12,"jd3e8u5cmvx5gco6","C语言（一）计算机思维导论",{"bookId":296,"id":300,"indexOrder":13,"name":301},"lqv77apvx82nkkio","C语言（二）基础语法",{"bookId":296,"id":303,"indexOrder":13,"name":304},"xb0b9t37gyv96xns","C语言（三）高级特性","包含高等院校需要教授的全部内容","C语言程序设计","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Cr4y137os\u002F",{"cateId":96,"chapters":309,"desc":326,"id":311,"time":60,"title":327,"video":328},[310,314,317,320,323],{"bookId":311,"id":312,"indexOrder":13,"name":313},13,"8a046ps2e4w6k4py","数据结构与算法（一）线性结构篇",{"bookId":311,"id":315,"indexOrder":13,"name":316},"3ma8db91f9zrnkja","数据结构与算法（二）树形结构篇",{"bookId":311,"id":318,"indexOrder":13,"name":319},"0lsjm59k7cgu4tpr","数据结构与算法（三）散列表篇",{"bookId":311,"id":321,"indexOrder":13,"name":322},"0qzy7bogo0g2pusa","数据结构与算法（四）图结构篇",{"bookId":311,"id":324,"indexOrder":13,"name":325},"6gmcxcikcilyxblj","数据结构与算法（五）排序算法篇","虽然很难，但是它是考研必学科目","数据结构与算法","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV13W4y127Ey\u002F","你的内心一直有一个坚定的声音在告诉你，一定要考上一名研究生，向着未来前进吧！","https:\u002F\u002Fpic2.zhimg.com\u002F80\u002Fv2-ac128404efb29ce1c9d1ccc61024f1d1_1440w.webp","C语言 系列笔记 🥬",{"books":333,"desc":367,"id":108,"image":368,"title":369},[334,349,358],{"cateId":108,"chapters":335,"desc":346,"id":337,"time":163,"title":347,"video":348},[336,340,343],{"bookId":337,"id":338,"indexOrder":13,"name":339},17,"urw2e6gg1lprv65w","Kotlin（一）基础语法",{"bookId":337,"id":341,"indexOrder":13,"name":342},"t7lnl87f74f3v1ju","Kotlin（二）类与对象",{"bookId":337,"id":344,"indexOrder":13,"name":345},"v1zzvki0knb1xvml","Kotlin（三）高级特性","包含Kotlin语言完整基础部分","Kotlin程序设计基础","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1P94y1c7tV\u002F",{"cateId":108,"chapters":350,"desc":355,"id":352,"time":163,"title":356,"video":357},[351],{"bookId":352,"id":353,"indexOrder":13,"name":354},18,"ovbzpe7065bye1st","Kotlin扩展（一）","包含Kotlin额外扩展知识","Kotlin扩展篇","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Hg4y1m7Ca\u002F",{"cateId":108,"chapters":359,"desc":364,"id":361,"time":163,"title":365,"video":366},[360],{"bookId":361,"id":362,"indexOrder":13,"name":363},19,"3at7ybv04dmjc0wp","Gradle基础教程","Gradle配置教程（Kotlin）","Gradle教程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Fc411x7xF\u002F","Kotlin让JVM平台焕发新的生机，让语言的表达更加优美","https:\u002F\u002Fpic2.zhimg.com\u002F80\u002Fv2-be815568f7c79c64cdaa171b0409786d_1440w.webp","Kotlin 系列笔记 ☘️",{"books":371,"desc":418,"id":120,"title":419},[372,391,403],{"cateId":120,"chapters":373,"desc":387,"id":375,"time":388,"title":389,"video":390},[374,378,381,384],{"bookId":375,"id":376,"indexOrder":13,"name":377},26,"zjf5qapwqtqiohcn","JavaScript笔记（一）基础语法",{"bookId":375,"id":379,"indexOrder":13,"name":380},"95jc6sjyjwcp9pvp","JavaScript笔记（二）核心知识",{"bookId":375,"id":382,"indexOrder":13,"name":383},"j35cdc1qz8dzq7pn","JavaScript笔记（三）进阶知识",{"bookId":375,"id":385,"indexOrder":13,"name":386},"sdhodlihphnpcg37","JavaScript笔记（四）前端基础","包含JavaScript最新语法规范讲解",2026,"JavaScript教程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1xq6gBgESU",{"cateId":120,"chapters":392,"desc":400,"id":394,"time":37,"title":401,"video":402},[393,397],{"bookId":394,"id":395,"indexOrder":13,"name":396},23,"bsisgazdftiz3o9c","HTML5笔记（一）基础内容",{"bookId":394,"id":398,"indexOrder":13,"name":399},"njol93fs34gfwuzf","HTML5笔记（二）高级内容","包含HTML基础内容和相关知识点","HTML5核心教程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1BrBiYNEWg",{"cateId":120,"chapters":404,"desc":415,"id":406,"time":37,"title":416,"video":417},[405,409,412],{"bookId":406,"id":407,"indexOrder":13,"name":408},25,"jo74ciirtg8wh90y","CSS笔记（一）基础入门",{"bookId":406,"id":410,"indexOrder":13,"name":411},"ap5ixyomoejuw4ue","CSS笔记（二）盒模型和布局",{"bookId":406,"id":413,"indexOrder":13,"name":414},"4djgk5xy1lzpiuf2","CSS笔记（三）变换和过渡","包含CSS3基础内容和相关知识点","CSS3核心教程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1sQeEzFEKi","包含Web前端学习路径全部教程笔记，打下坚实的基础","Web前端 系列笔记",{"books":421,"desc":458,"id":423,"image":368,"title":459},[422,432,450],{"cateId":423,"chapters":424,"desc":429,"id":426,"time":163,"title":430,"video":431},100,[425],{"bookId":426,"id":427,"indexOrder":13,"name":428},20,"o0ab271mkdsas87","Markdown基础语法","编写简洁而又优美的文档","Markdown教程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1eJ4m157kC",{"cateId":423,"chapters":433,"desc":447,"id":435,"time":60,"title":448,"video":449},[434,438,441,444],{"bookId":435,"id":436,"indexOrder":13,"name":437},14,"6386mh7anqt4tzyv","设计模式（一）面向对象设计原则",{"bookId":435,"id":439,"indexOrder":13,"name":440},"8ftkb38wfn6ox0ug","设计模式（二）创建型",{"bookId":435,"id":442,"indexOrder":13,"name":443},"i1msql1k8y70etey","设计模式（三）结构型",{"bookId":435,"id":445,"indexOrder":13,"name":446},"5434a3cyyjvwhs8s","设计模式（四）行为型","使你的编码水平得到质的飞跃","设计模式系列","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1u3411P7Na\u002F",{"cateId":423,"chapters":451,"desc":456,"id":453,"time":60,"title":457},[452],{"bookId":453,"id":454,"indexOrder":13,"name":455},15,"zj9uvg0sp3b0sok8","Docker 容器技术 笔记","这里包含其他中间件课程笔记","其他中间件笔记","我们对知识的探索从未停止，只有不断地学习，才能走向美好的未来！","其他笔记分类 🌽",200,true,{"data":463,"status":460,"success":461},{"bookId":406,"content":464,"id":407,"indexOrder":8,"introduction":465,"lastUpdate":466,"name":408},"![image-20250711005743167](https:\u002F\u002Fs2.loli.net\u002F2025\u002F07\u002F11\u002FIqpN2a6nOfEky4i.png)\n\n# CSS3 核心知识\n\n欢迎各位小伙伴来到前端路线的CSS课程，这一站也是前端三件套（HTML、CSS、JavaScript）中难度最高的一个，期待与各位小伙伴共度这一旅程！视频中所有的文档、资料，都可以直接在视频下方简介中找到，视频非培训机构出品，纯个人录制，不需要加任何公众号、小程序，直接自取即可。\n\n教程开始之前，提醒各位小伙伴：\n\n- 如果你对某样东西不熟悉，请务必保证跟视频中使用一模一样的环境、一模一样的操作方式去使用，不要自作主张，否则出现某些奇怪的问题又不知道怎么办，就会浪费很多时间。\n- 在学习过程中，尽可能避免出现中文文件夹，包括后面的环境安装、项目创建，都尽量不要放在中文路径下（因为使用中文常常出现奇奇怪怪的问题）建议使用对应的英文单词代替，或者是用拼音都可以，最好只出现英文字母和数字。\n- 本系列教程统一使用 WebStorm 作为集成开发环境，该软件是免费使用的。\n- 请不要抱着应试教育的心态进行学习，学习编程开发是为了掌握技能，而不是单纯为了过考试。\n\n如果觉得本视频对你有帮助，请一键三连支持一下UP主~\n\n## CSS核心部分\n\n虽然在之前的HTML篇中我们学习了如果构建网站的基本框架，但是在用户要求日益增高的今天，没有漂亮的界面是不会得到用户的选择和青睐的，而CSS则是帮助我们构建应该现代化且美丽界面的工具，本次课程我们将深入学习最新的CSS3相关知识点。\n\n> CSS（Cascading Style Sheets，层叠样式表）是一种用来描述网页外观和布局的样式表语言。它与HTML（超文本标记语言）配合使用，负责网页的样式设计，使网页具有美观的外观和良好的用户体验。\n>\n> CSS的最初版本发布于 1996 年，其包含基本的样式控制，如字体、颜色、边距、边框和背景，不过功能过于简单，不支持复杂的布局模型、只有有限的动画和过渡效果、缺少媒体查询，响应式设计难以实现。于是在 1998 年，CSS2正式发布，它在 CSS1 的基础上引入了许多新的特性和改进，定位、层级、布局、伪元素等特性都是这个时期出现的，随后在2004年推出了一个CSS2.1修订版，进一步增强CSS2的使用规范。\n>\n> 在2010年之后，CSS3逐步开始进入大众视野，相比CSS2.1带来了许多重要的改进和新特性，引入新布局模型、动画效果、多背景、多字体、响应式设计等多方面的改进，大大扩展了网页设计的可能性，使得网页更加美观、动态和适应各种设备。这些新特性在现代网页开发中几乎是必不可少的基础工具。而CSS3及之前的CSS特性也是我们目前学习的主要目标。\n\nCSS的主要功能如下：\n\n1. **控制页面布局**：设置元素的位置、大小、边距、边框等。\n2. **定义字体和颜色**：设置文本的字体、大小、颜色、背景色等。\n3. **实现响应式设计**：通过媒体查询适配不同设备（如手机、平板、桌面）。\n4. **动画与过渡效果**：实现元素的动画、渐变、变换等交互效果。\n5. **样式继承和层叠**：多个样式规则可以叠加应用，优先级由层叠规则决定。\n\nCSS包含的知识点非常之多，同时很多概念也不太好理解，因此它也是前端三件套中最难学习和完全掌握的一个东西。\n\n### CSS引入方式\n\n在开始介绍CSS引入方式之前，我们先来带大家体验一下如何在HTML使用CSS样式。我们先创建一个用于测试简单页面文件：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Ctitle>我是网站标题\u003C\u002Ftitle>\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cp>\n    我是一段文本，我想请问你要干嘛，为什么要黑我们家鸽鸽\n  \u003C\u002Fp>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n接着，我们来为`p`标签添加一个CSS样式，让其中的字体改变颜色，我们需要在标签上添加`style`属性，所有的CSS属性都要编写到`style`中，虽然还没有正式介绍CSS样式的相关属性，但是大家可以先跟着我们使用：\n\n```html\n\u003Cp style=\"color: green\">\n  我是一段文本，我想请问你要干嘛，为什么要黑我们家鸽鸽\n\u003C\u002Fp>\n```\n\n这里我们使用`color`属性来修改标签内的文本颜色，注意CSS属性后需要使用冒号之后才能编写具体的属性值，这里设置的是`green`代表绿色，可以看到，在我们添加CSS样式之后，页面中的字体确实也变成了指定的颜色：\n\n![image-20250711014435749](https:\u002F\u002Fs2.loli.net\u002F2025\u002F07\u002F11\u002F9VXB5QaCpdsxlSe.png)\n\n这样，我们就成功修改了文本的样式，让其原本的黑色变成了绿色。我们还可以继续添加CSS样式，比如我希望字体变成粗体，我们可以继续添加CSS属性`font-weight`，它用于控制字体字重，注意多个CSS样式之间需要使用`;`隔开：\n\n```java\n\u003Cp style=\"color: green;font-weight: 800\">\n  我是一段文本，我想请问你要干嘛，为什么要黑我们家鸽鸽\n\u003C\u002Fp>\n```\n\n像这样编写的CSS样式，我们一般称其为**行内样式**，行内样式使用标签自带的`style`属性进行定义，它可以直接写到标签内部，同时其作用域也只能在标签内部：\n\n```java\n\u003Cbody>\n  \u003Cp style=\"color: green;font-weight: 800\">\n    我是一段文本，我想请问你要干嘛，为什么要黑我们家鸽鸽\n    \u003Cspan>我附加\u003C\u002Fspan>\n  \u003C\u002Fp>\n  \u003Cp>\n    我是另一段文本，我不信现在你们都还有鸽鸽的照片\n  \u003C\u002Fp>\n\u003C\u002Fbody>\n```\n\n![image-20250711015111955](https:\u002F\u002Fs2.loli.net\u002F2025\u002F07\u002F11\u002FA7qiRIsTU2E9PL5.png)\n\n行内样式只能影响到标签及其内部嵌套标签，无法影响到其他同级标签或是父级标签。\n\n除了使用行内样式之外，我们也可以直接在HTML的`head`标签内部插入应该`style`标签，并在此标签内编写我们的CSS样式属性：\n\n```java\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Ctitle>我是网站标题\u003C\u002Ftitle>\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  \u003Cstyle>\n    p {   \u002F* 注意使用内部样式需要通过选择器去指定样式能够作用的范围 *\u002F\n      color: green;\n      font-weight: 800;\n    }\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n```\n\n由于样式被写到了一个单独的`style`标签内，浏览器无法得知我们需要将这些样式作用到哪个标签或是哪些标签上，所以我们还必须结合一个**选择器**来对作用域进行指定，有关CSS选择器的知识点我们会在下一部分进行介绍。这里我们使用了`p`代表选择所有`p`标签，编写完选择器之后，需要使用花括号囊括此作用范围内生效的样式，编写方式和上面的行内样式是一样的。\n\n还有一种CSS的引入方式是单独在外部创建一个`css`文件作为外部样式表，然后在页面中引入此外部样式表：\n\n![image-20250711015955046](https:\u002F\u002Fs2.loli.net\u002F2025\u002F07\u002F11\u002FnAVd45Dt7XwRS1P.png)\n\n首先我们需要创建一个新的`.css`文件，一般网页默认的css文件名称为`style.css`，接着我们就可以将CSS样式在其中进行编写了，和内部样式一样，也需要使用选择器来选择样式的作用范围。\n\n接着我们需要再HTML文件中引入这个外部的样式，需要使用`link`标签来完成：\n\n```html\n\u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"style.css\">\n```\n\n其中`rel`和`type`写法是固定的，后面的`href`和我们之前HTML阶段学习的图片引入是一样的，也是编写外部CSS文件的路径，这样就可以将样式引入到页面中了。\n\n综上，引入CSS的方式主要有三种，分别是：\n\n1. **内联样式\u002F行内样式** （Inline CSS）直接在HTML元素的`style`属性中编写CSS代码。\n2. **内部样式** （Internal CSS）在HTML文档的`\u003Chead>`标签内使用`\u003Cstyle>`标签定义CSS规则。\n3. **外部样式** （External CSS）将CSS代码写在独立的`.css`文件中，然后通过`\u003Clink>`标签引入到HTML页面中。\n\n### 基本选择器\n\n前面我们介绍了如何在页面中引入CSS样式，这一节我们来学习一下内联样式和外部样式需要用到的CSS选择器。\n\n选择器实际上是用于限制样式能够生效的作用范围的工具，也可以反过来理解，就是通过选择器去选中某一个或一些元素，进而为这些被选中的元素添加我们想要的样式。\n\n选择器的种类非常多，用法也不一样，我们首先来介绍一下基本选择器：\n\n1. **标签选择器（Element Selector）**通过 HTML 标签名称选择元素。\n\n   标签选择器可以直接为所有指定类型的标签添加样式，比如我们希望一次性为所有`p`标签添加样式，就可以使用标签选择器，只需直接输入标签名称即可：\n\n   ```css\n   p {\n     color: blueviolet;\n   }\n   ```\n\n   此时所有的`p`标签都会变成紫色：\n\n   ```html\n   \u003Cbody>\n     \u003Cp>Hello World\u003C\u002Fp>\n     \u003Cp>This is a paragraph.\u003C\u002Fp>\n   \u003C\u002Fbody>\n   ```\n\n   标签选择器是最简单的一种选择器类型，只要是标签（包括`body`、`html`）都可以选择。\n\n2. **类选择器（Class Selector）**通过元素的 `class` 属性选择元素。\n\n   > 在HTML中，`class`属性是用来为元素指定类别的标识符。它可以让你为网页中的多个元素分配相同的类名，从而方便通过CSS或JavaScript对这些元素进行统一的样式设置或操作。\n\n   在`class`属性中，我们可以填入一个或多个自定义的类名，命名规则也比较随意，注意多个类名需要用空格分隔：\n\n   ```html\n   \u003Cp class=\"test bold\">Hello World\u003C\u002Fp>\n   \u003Cp>This is a paragraph.\u003C\u002Fp>\n   \u003Cp class=\"test\">This is another paragraph.\u003C\u002Fp>\n   ```\n\n   我们可以通过类选择器来根据类名选择元素，使用`.类名称`的格式指定类选择器：\n\n   ```css\n   .test {\n     color: blueviolet;\n   }\n   \n   .bold {\n     font-weight: 800;\n   }\n   ```\n\n   使用类选择器之后，只要标签的`class`属性携带了对应的类名，那么样式就会生效。\n\n3. **ID 选择器（ID Selector）**通过元素的 `id` 属性选择元素，但与`class`不同的是，`id`应该保证在页面中是唯一的。\n\n   > HTML中的`id`属性是用来为元素指定唯一标识符的属性。每个`id`值在整个页面中必须是唯一的，这样可以方便地通过JavaScript、CSS或者其他技术定位和操作特定的元素。\n\n   由于`id`属性全局唯一，我们只能给页面中的任何一个元素设置：\n\n   ```html\n   \u003Cp id=\"title\">Hello World\u003C\u002Fp>\n   \u003Cp>This is a paragraph.\u003C\u002Fp>\n   \u003Cp>This is another paragraph.\u003C\u002Fp>\n   ```\n\n   一旦出现重复的id，IDE会出现红标提示：\n\n   ![image-20250731153238031](https:\u002F\u002Fs2.loli.net\u002F2025\u002F07\u002F31\u002FhbcdjNsQ6GyuT1Z.png)\n\n   针对于`id`属性，我们也可以使用ID选择器来选中指定`id`的元素，使用`#ID`的格式：\n\n   ```css\n   #title {\n     color: blueviolet;\n     font-weight: bold;\n   }\n   ```\n\n   对于ID的命名存在一定的规范，需要注意以下几点：\n\n   * 只能有字母、数字、下划线，且必须以字母开头。\n   * 不能和HTML标签同名，比如body、p、a等。\n   * 大小写严格区分，比如test和TEST就是两个不同的ID。\n\n   因此，由于`id`属性存在诸多限制，在实际使用时建议尽可能使用上面提到的**类选择器**而不是**ID选择器**，它的限制更少且使用起来更灵活，`id`属性其实更像是为我们后续学习的JavaScript而准备的。\n\n4. **通配符选择器（Universal Selector）**选择页面中的所有元素。\n\n   通配符选择器可以直接选取页面中所有元素，包括`html`、`body`、`p`等一切元素都会生效，使用`*`表示通配符：\n\n   ```java\n   * {\n     color: blueviolet;\n   }\n   ```\n\n有了基本选择器，我们就可以很灵活地针对指定元素进行样式添加，虽然基本选择器已经很强大，但是针对于一些复杂环境还是有点力不从心，我们接着来介绍一下更加高级的CSS选择器类型。首先是交集和并集的情况：\n\n1. **交集选择器**，适用于要求同时满足N个选择条件的元素才能被选中，我们可以将前面介绍的四种选择器进行直接连接：\n\n   ```css\n   p.test {  \u002F* 注意不要随意交换顺序，这可能会产生歧义，比如.testp就变成了选择testp这个类 *\u002F\n     color: blueviolet;\n   }\n   ```\n\n   此时，只有同时为`p`标签并且`class`中存在test类的元素才能被选中，再比如下面这种情况：\n\n   ```css\n   p.test#p {\n     color: blueviolet;\n   }\n   ```\n\n   很明显这是由三个基本选择器组成的交集选择器，必须同时满足三个条件才能正确选择。\n\n2. **并集选择器（选择器列表）**，并集选择器适用于针对多种选择条件同时进行选中，一次性统一编写样式而不需要分开进行编写，比如我们以前是像这样写的：\n\n   ```css\n   p { color: blueviolet; }\n   a { color: blueviolet }\n   div { color: blueviolet }\n   ```\n\n   实际上这三个选择器配置的样式都是一样的，我们可以直接使用并集选择器来为这三个选择器一次性编写样式，只需使用`,`隔开每一种选择器即可：\n\n   ```css\n   p, a, div {  \u002F* 与上面的代码效果等价 *\u002F\n     color: blueviolet;\n   }\n   ```\n\n   这样编写同样可以实现上面分开编写的效果，并且可以统一进行样式修改，同样适用于前面介绍的四种选择器。\n\n### 高级选择器\n\n前面我们介绍了基本选择器的使用，我们接着来看更加强大的组合选择器，它可以实现对基本选择器的任意组合，这针对于一些特定环境会非常好使：\n\n1. **后代选择器（Descendant Selector）**选择某个元素的后代元素（子元素或更深层次的元素）\n\n   ```html\n   \u003Cdiv class=\"content\">\n     \u003Cp>Hello World\u003C\u002Fp>\n     \u003Cdiv>\n       \u003Cp>This is a paragraph\u003C\u002Fp>\n       \u003Cdiv>Click here\u003C\u002Fdiv>\n     \u003C\u002Fdiv>\n   \u003C\u002Fdiv>\n   ```\n\n   比如现在我们需要对上面`.content`盒子中的所有`p`标签设置样式，那么我们可以使用后代选择器，只需空格继续添加其后代选择器即可，就像这样：\n\n   ```css\n   .content p {\n     color: blueviolet;\n   }\n   ```\n\n   这里的选取意义为，首先找到所有类名称为content的元素，然后进一步选择其中（注意必须是子元素或是更深层次的后代元素，不能为当前元素本身）所有的p标签元素。再比如下面这种情况：\n\n   ```css\n   .content div p {\n     color: blueviolet;\n   }\n   ```\n\n   这里的选择器和上面一样，首先选取所有类名称为content的元素，接着再找到其后代中的`div`标签，然后进一步在`div`标签的后代中继续选择`p`标签元素。虽然看起来比较绕，但是实际上这种连续向下选择后代的情况，在之后的开发中非常常见，它可以非常精确地定位的一系列元素下的某个元素，且能大幅度提升选择器的优先级（后续介绍）\n\n2. **子选择器（Child Selector）**选择某个元素的直接子元素。\n\n   子选择器类似于后代选择器，不过它将选择范围锁定在直接子元素中，也就是只有嵌套一级的元素，而更深层次的元素则无法进行选中，我们可以使用`>`符合来连接：\n\n   ```css\n   .content > p {   \u002F* 为了美观，>两边也可以打上空格，不影响语义 *\u002F\n     color: blueviolet;\n   }\n   ```\n\n   这里的选取意义为，首先找到所有类名称为content的元素，然后进一步选择其中仅一层嵌套的`p`标签作为目标添加样式，而非所有内部的`p`标签。\n\n3. **相邻兄弟选择器（Adjacent Sibling Selector）**选择某个元素的下一个相邻兄弟元素。\n\n   ```html\n   \u003Cdiv class=\"content\">\u003C\u002Fdiv>\n   \u003Cp>Hello World\u003C\u002Fp>\n   \u003Cp>This is a paragraph\u003C\u002Fp>\n   ```\n\n   我们可以使用相邻兄弟选择器来选择某个元素的相邻元素，使用`+`进行连接：\n\n   ```css\n   .content + p {\n     color: blueviolet;\n   }\n   ```\n\n   此时，会找到所有类名称为content的元素，然后进一步选择与其相邻的`p`标签元素，也就是兄弟节点。但是注意，相邻兄弟选择器只能选择其下一个相邻兄弟元素，再之后的元素无法选中。\n\n4. **通用兄弟选择器（General Sibling Selector）**选择某个元素之后的所有兄弟元素。\n\n   通用兄弟选取器弥补了相邻兄弟选择器只能选择下一个相邻兄弟的缺点，它可以一次性选择所有兄弟节点：\n\n   ```css\n   .content ~ p {\n     color: blueviolet;\n   }\n   ```\n\n   此时，会找到所有类名称为content的元素，然后进一步选择所有兄弟的`p`标签元素。\n\n5. **属性选择器**，类似前面提到的ID选择器和类选择器，属性选择器可以根据标签中的某些属性和值来进行元素选择，比如我们想要选择下面的链接元素：\n\n   ```html\n   \u003Ca href=\"https:\u002F\u002Fwww.baidu.com\">我是百度\u003C\u002Fa>\n   \u003Ca href=\"https:\u002F\u002Fwww.bing.com\">我是必应\u003C\u002Fa>\n   \u003Cdiv>大家一般用哪一个作为搜索引擎呢？\u003C\u002Fdiv>\n   ```\n\n   现在我们想要选择百度的链接元素，并将其颜色修改为紫色，我们可以使用属性选择器来精确选择，使用大括号囊括属性：\n\n   ```css\n   \u002F* 类似于直接在html标签中的写法 *\u002F\n   [href=\"https:\u002F\u002Fwww.baidu.com\"] {\n     color: blueviolet;\n   }\n   ```\n\n   一般为了选择器更加精确，我们会使用交集来进行属性选择，比如这里我们明确需要的是`a`标签，而且`herf`属性本来就是`a`标签所拥有的，所以我们可以像这样写：\n\n   ```css\n   \u002F* 选择 href 属性以 \"https\" 开头的a链接元素 *\u002F\n   a[herf=\"https:\u002F\u002Fwww.baidu.com\"] {\n     color: blueviolet;\n   }\n   ```\n\n   当然，如果我们只是想要选择携带了某个属性的标签，而非具体属性要为某个值，也可以直接使用方括号囊括属性：\n\n   ```css\n   a[href] {\n     color: blueviolet;\n   }\n   ```\n\n   此时只要携带`href`属性的`a`标签都会变成紫色，无论其是否包含值或是值具体是什么，但是注意，如果存在`a`标签未配置此属性，则无法选中。\n\n   除此之外，我们还可以对属性的值进行一定规则的匹配，比如我们希望匹配`href`属性值中包含`bing`的元素：\n\n   ```css\n   a[href*=\"bing\"] {  \u002F* 使用*来表示至少包含一个bing的元素 *\u002F\n     color: blueviolet;\n   }\n   ```\n\n   我们还可以直接在后面添加一个小写或大写字母`i`来忽略大小写进行匹配：\n\n   ```css\n   a[href*=\"Bing\" i] {\n     color: blueviolet;\n   }\n   ```\n\n   有关更多匹配规则，请参阅MDN文档：https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FAttribute_selectors\n\n对于这些高级选择器，我们也可以使用之前的交集并集策略来进一步进行组合，实现更加精确和灵活的元素选择，比如：\n\n```css\na[href*=\"Bing\" i].test {\n  color: blueviolet;\n}\n```\n\n```css\na[href*=\"Bing\" i], a[href*=\"baidu\" i] {\n  color: blueviolet;\n}\n```\n\n这些高级选择器也可以相互组合使用：\n\n```css\nbody > a[href*=\"Bing\" i] {\n  color: blueviolet;\n}\n```\n\n不过，CSS的选择器远不止这些，但是为了降低课程难度，有关**伪类选择器**和**伪元素选择器**以及**嵌套选择器**的定义和使用，我们会放在下一章中继续为大家讲解，这一章请务必将以上讲解的选择器类型全部理解到位。\n\n### 选择器优先级\n\n前面我们为大家介绍了多种多样的CSS元素选择器，不过，有些时候可能会出现一些冲突的情况，比如：\n\n```html\n\u003Cp class=\"test\">This is a paragraph\u003C\u002Fp>\n```\n\n```css\np { color: blueviolet; }\n.test { color: red; }\n```\n\n此时无论是标签选择器还是类选择器，都可以选择到上面的`p`标签，现在分别对其设置不同的颜色，那么到底使用哪一个呢？这里就需要谈到CSS的优先级了，不同类型的选择器，具有的优先级是不一样的，优先级计算规则比较复杂，一般由四个部分组成，通常表示为（a，b，c，d）：\n\n- **a**: 行内样式的数量（这个数量代表的是有没有内联样式，而非内联样式写了多少，所以只有1和0）\n- **b**: ID 选择器的数量。\n- **c**: 类选择器、属性选择器和伪类的数量。\n- **d**: 元素选择器和伪元素的数量。\n\n那么这个是如何进行计算和比较的呢？我们以下面这个例子为例：\n\n```html\n\u003Cp class=\"test\" id=\"aaa\">\n  This is a paragraph\n\u003C\u002Fp>\n```\n\n```css\n.test { color: red; }\n#aaa { color: blue; }\n#aaa.test { color: green; }\n```\n\n我们会发现此时这个选择器都可以选中这里的`p`标签，并且都在对其字体颜色进行修改，那么此时到底谁生效呢？根据上面的公式我们来推算一下，我们首先从a开始看，此时标签中不存在任何行内样式，那么就将其标记为0，接着是b，他代表ID选择器的数量，c代表类选择器的数量，那么此时上面的三种选择器对应的优先级就是：\n\n```css\n.test { color: red; }   \u002F* 优先级为 (0, 0, 1, 0) *\u002F\n#aaa { color: blue; }   \u002F* 优先级为 (0, 1, 0, 0) *\u002F\n#aaa.test { color: green; }   \u002F* 优先级为 (0, 1, 1, 0) *\u002F\n```\n\n那么现在得到了优先级表达式之后，怎么进行比较呢？很简单，我们只需要从左往右依次进行比较即可，比如`.test`和`#aaa`，此时前者和后者的a位置上都是0，暂时比较不出大小，我们继续向后看，接着前者的b位置上为0，而后者为1，很明显，后者的优先级更高，则无需继续向后比较了，直接就可以得出后者的优先级更高。再比如`#aaa`和`#aaa.test`，此时它们的b位置都为1，因此还暂时无法比较出优先级，我们接着往后看c位置，此时前者的c位置上为0，而后者为1，因此推断出后者比前者优先级更高。\n\n通过上面的例子不难发现，选择器条件越复杂，优先级更高的可能性就越大，当然并不是说选择器条件越复杂就一定优先级越高，最终还是要按照公式来判断，比如：\n\n```css\n.aaa.bbb { color: red; }  \u002F* 优先级为 (0, 0, 2, 0) *\u002F\n#ccc { color: blue; }     \u002F* 优先级为 (0, 1, 0, 0) *\u002F\n```\n\n此时虽然上面的`.aaa.bbb`更复杂，但根据判断公式结果，显然`#ccc`的优先级更高。\n\n此外，我们还发现，只要是通过CSS选择器得到的优先级，a位置的结果始终都是0，这实际上就是为了内联样式而生的，我们来看下面这个例子：\n\n```html\n\u003Cp class=\"test\" style=\"color: blue\">\n  This is a paragraph\n\u003C\u002Fp>\n```\n\n```css\n.test {\n  color: red;\n}\n```\n\n可以看到，此时我们同时在内联样式和类选择器中修改了文本的颜色，那么谁的优先级更高呢？根据上面的规则，此时`.test`的优先级为`(0 ,0, 1, 0)`，而内联样式的优先级为`(1, 0, 0, 0)`，显然内联样式优先级秒杀前者。因此，如果一个标签上存在内联样式，则必定优先采用内联样式中的设置，所以内联样式也是优先级最高的一种。\n\n那么如果此时出现了两个相同有优先级的选择器怎么办呢？\n\n```html\n\u003Cp class=\"t1 t2\">This is a paragraph\u003C\u002Fp>\n```\n\n```css\n.t1 { color: blue; }  \u002F* 优先级为 (0, 0, 1, 0) *\u002F\n.t2 { color: red; }   \u002F* 优先级为 (0, 0, 1, 0) *\u002F\n```\n\n这种情况下，`.t1`和`.t2`结果是相同的，那么就会按照声明顺序来进行排序，由于`.t2`是写在`.t1`后面的，因此在同等优先级下后者更高，所以此时会采用`.t2`中的样式。\n\n最后，为了让样式设置更加灵活，我们可以使用`!important`来强制提升某一个样式的优先级到最高，比如：\n\n```css\np.t1 {  \u002F* 优先级为 (0, 1, 1, 0) *\u002F\n  color: blue;\n  background-color: yellow;\n}\n.t1 {   \u002F* 优先级为 (0, 0, 1, 0) *\u002F\n  color: red;\n  background-color: aqua;\n}\n```\n\n很明显，此时`p.t1`优先级更高，但是我们可以强制针对某个属性进行提升，只需在后面添加`!important`即可：\n\n```css\np.t1 {\n  color: blue;  \u002F* 优先级低于下面的 *\u002F\n  background-color: yellow;\n}\n.t1 {\n  color: red !important;\n  background-color: aqua;\n}\n```\n\n此时，虽然`p.t1`优先级更高，但是我们强制对`.t1`中的`color`属性进行了优先级提升，那么就会使用`.t1`中的`color`属性，通过这种方式提升后，优先级将直接变为最高，即使是行内样式也无法影响。\n\n**提问：** 如果给上面的`p.t1`中的`color`属性也设置一个`!important`会怎么样？\n\n### CSS样式继承\n\n子元素会自动继承某些父元素的样式属性。比如：\n\n```html\n\u003Cdiv class=\"t1\">\n  \u003Cp>This is a paragraph\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\n```css\n.t1 { color: red; }\n```\n\n可以看到，虽然我们将样式设定给父元素，但实际上其内部的子元素同样也会生效，这就是样式的继承。\n\n上面提到的`color`属性就是支持自动继承的属性，自动继承的属性会将其生效给所有的子级元素，除非子元素又单独去设定自己的样式。当然支持自动继承的属性并非所有，只有部分CSS属性会被自动继承，包括文本相关的属性，如 `color`, `font-family`, `font-size`, `line-height`, `visibility`, `cursor` 等，其他属性如盒子模型相关的 `margin`, `padding`, `border`, `width`, `height` 等，都不会自动继承。\n\n不过，并不是所有的情况下我们都希望样式能够自动继承，那么有没有办法阻止这种自动继承的效果呢？最简单的方法就是手动设定样式覆盖被继承的样式：\n\n```html\n\u003Cdiv class=\"t1\">\n  \u003Cp style=\"color: gray\">This is a paragraph\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\n此时我们为`p`标签手动设定了`color`样式，则不会受到自动继承的影响。当然，如果我们希望`color`变回默认的值而不是我们手动去指定，那么也可以使用`initial`来指定其为初始值，这是一个比较特殊的值：\n\n```html\n\u003Cdiv class=\"t1\">\n  \u003Cp style=\"color: initial\">This is a paragraph\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\n除了`initial`之外，还有一些比较特殊的值，比如我们希望某个属性主动继承父元素的设置，就可以使用`inherit`来表示，如果我们希望某个属性变回自动继承的效果，也可以使用`unset`来表示。还有一个与`initial`类似的`revert`，同样是重置样式，不过依照的是用户样式表而非浏览器默认设置。有关这些特殊属性，我们会在后续的样式讲解中逐步使用。\n\n### (选学) HTML快速生成语法\n\n有些时候，我们编写一个标签实在是太累了，比如我想创建一个普通的盒子`div`，此时我不仅要去吧前半部分打出来，还要把后半部分也打出来，非常麻烦，虽然WebStorm自带了提示，但是针对于一次性生成多个元素的情况下依然不够好使。这里我们介绍一种全新的工具，它可以帮助我们快速完成HTML结构生成：\n\n> Emmet 是一个强大的前端开发工具，能够大大加快 HTML 和 CSS 的编写速度。它通过简洁的语法，让你用短小的表达式快速生成复杂的代码结构，它已经在常用的IDE中内置，包括WebStorm和VSCode等。\n\n正常情况下，我们如果需要编写`div`，都是直接打出来，然后手动去选择WebStorm的`div`标签提示来快速生成：\n\n![image-20250823201516866](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F23\u002Fnujap5NUtJsX94m.png)\n\n使用Emmet后，我们可以直接使用Tab键快速生成`div`元素。\n\n不对啊，你这有啥区别吗，我WebStorm提示也可以生成啊，那如果现在我要求你快速生成多个`div`标签呢？此时，利用Emmet我们可以直接编写`div*3`来表示我们需要快速创建三个盒子，同样按下Tab后即可出现：\n\n![image-20250823201749534](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F23\u002FC1R4Pl59vhE8Uku.png)\n\n还是不对啊，我直接按住Alt键拉动鼠标也可以多行编辑，一样可以一次性打三个盒子出来，为啥非得用Emmet？好好好，那如果现在我们需要你快速打出一个`div`嵌套一个`button`呢？\n\n这下没办法了吧？而此时我们依然可以利用Emmet来快速生成，还记得我们前面刚讲过的选择器吗，我们只需要提供一个合理的选择器，Emmet就能理解并自动生成我们想要的结构。\n\n比如一个`div`嵌套一个`button`，我们可以直接编写一个选择器`div>button`，这个选择器代表的就是选择`div`中的`button`元素，此时Emmet就能够进行理解，并生成对应结构：\n\n![image-20250823202220474](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F23\u002FdfMXavybU7wITSh.png)\n\n再比如我们要生成两个连续的`button`元素，就可以使用兄弟选择器来表示`button+button`：\n\n![image-20250823202443503](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F23\u002FY8Mr21ocNXw6p3a.png)\n\n我们还可以结合之前介绍的类选择器，来快速生成一个带`class`属性的盒子，比如`div.test`：\n\n![image-20250823202522573](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F23\u002F1jvPdV35JyC6mOT.png)\n\n比如我们希望得到的盒子中自带一段文本内容，可以使用花括号囊括：\n\n```html\ndiv{我是文本}\n```\n\n```html\n\u003Cdiv>我是文本\u003C\u002Fdiv>\n```\n\n此外，我们还可以利用`$`符号来快速生成带编号的元素，比如我希望生成一个`test1`、`test2`、`test3`这样的连续ID元素，我们就可以使用下面的方式：\n\n```\ndiv#test$*3\n```\n\n![image-20250823203546349](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F23\u002FvYFSJWCwsLI69aQ.png)\n\n在学习完选择器和Emmet之后，快速编写HTML就简单多了。\n\n## 字体样式\n\n一个网页中，最关键的就是文字，文字也是我们网页向用户传达信息的最关键内容，因此，文字的样式是我们最重要也是最常用的。\n\n### 文本字体\n\n我们首先来认识一下什么是字体，它可以让我们页面中的文字样式丰富多样：\n\n![image-20250820173756872](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F20\u002FnlY6gRBoDCzUjKk.png)\n\n选择一个好的字体，会让我们的网页内容看起来更加舒适美观，但是一个字体不一定包含所有的文字，比如某些字体只绘制了英文字母的样式，没有考虑中文，各位小伙伴感兴趣的话可以打开自己电脑上的字体列表查看。在默认情况下，页面中显示的字体不同操作系统或是不同浏览器下都是不一样的：\n\n1. Windows默认字体：Segoe UI（在 Windows 10 及更高版本中）\n2. macOS默认字体：San Francisco（在 macOS 10.11 El Capitan 及以后版本）\n3. Linux常用默认字体包括：\n   - Ubuntu：Ubuntu Font Family\n   - Fedora：Noto Sans（或其他根据桌面环境不同而变化）\n   - Debian：Sans（通常是 DejaVu Sans）\n   - 一般桌面环境（如 GNOME、KDE）通常使用 Noto Sans 或者系统配置的默认字体\n4. Android默认字体：Roboto（不过现在安卓机定制系统一般都有自己的字体了）\n5. iOS默认字体：San Francisco\n\n比如在MacOS下的IDEA的内置浏览器中，默认就是宋体：\n\n![image-20250820171440918](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F20\u002FMxBmafQn8gckUH5.png)\n\n在系统中有一个专门存放字体的字体库，只要是字体库中存在的字体，我们可以拿来使用。但是注意，不同操作系统的字体库各不相同，比如MacOS的苹方字体，在Windows下就没有，Windows有的微软雅黑字体，在MacOS下就没有，因此，如果我们指定了某个字体，还需要考虑这个字体在操作系统下是否存在。CSS中可以使用`font-family`来指定字体：\n\n```css\np { font-family: 'Microsoft YaHei' }   \u002F* 如果字体是两个单词组合，需要添加单引号囊括 *\u002F\n```\n\n上面说到，不同系统的字体库可能不一样，所以我们还需要考虑在其他系统下使用什么字体，我们可以继续向后添加字体，使用逗号隔开，当系统中不存在第一种字体时，会继续从左向右查看是否存在后续的字体，如果存在则使用：\n\n```css\np {\n  font-family: 'Microsoft YaHei', 'PingFang SC';\n}\n```\n\n这样，针对不同的操作系统我们就可以分别进行适配了。除此之外，还有一种比较简便的方式为不同操作系统统一设置字体，就是通用字体族，它是在没有指定字体可用时保留部分意图的一种方法，比如我们希望系统使用一种所有字形的宽度均相同字体：\n\n```css\np {\n  font-family: monospace;\n}\n```\n\n此时我们可以直接指定为`monospace`作为字体，它是通用字体族中的一种，表示使用等宽字体，在不同的操作系统或浏览器环境下，会自动选择一个合适的等宽字体作为文本字体。所以，通用字体族其实就是告诉系统我要用什么类型的字体，因为不同系统字体集不一样，只能采用这种形式笼统的告诉系统我们的意图，系统会按照你的意图来合理选择，常见的通用字体族包含：\n\n* **serif**（衬线字体）字体带有装饰性的小笔画，适用于正式文本\n* **sans-serif**（无衬线字体）无装饰笔画，现代、简洁，适合网页\n* **monospace**（等宽字体）每个字符宽度相同，适合代码\n* **cursive**（手写字体）类似书法或草书，适合装饰用途\n* **fantasy**（奇幻字体）设计感较强的艺术字体\n\n有关更加详细的通用字体族可以在MDN上查阅：https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Ffont-family ，得益于通用字体族的特性，我们可以将其作为一个兜底选项来使用，以备在一些没考虑到的系统或环境下由于字体缺失而无法展示出我们想要的字体样式，并且WebStorm非常推荐我们为字体设置通用默认值：\n\n![image-20250820180807855](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F20\u002FP5vVxz8KCfObdae.png)\n\n最后就可以像这样编写：\n\n```css\np {\n  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;\n}\n```\n\n除了系统自动选择外，其实用户也可以在浏览器中自行设置自己喜欢的称线字体、等宽字体等，所以通用字体族还是很方便。\n\n通过上面的介绍，我们知道，系统为我们提供的字体不够全面也不够统一，虽然可以通过设置多种备选字体和通用字体族来一定程度上弥补这些缺点，但是依然不够完美。因此，我们还可以使用自定义的字体，只需要对应的字体文件`.ttf`或是`.woff`、`.woff2`等格式的文件放在项目目录下，然后使用CSS的一个`@规则`（后面章节会详细介绍）进行导入：\n\n![image-20250820235424790](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F20\u002FLQKYCZh7m1ig2P8.png)\n\n直接将字体添加到项目随便一个目录下，接着使用`@font-face`来创建自定义字体：\n\n```css\n@font-face {\n  font-family: 'YuanShen';\n  src: url(\"..\u002Ffont\u002Fyuanshen.ttf\");  \u002F* 使用url(\"\")函数来指定位置，注意这个不一定是本地文件，甚至可以是一个网络文件 *\u002F\n}\n```\n\n> 这里用到了`url()`函数，它可以代表一个文件地址，实际上CSS中还存在其他多种函数实现不同功能，我们会在后续逐步介绍\n\n这样，我们就成功导入了一个自定义的字体，现在我们就可以在CSS中使用这个字体了：\n\n```css\np {\n  font-family: 'YuanShen', sans-serif;\n}\n```\n\n此时就是这样的效果了：\n\n![image-20250820235628936](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F20\u002FJPq1z8D6obxWcHr.png)\n\n不过，虽然可以像这样直接在项目中导入自己喜欢的字体，但是字体文件一般都比较大，动不动就是几十上百MB大小，用户在访问我们的页面时同样需要下载这些字体文件，在后续我们接触到的服务器环境上，网络带宽资源一般都比较有限，可能就会出现页面加载很久的情况。现在比较常见的网站为了优化访问速度，一般都是尽量使用系统字体而非自定义字体。有关更多`@font-face`用法请参阅：https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002F@font-face\n\n最后需要注意的是，文本相关的样式都是支持**自动继承**的（包括下面会介绍到的样式属性），因此我们设置字体之后一般其之后的所有元素都会生效这个字体，所以一般都将字体设置尽量写到外层一点的标签上来全局生效字体样式。\n\n### 字体大小\n\n了解完字体之后，我们接着来看字体大小，在我们的页面中，肯定存在一些字体更大的元素和更小的元素，比如之前我们使用的Header标签：\n\n![image-20250821003148939](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FMHDQSPUXkVI4epG.png)\n\n这些Header自带了一定的字体大小和字体粗细，因此它们比普通的段落中的文本看起来更大更显眼。针对于页面中的普通文本，如`p`、`span`、`div`等内部文本，大部分情况下默认字体大小都为`16px`（有关像素点的概念请回顾HTML篇视频教程图片知识点部分），除非用户手动或系统自动修改了浏览器默认字体。为了调整它们的大小，我们也可以通过`font-size`属性来手动指定：\n\n```css\np {\n  font-size: 25px;\n}\n```\n\n比如我们可以为所有的`p`标签中的文字设定为25个像素点的大小，此时我们会发现文本的大小和`h2`标签一致了：\n\n![image-20250821003447180](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002Fayc2wX3rVtjWbOH.png)\n\n同样的，如果我们认为`h1`或`h2`标签的文字大小不符合我们想要的效果，我们也可以对其大小进行修改：\n\n```css\nh2, h1 {\n  font-size: 20px;\n}\n```\n\n此时我们会发现这两个标签本身的大小被我们编写的CSS样式手动覆盖掉了：\n\n![image-20250821003910144](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FjX45qL1nEyohWKS.png)\n\n使用`font-size`属性除了可以手动指定像素点大小之外，我们也可以使用预设的尺寸，比如：\n\n```css\nh1 { font-size: small; }\nh2 { font-size: medium; }\np { font-size: large; }\n```\n\n类似这种`small`、`meidum`、`large`、`x-large`等预设值，都是绝对尺寸，一般都是固定大小，参考文档：https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fabsolute-size\n\n不过需要额外注意的是，当我们使用`px`作为单位时，尽可能避免出现小数的情况：\n\n```css\n.test { \n  font-size: 18.5px;  \u002F* 浮点数的字体大小不一定能正确展示 *\u002F\n}\n```\n\n> 前面我们在讲解像素点的时候说到，它是我们显示屏上不可分割的一个点，只能表示一种颜色，而`0.5`这种小数对于一个像素点来说，实际上是没有意义的，因为正常情况下它根本就无法表示出来，除非使用更高分辨率的显示器并开启缩放，使用更多的像素点表示一个像素点才有机会实现这种效果，而且并不是所有浏览器都能把浮点数像素点处理得非常完美。因此，当我们使用浮点数的像素尺寸时，WebStorm会提醒我们不同浏览器上可能会有不同显示效果。\n\n介绍完绝对尺寸后，我们还需要为大家详细介绍一下相对尺寸的概念，文本的大小有些时可能需要根据其父元素或是根元素的大小而决定，此时相对大小就变得很重要了。我们可以使用`em`作为单位，它表示相对于当前元素的字体大小进行裁定，比如：\n\n```html\n\u003Cdiv class=\"test\">\n  只是雪豹已失联\n  \u003Cp>大烟杆嘴里塞，我只抽第五代\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\n```css\n.test { font-size: 12px }\n.test p { font-size: 1.5em }\n```\n\n此时由于父元素的字体大小只有`12px`，其内部元素会自动继承`12px`的大小，我们将其内部子元素的大小设置为`1.5em`相对大小，也就是当前元素字体大小的1.5倍（由于字体大小会自动继承，也可以视为是父元素字体大小的1.5倍），最终的效果就是子元素的字体变成了`18px`的尺寸：\n\n![image-20250821005955509](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FAwXcdzGjrhUePNJ.png)\n\n由于相对大小可以随意使用浮点数进行表示，因此很容易出现计算出来得到一个小数像素点的情况，比如：\n\n```css\n.test { font-size: 12px }\n.test p { font-size: 1.1em }  \u002F* 此时文本大小为13.2px *\u002F\n```\n\n和上面一样，一旦出现这种小数形式的像素点，不同浏览器的展示效果可能会出现差异。不过随着时代的发展，显示器的分辨率越来越高，几乎都会使用缩放，并且现目前大部分浏览器基本都能很好的渲染小数形式的像素了，所以各位小伙伴也不需要过度在意这种情况。\n\n此外，我们也可以使用`smaller`、`larger`这种预设的相对尺寸，参考文档：https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Frelative-size\n\n```css\n.test { font-size: 15px }\n.test p { font-size: smaller }   \u002F* 同样依据父元素尺寸进行相对调整 *\u002F\n```\n\n在CSS3之后，新增另一个与`em`类似的`rem`单位，它是直接相对于根元素`html`的字体大小进行调整的，相比`em`来说，它更加简单和统一，针对于`rem`单位的尺寸，我们只需要修改根元素大小即可统一完成修改，更加方便：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\" style=\"font-size: 10px\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Ctitle>Title\u003C\u002Ftitle>\n  \u003Clink rel=\"stylesheet\" href=\"css\u002Fstyle.css\">\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cdiv class=\"test\">\n    只是雪豹已失联\n    \u003Cp>大烟杆嘴里塞，我只抽第五代\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n```css\n.test { font-size: 1.5rem }\n.test p { font-size: 1.1rem }\n```\n\n有了`rem`之后，文本的尺寸控制就更加方便统一，这在后续我们学习响应式开发的时候非常好用，也是现在更推荐的一种相对尺寸单位。不过有些时候我们计算相对尺寸比较麻烦，比如现在我们希望吧原本根元素为`16px`，目标元素为`24px`的尺寸改为相对尺寸大小：\n\n```css\n.test {\n  font-size: 1.5rem;   \u002F* 根据公式计算 24 ÷ 16 = 1.5 *\u002F\n}\n```\n\n每次都这样去算实在是太累了，我们也可以考虑使用插件来实现`px`和`rem`的快速转换：\n\n![image-20250821012818150](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FqKPB7shpdrLvyG2.png)\n\n接着就可以在使用`px`作为单位时一键转换为`rem`单位了：\n\n![image-20250821012855712](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002F5VNanHgAySo2s8h.png)\n\n### 文本字重\n\n前面我们介绍了文本大小，这一节我们接着来看文本的粗细，它实际上是依靠文本的字重在进行调整。\n\n不同的字重可以决定文本的粗细，只需使用`font-weight`来调整，它的值介于100-900之间：\n\n```html\n\u003Cdiv class=\"test\">\n  卡布奇诺今犹在，不见当年倒茶人\n\u003C\u002Fdiv>\n```\n\n```css\n.test {\n  font-weight: 400;  \u002F* 默认情况下，文本粗细为400 *\u002F\n}\n```\n\n我们可以将字重向上调整来让文字变得更粗，比如700就是标准的粗体文本了：\n\n![image-20250821171542530](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FmAb9527RU6NEVKO.png)\n\n或是直接调整到100以更细的样式展示：\n\n![image-20250821171752240](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FegKkC3FtMl8svpb.png)\n\n但是需要注意一点的是，有些字体并不会支持所有的字重，比如我们现在希望使用更加精细的字重，实际上并不会生效，我们可以对比一下在宋体下的500和550以及600、650的字重：\n\n![image-20250821173853520](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FkpF4gaGUMAmqD8y.png)\n\n可以看到这几种字重下，字体的粗细没有任何区别，都是使用同一个样式，这正是因为。实际上，当字体本身不支持这种字重时，浏览器可能会有以下行为：\n\n1. 浏览器会选择一个最接近的字重，比如字体没有400的字重，但是有600的，浏览器会自动选择600作为目标。\n2. 浏览器会尝试“模拟”所需的字重，通常是通过对已有字重进行变换（实测在MacOS下Safari和Chrome会进行模拟）\n\n因此，我们一般在设置字体的粗细时，尽可能选择一些大部分字体都有的字重，比如：100细体、400常规、700粗体等。此外，和文字大小一样，CSS也有一些预设值可供选择：**lighter**（相对于父元素来说更细的字体）、**normal**（常规字体，与400等价）、**bold**（粗体字体，与700等价）、**bolder**（相当于父元素来说更粗的字体）\n\n### 字体风格\n\n有些时候我们可以看到页面上会存在一些斜着的字体，这种文本一般都是一些比较需要突出展示的信息，我们可以使用`font-style`来控制字体的展示风格：\n\n```css\n.test {\n  font-style: normal;   \u002F* normal就是常规字体风格，端正 *\u002F\n}\n```\n\n我们可以使用`italic`来让字体变成斜体样式：\n\n![image-20250821181545959](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FujGCms9EZOYLHyW.png)\n\n不过这里还有一个比较类似的倾斜体效果`oblique`，它同样可以让字体变为斜体，它与`italic`主要是看字体是否支持对应的斜体，比如某些字体不支持斜体，但是支持倾斜体，那么此时就需要使用`oblique`（即使使用`italic`也会让`oblique`替代）反之亦然。\n\n此外`oblique`针对一些既不支持斜体又不支持倾斜体样式的字体，浏览器会自行将正体文本拿来进行倾斜渲染，倾斜角度默认为`14°`，我们也可以手动设置倾斜度数：\n\n```css\n.test {\n  font-style: oblique 30deg;\n}\n```\n\n不过，虽然浏览器也能通过算法将正体强制渲染为斜体，但是这与本身就支持斜体的字体对比，肯定是存在不足的。支持斜体的字体可以专门为斜体进行单独优化，比如“a”、“f”、“g”等会有不同的设计。各位小伙伴也不需要过于担心，在绝大多数情况下，我们系统内置的字体都是支持斜体的，并且斜体的使用频率并不高。\n\n### 字体颜色\n\n字体颜色可以让我们页面中的文本丰富多彩，使用方式也很简单，前面已经带大家体验过，只需使用`color`属性就能控制：\n\n![image-20250821193212210](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002F23jzMTSZB5mYuFX.png)\n\n除了使用CSS预设值之外，我们也可以使用更灵活的RGB值来表示颜色，它对于颜色的选择面更广：\n\n![image-20250821195815859](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FjAuDtqeO1lxdmQ3.png)\n\n> RGB值是用来表示颜色的一种方式，它由红色（Red）、绿色（Green）和蓝色（Blue）三种颜色的强度组成，实际上我们的显示器的每一个像素点就是**红绿蓝三种颜色组合而成**的（由于过于微小，需要借助放大镜才能看清楚）当红绿蓝同时发光时，最终会表现为白色，当只有一种颜色发光时，就只有对应的颜色，也可以两两之间组合，甚至可以调整不同颜色灯光的强度来显示出更多的色彩。每个颜色的强度通常用一个数值表示，范围从0到255。例如：\n>\n> - (0, 0, 0) 表示纯黑色，没有红、绿、蓝的成分，也就是红绿蓝都不亮。\n> - (255, 255, 255) 表示纯白色，红绿蓝都达到最大值，全都亮起来，人眼看着就是白色。\n> - (255, 0, 0) 表示纯红色。\n> - (0, 255, 0) 表示纯绿色。\n> - (0, 0, 255) 表示纯蓝色。\n>\n> 通过调整这三个数值的组合，可以产生各种各样的颜色。\n\n因此，使用`rgb`来表示颜色，会更加的灵活，这里我们需要用到`rgb()`函数：\n\n![image-20250821200257392](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FiBwe5nyXhkZ7946.png)\n\n不过，很多情况下我们一般都不会使用这种方式去编写，而是使用更简短的十六进制表示，在最前面添加`#`表示这是一个十六进制的颜色代码，后续每两位分别代表RGB值，比如：\n\n> 十六进制不同于我们传统的十进制，十进制是满十进一，比如9加上1就会变成10，而十六进制则变成了满十六进一，也就是说当数字达到15时才会进位，但是数学中只提供了0-9的阿拉伯数字，因此10-15就只能使用A-F来表示，比如：\n>\n> * 十进制的 8 转换为十六进制为 8，因为都在不进位的范围内。\n> * 十进制的 12 转换为十六进制为 C，因为12还没有达到十六进制进位的要求。\n> * 十进制的 22 转换为十六进制为 16，因为22等于16+6，进一位留下6。\n>\n> 现在回到我们之前的颜色表示上：\n>\n> * (0, 0, 0) 表示纯黑色，转换为十六进制后变为 #000000\n> * (255, 255, 255) 表示纯白色，转换为十六进制后变为 #FFFFFF\n> * (255, 0, 0) 表示纯红色，转换为十六进制后变为 #FF0000\n> * (0, 0, 255) 表示纯蓝色，转换为十六进制后变为 #0000FF\n\n可以看到表示为十六进制之后更加简短好记，我们常用的也是这种表示形式更多。\n\n那么问题来了，我们怎么知道具体哪个颜色对应的十六进制代码是什么呢？这个时候我们就需要找一个色卡网站了，这里我随便列了一个，可以打开看一下：http:\u002F\u002Fpauli.cn\u002Ftool\u002Fcolor.htm（如果打不开的话也可以自己在网上搜索，很多）\n\n![image-20250821202143204](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FKDtA1hI6HqYvCPf.png)\n\n大家可以选择自己喜欢的颜色并找到对应的颜色代码，这样就很方便了。此外，一些我们常见的截图软件也支持显示色彩，比如QQ和微信的截图工具，鼠标指针移动到对应喜欢的颜色上按键盘上的C就可以复制色号了：\n\n![image-20250821202750952](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002F47HwSqDIiG3jeoM.png)\n\n介绍完普通的颜色代码后，我们接着来看带透明度的颜色代码，相比`rgb`它还多出了一个Alpha通道，它代表颜色的透明度，我们可以使用`rgba()`函数，只需在函数的最后个参数写一个0-1之间的数字即可：\n\n![image-20250821214447958](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FPpltxi3dEjgQKef.png)\n\n可以看到，当我们将透明度设置为0.5时，此时文本从红色变成了半透明的红色。如果Alpha值变成0，文本将变得完全透明，如果Alpha值变成了1，那么文本将变成完全不透明。此外，我们也可以直接使用十六进制形式编写RGBA值，但是注意此时Alpha值也需要按照从0到255的范围进行编写：\n\n```css\n.test {\n  color: #FF00007F;   \u002F* 和 rgba(255, 0, 0, 0.5) 等价 *\u002F\n}\n```\n\n至此，有关字体样式相关的内容就介绍到这里。由于篇幅有限，有关更多字体相关设置，请参阅MDN文档：https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Ffont\n\n## 文本样式\n\n前面我们介绍了字体样式，字体样式用于控制文字本身的展现效果，这一节我们接着来介绍文本样式，它用于控制文本段落的整体排版效果，它更加注重整体展现。\n\n### 首行缩进\n\n现在假设我们的页面中存在多端文本信息：\n\n```html\n\u003Cdiv class=\"test\">\n  \u003Cp>\n    人类、鸟类、鱼类... 所谓类，就是对一类事物的描述，是抽象的、概念上的定义，比如鸟类，就泛指所有具有鸟类特征的动物。\n    比如人类，不同的人，有着不同的性格、不同的爱好、不同的样貌等等，但是他们根本上都是人，所以说可以将他们抽象描述为人类。\n  \u003C\u002Fp>\n  \u003Cp>\n    对象是某一类事物实际存在的每个个体，因而也被称为实例（instance）我们每个人都是人类的一个实际存在的个体。\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\n在前面的HTML篇中我们讲到，`p`元素代表文章的一个段落，不同段落之间会自动进行分割，但是它有一个很不符合常理的特点，就是每一段的开头位置并没有缩进，我们从小到大学习的语文教程里面，每一个自然段都是有首行缩进的，一般是两个字符，因此，如果要实现这样的效果，最简单粗暴的就是直接塞空格：\n\n```html\n\u003Cp>\n        人类、鸟类、鱼类... 所谓类，就是对一类事物的描述，是抽象的、概念上的定义，比如鸟类，就泛指所有具有鸟类特征的动物。\n  比如人类，不同的人，有着不同的性格、不同的爱好、不同的样貌等等，但是他们根本上都是人，所以说可以将他们抽象描述为人类。\n\u003C\u002Fp>\n```\n\n![image-20250821222405341](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FoAWgw3bnhqLa4I8.png)\n\n虽然这样确实有效，但是我们会发现空格的数量会变得很多，而且文本也没办法精确做到腾出两个字的位置出来，此时我们就可以考虑使用CSS提供的`text-indent`属性来进行缩进：\n\n```css\n.test p {\n  text-indent: 2em;   \u002F* 由于我们并不知道文字具体会占用多少px宽度，因此这里更适合使用em来代表文字大小，而2em刚好就是当前文字大小的两个字 *\u002F\n}\n```\n\n![image-20250821222723452](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002F72KmOaxPUTzrGH8.png)\n\n可以看到，此时段落的首行就准确地空出了两个字体大小的宽度，也就是标准的两个字。此外，`text-indent`还可以使用`px`、百分比等作为单位，但是一般情况下使用`em`就能达成目的，这里就不做讲解了。\n\n### 水平对齐\n\n我们可以自由控制文本的对齐方式，只需要使用`text-align`即可：\n\n```css\n.test p {\n  text-align: left;  \u002F* 默认情况下，文字都是居左对齐的，也就是从左往右 *\u002F\n}\n```\n\n我们也可以将文本按照从右往左的方式进行对齐：\n\n![image-20250821224412821](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002F5VuO7jKb9l1TfNx.png)\n\n或是居中对齐：\n\n![image-20250821224433489](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002Ff4bzA3QP8RldBCj.png)\n\n`text-align`为我们提供了好几种不同的对齐方式可供使用：\n\n* **start：**如果内容方向是左至右，则等于 `left`，反之则为 `right`。\n* **end：**如果内容方向是左至右，则等于 `right`，反之则为 `left`。\n* **left：**行内内容向左侧边对齐。\n* **right：**行内内容向右侧边对齐。\n* **center：**行内内容居中。\n* **justify：**文字向两侧对齐，将内容隔开，使其左右边缘与行框的左右边缘对齐，对最后一行无效。\n* **justify-all：**和 `justify` 一致，但是强制使最后一行两端对齐。\n* **match-parent：**和 `inherit` 类似，区别在于 `start` 和 `end` 的值根据父元素的书写方向确定，并被替换为恰当的 `left` 或 `right` 值。\n\n这里需要特别介绍一下`start`和`end`，正常情况下，它们和`left`和`right`效果是一致的，但是有些时候，我们的网页中需要展示一些从右往左书写的文本内容，此时我们就需要在标签上添加`dir`属性来告诉浏览器这段文本的方向是从左往右还是从右往左：\n\n```html\n\u003Cp dir=\"rtl\">\n  人类、鸟类、鱼类... 所谓类，就是对一类事物的描述，是抽象的、概念上的定义，比如鸟类，就泛指所有具有鸟类特征的动物。\n  比如人类，不同的人，有着不同的性格、不同的爱好、不同的样貌等等，但是他们根本上都是人，所以说可以将他们抽象描述为人类。\n\u003C\u002Fp>\n```\n\n这里的`rtl`表示文本的书写是从右往左的，应该从右往左读，此时，`start`和`end`就会依照文本的实际阅读方向来进行对齐，我们会发现`start`的效果变成了`right`的效果。因此，`left`和`right`的效果是绝对的左右，而`start`和`end`会根据内容书写方向来灵活决定。\n\n> 除了在HTML标签上添加`dir`属性表示方向外，我们也可以使用CSS的`direction`样式来表示，但是这种做法并不推荐，因为写在标签上更有助于SEO和无障碍，也是我们在HTML阶段一直强调的标签语义。\n\n还有一个比较特殊的就是`justify`，它用于解决非最后一行的两侧文字对准问题：\n\n![image-20250821230325927](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FNgM3PDdflQ2eEXj.png)\n\n我们可以发现，虽然`left`能够让文本内容以左侧进行对齐，但是文本内容的右侧却没有对齐，由于这里没有使用等宽字体，一些符号、英文字母等和汉字的宽度不同，导致每行的宽度不一致，最后一列就变成了锯齿状。我们可以使用`justify`来让每一行文本自动进行内部间距调整，来实现两边同时对齐：\n\n![image-20250821230605233](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FRfDWjZphCyVgsnH.png)\n\n使用`justify`后，每一行文字内部会进行字与字之间的间距微调，从而让右侧也变得整齐。\n\n最后这里有一个误区需要各位小伙伴注意一下，`text-align`影响的是**块级元素内部**的行内元素对齐方式，如果我们直接在一个行内元素上添加`text-align`是没有任何效果的，因为行内元素占据的空间本身就是内容的宽度，没有多余的空间来让其对齐。比如下面的例子就是典型的错误玩法：\n\n```html\n\u003Cspan>带回家撒大家卡仕达手机卡三等奖哈三等奖卡仕达酱卡好的卡仕达可接受的\u003C\u002Fspan>\n```\n\n最后需要注意的是，水平对齐并不仅仅适用于文字，所有的行内元素和行内块元素同样适用，包括图片在内都是可以生效的。\n\n### 文本修饰\n\n我们可以为文本填写下划线或是中划线来让别人知道我们想要重点标注或是删除的内容，它们其实都是文本的修饰，使用`text-decoration`属性来进行设置：\n\n```html\n\u003Cp>\n  对象是某一类事物实际存在的每个个体，因而也被称为\n  \u003Cspan>实例（instance）\u003C\u002Fspan>\n  我们每个人都是人类的一个实际存在的个体。\n\u003C\u002Fp>\n```\n\n```css\n.test p span {\n  text-decoration: none;  \u002F* 默认情况下为none表示没有任何修饰 *\u002F\n}\n```\n\n这里我们将其修改为`underline`值，表示添加下划线修饰，此时`span`标签中的内容确实添加一个下划线：\n\n![image-20250821231921509](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FouIdS7m9gCB8q5N.png)\n\n此外，还有中划线`line-through`、上划线`overline`。此外，除了简单设置文本修饰线外，我们还可以自由控制修饰的样式，比如我们希望修改修饰的颜色：\n\n```css\n.test p span {\n  text-decoration: line-through red;   \u002F* 不仅添加了中划线，还会使中划线变成红色 *\u002F\n}\n```\n\n除了颜色，我们也可以设置线条的样式，例如实线`solid`、波浪线`wavy`、小点`dotted`、双实线`double`或虚线`dashed`：\n\n```css\n.test p span {\n  text-decoration: line-through red dashed;   \u002F* 不仅添加了中划线，还会使中划线变成红色的虚线样式 *\u002F\n}\n```\n\n除了样式，我们还可以修改线条的宽度，比如：\n\n![image-20250821233508140](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FRqbUdTvafIoEhKl.png)\n\n可以看到`text-decoration`的功能还是比较强大，我们可以进行随意调整实现不同效果的装饰。不过这里需要提及一个新的知识点，我们使用的`text-decoration`之所以可以一次性配置装饰的各种属性是因为它是一个集合了多个CSS属性的简写属性：\n\n> **简写属性**是可以让你同时设置好几个 CSS 属性值的 CSS 属性。使用简写属性，Web 开发人员可以编写更简洁、更具可读性的样式表，节省时间和精力。\n\n比如上面的样式设置本质上就是：\n\n```css\n.test p span {\n  text-decoration-line: line-through;\n  text-decoration-style: dashed;\n  text-decoration-color: red;\n  text-decoration-thickness: 10px;\n}\n```\n\n虽然本质就是多个CSS单属性集合，但是我们可以直接使用简写属性`text-decoration`来一次性编写，让代码更加简洁。在之后的教程中，我们还会遇到多种多样的简写属性，比如`flex`、`background`等。\n\n回顾我们之前在HTML阶段讲解的`a`标签，我们会发现，它其实就自带了文本修饰样式，为其添加了下下划线：\n\n```html\n\u003Cp>\n  对象是某一类事物实际存在的每个个体，因而也被称为\n  \u003Ca href=\"index.html\">实例 (instance)\u003C\u002Fa>\n  我们每个人都是人类的一个实际存在的个体。\n\u003C\u002Fp>\n```\n\n如果我们希望链接自带的下划线不进行显示，也可以通过`text-decoration`属性来将其去除：\n\n![image-20250821234540800](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F21\u002FGQt5T34Obm1KUxW.png)\n\n此时链接的下划线就被去除了。\n\n### 文本大小写\n\n我们可以使用CSS样式来直接将文本中的英文单词变成大写字母或是小写字母，只需要使用`text-transform`来实现：\n\n```html\n\u003Cp>this is a test\u003C\u002Fp>\n```\n\n```css\n.test p {\n  text-transform: none;  \u002F* 默认情况下为none表示没有任何修改 *\u002F\n}\n```\n\n比如我们希望所有单词都大写，可以使用`uppercase`来实现：\n\n```css\n.test p {\n  text-transform: uppercase;\n}\n```\n\n此外还有`lowercase`小写和`capitalize`首字母大写，不过这个首字母大写是每一个单词的首字母都大写，感觉有点鸡肋。\n\n### 行高控制\n\n对于文本来说，行间距也是一个非常重要的参数，如果行与行之间的距离太小，文本看起来会非常的拥挤，一个合适的行间距可以让文本更易于阅读，这一节我们来学习一下行高如何进行调整。\n\n`line-height`属性可以用于调整行高：\n\n```html\n\u003Cp>\n  人类、鸟类、鱼类... 所谓类，就是对一类事物的描述，是抽象的、概念上的定义，比如鸟类，就泛指所有具有鸟类特征的动物。\n  比如人类，不同的人，有着不同的性格、不同的爱好、不同的样貌等等，但是他们根本上都是人，所以说可以将他们抽象描述为人类。\n\u003C\u002Fp>\n```\n\n```css\n.test p {\n  line-height: normal;  \u002F* 默认情况下为normal，不同浏览器可能会有差异，大约为1.4倍行高 *\u002F\n}\n```\n\n如果我们认为行与行之间有些许拥挤，可以尝试对行高进行调整，直接设置一个数字即可代表文字大小的倍数行高：\n\n![image-20250822000439123](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F22\u002Fvexaf7C3GOsi26M.png)\n\n注意`line-height`直接编写倍数就可以代表文字大小的倍数，当然如果像之前一样写成`em`单位，效果也是一样的。将行高设置为1.8之后，我们会发现文本之间行距变得更大了，实际上，从UI设计角度来说，文本阅读的最佳行距就是1.5-1.8左右。这里同样不推荐各位小伙伴使用`px`单位对行高进行设置，因为它太过于固定，当文字大小发生变化时，很难灵活跟随变化。\n\n### 文本间距\n\n前面我们介绍了行距，我们接着来看文字之间的间距，使用`letter-spacing`属性来控制单个字符的间距：\n\n```html\n\u003Cp>You can be more than just a worker\u003C\u002Fp>\n```\n\n```css\n.test p {\n  letter-spacing: normal;\n}\n```\n\n默认情况下，`letter-spacing`的默认值为`normal`，它的值由浏览器决定，但是一般都是0，也就是每个字符之间是没有间距的。我们可以手动调整：\n\n![image-20250822002139676](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F22\u002Fd9ko8L1rCMB7i6P.png)\n\n此时每一个字符之间的间距变成了10个像素，不过，正常情况下，咱们没必要去修改默认的字符间距，因为这样会严重破坏内容可读性。\n\n除了使用`letter-spacing`之外，我们还可以使用`word-spacing`来调整单词之间的间距，浏览器会自动根据我们的文本内容进行分词，然后按照单词进行距离设置：\n\n![image-20250822002342491](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F22\u002FMNS3zP5u8E4acZ6.png)\n\n不过还是那句话，虽然可以通过CSS来调整文字间距，但是意义不大，而且距离没设置好还会适得其反，让内容反而变得更加难以阅读，所以这里只推荐各位小伙伴在特殊情况下才考虑进行间距调整。\n\n### 文本换行\n\n这一节我们来讨论一下文本换行的问题，对于中文内容可能不是很明显，这里我们使用英文内容进行演示：\n\n```html\n\u003Cp>You can be more than just a worker, You can be more than just a worker\u003C\u002Fp>\n```\n\n![image-20250822002635492](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F22\u002FBloykxzDJXvLCOE.png)\n\n默认情况下，文本的换行规则是按照单词进行的，一个完整的单词正常情况下不应该被分割，否则对于阅读者来说会变得非常奇怪，因为单词的另一半跑到下一行去了。所以就会出现一个很奇葩的情况，明明这一行后面还有这么多空间，但是由于不满足接下来这个单词的长度要求，导致接下来的单词被自动换行到下一行去了，这一行的末尾空出来了一个很大的窟窿。\n\n有些时候，可能我们对于单词的完整性要求并没有这么高，此时就可以考虑让单词直接断掉，`word-break`可以用于控制单词的截断策略，常用的两个选项为：\n\n* **normal** – 使用默认换行规则，禁止出现单词分割。\n* **break-all** – 只要到达本行末尾，就强制对单词进行拆分。\n\n比如我们希望单词随意截断，就可以使用`break-all`：\n\n![image-20250822003900243](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F22\u002F2A4TXFvNmYqkpad.png)\n\n我们接着再来看下面一种情况，此时单词的长度非常长，已经超出页面了：\n\n```html\n\u003Cp>workerworkerworkerworkerworkerworkerworker\u003C\u002Fp>\n```\n\n![image-20250822005012979](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F22\u002F2s51CZblimUcJyL.png)\n\n此时由于单词本身的长度就已经超出页面的宽度，但为了保证单词的完整性，同样不会拆分换行。那么如果这个时候我们希望保持`word-break: normal;`的状态，同时针对于这种超长的单词又能合理拆分换行该怎么办呢？这时我们需要用一个和`word-break`配合的属性`overflow-wrap`（别名为`word-wrap`），它用于控制长度超过一行的单词是否被拆分换行：\n\n![image-20250822005405565](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F22\u002Fi1DtUbksGLzonCg.png)\n\n很多小伙伴都容易把`word-break`和`overflow-wrap`的作用记混，但是后者仅仅只是前者的补充，单独用于控制超长单词的情况。\n\n我们还可以使用`text-wrap`属性来控制是否允许文本换行（注意此属性比较新，对于一些老旧浏览器可能不兼容，如需考虑稳定性，建议使用后续讲解的`white-space`来控制换行），正常情况下，文本都会像上面一样自动进行换行，`wrap`是默认值：\n\n![image-20250822164442457](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F22\u002FeEYfo937UaMLIOF.png)\n\n我们可以将其设置为`nowrap`来禁止文本换行，此时文本会直接超出显示区域：\n\n![image-20250822164716283](https:\u002F\u002Fs2.loli.net\u002F2025\u002F08\u002F22\u002F6rfVmGQHNERXcoi.png)\n\n此外，还有一些其他用于不同换行效果的选项，比如：\n\n* **balance** – 平衡每行的字符数，让每一行看起来都舒适。\n* **pretty** – 和默认换行相同，只是用户代理将使用较慢的算法，该算法更倾向于更好的布局而不是速度。\n* **stable** – 和默认换行相同，只是当用户编辑内容时，他们正在编辑的行之前的行保持不变，这对于文本框来说很实用。\n\n至此，有关文本换行的三种样式属性就介绍到这里，但是需要注意区分一下三者的作用，新手阶段很容易搞混。\n\n### 文本空白处理\n\n在HTML阶段我们提到，文本内容中的空格和换行，最终并不会真正在页面上显示，无论我们添加多少个空格或是换行，取而代之的都是一个空格在页面中展示：\n\n```html\n\u003Cp>You can be     more than just a worker, You can be more than just a worker\u003C\u002Fp>\n```\n\n我们可以通过CSS样式来调整网页处理空白区域的行为，使用`white-space`属性：\n\n```css\np {\n  white-space: normal;   \u002F* 默认值，最终变一个空格 *\u002F\n}\n```\n\n以下是比较常用的几种选项：\n\n* **pre** – 保留全部空格序列，并在源代码的换行和 `\u003Cbr>`  元素处换行，但其他情况一律不换行，即使超出页面。\n* **pre-wrap** – 同上，但文字会在超出宽度前换行。\n* **pre-line** –  与`pre`类似，但是不保留空格序列，只保留源代码的换行和 `\u003Cbr>`  元素换行。\n* **nowrap** – 与上一节谈到的`text-wrap: nowrap`效果一样。\n\n有关更多`white-space`选项请参阅MDN文档：https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fwhite-space\n\n## 本章练习\n\n### 常见选择题\n\n1. **哪个CSS属性用于设置文本的字体系列？**\n   (A) font-size       (B) font-family\n   (C) font-weight      (D) font-style\n\n2. **以下哪个值可以用在`font-weight`属性中以设置文本为加粗？**\n   (A) normal      (B) bold\n   (C) light      (D) all of the above\n\n3. **如果想让文本倾斜，可以使用哪个CSS属性？**\n   A) font-style: italic;     B) font-weight: bold;\n   C) text-decoration: underline;     D) font-family: serif;\n\n4. **以下关于`text-decoration`属性的描述，哪个是正确的？**\n   A) 用于设置文本的阴影效果     B) 用于添加下划线、删除线或上划线\n   C) 用于控制文本的间距     D) 用于设置文本的背景颜色\n\n5. **如何在CSS中设置文本的行高？**\n   A) line-height     B) font-size\n   C) letter-spacing     D) word-spacing\n\n6. **以下哪个CSS属性可以用来改变文本的字间距？**\n   A) letter-spacing     B) word-spacing\n   C) text-indent     D) text-align\n\n7. **想让段落中的第一行缩进两个字符，应该使用哪个CSS属性？**\n   A) padding-left     B) margin-left\n   C) text-indent     D) line-height\n\n8. **在CSS中，哪个属性可以用来设置文本的颜色？**\n   A) font-color     B) text-color\n   C) color     D) font-style\n\n9. **下列选项中，哪个是正确的CSS注释？**\n\n   A) \u002F\u002F我是注释     B) \u002F* 我是注释 *\u002F\n   C) `\u003C!-- 我是注释 -->`     D) \u002F\u002F 我是注释 \u002F\u002F\n\n10. **下面哪个选择器能选中所有class为`\"active\"`的元素？**\n\n    A) `#active`       B) `.active`\n    C) `active`        D) `*active`\n\n11. **下面哪个选择器能选中所有`\u003Cp>`标签内的`\u003Cspan>`元素？**\n\n    A) `p span`     B) `p > span`\n    C) `p + span`     D) `p ~ span`\n\n12. **下面哪个选择器能选中所有直接子元素为`\u003Cli>`的`\u003Cul>`元素？**\n\n    A) `ul > li`       B) `ul li`\n    C) `ul + li`       D) `ul ~ li`\n\n13. **下面哪个选择器选中所有带有`class`中包含`\"btn\"`的元素（部分匹配，如btn-xxx也算）？**\n\n    A) `[class*=\"btn\"]`       B) `[class^=\"btn\"]`\n    C) `[class$=\"btn\"]`       D) `[class~=\"btn\"]`","欢迎各位小伙伴来到前端路线的CSS课程，这一站也是前端三件套（HTML、CSS、JavaScript）中难度最高的一个，期待与各位小伙伴共度这一旅程","2025-08-24 17:30:01",{"data":468,"status":460,"success":461},[469,474],{"id":8,"image":470,"link":471,"name":472,"type":473},"\u002Fimage\u002Fadv\u002Frainyun-2025-06.webp","https:\u002F\u002Fwww.rainyun.com\u002Fitbaima_","雨云优惠购","cloud",{"id":66,"image":475,"link":476,"name":477,"type":478},"\u002Fimage\u002Fadv\u002Fsimcard-2025-11.webp","https:\u002F\u002Fmall.itbaima.cn","号卡优惠","simcard"]