大前端学习笔记3-CSS基本语法
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">1、</span>CSS概述</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（一）产生背景</p>从HTML被发明<span style="color: black;">起始</span>，样式就以<span style="color: black;">各样</span>形式存在，最初的HTML只<span style="color: black;">包括</span>很少的<span style="color: black;">表示</span>属性。随着HTML的成长，为了满足页面设计者的<span style="color: black;">需求</span>，HTML添加了<span style="color: black;">非常多</span><span style="color: black;">表示</span>功能，例如：文本格式化标签。<span style="color: black;">然则</span>随着这些功能的<span style="color: black;">增多</span>，HTML变得越来越杂乱，<span style="color: black;">况且</span>HTML页面<span style="color: black;">亦</span>越来越臃肿。于是CSS便诞生了。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（二）发展过程</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-9f957861f8c897ef669a771cc80ce1e9_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（三）CSS概念</p>CSS全<span style="color: black;">叫作</span>Cascading Style Sheets，层叠式样式表，是一种用来表现HTML的文件样式的计算机语言。<span style="color: black;">功效</span>：静态在修饰网页，并且<span style="color: black;">能够</span><span style="color: black;">协同</span>脚本语言动态地对网页各元素进行格式化。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（四）前端三层技术</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-9f23450cc3f6331bc73dd65e0054537f_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-cab31355bc27d017a2adbfac3c666314_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（五）CSS的<span style="color: black;">构成</span></p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-fda8665d6de1c359580370777b29a9bc_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">2、</span>CSS语法</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（一）CSS代码书写位置</p>CSS的代码<span style="color: black;">按照</span>书写位置<span style="color: black;">区别</span>分为四种书写方式：内联式、内嵌式、外联式、导入式。<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-ef03abfca5341de3a93f1f500fc74a12_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>外联式样式表<link>标签属性<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-ee05641ca440f21793057edd9b5d1572_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-00560bf5c0ea6278bcac9b16cbeb3f18_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（二）CSS规则</p>CSS规则由两个<span style="color: black;">重点</span>的部分<span style="color: black;">形成</span>：<span style="color: black;">选取</span>器 { 一条或多条声明 }<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-7298a6e2a2807433f39d4bca44475113_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-e73c34efcfa5d6c77ce036cf0250bfcf_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（三）CSS注释语法</p>一个清晰易读的CSS代码，离不开CSS注释的<span style="color: black;">恰当</span>添加。语法格式：/* 中间部分为注释内容 */VS Code快捷键：ctrl+/<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（四）CSS代码书写风格</p>代码风格是<span style="color: black;">实质</span><span style="color: black;">研发</span>中的书写方式，并非强制标准。<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-e5959374494242f3656f8f64a51928e5_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">3、</span>CSS常用样式</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（一）文字三属性</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-2bd6365b024a1f5c8504d49bdece2e75_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>颜色值的两种写法<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-e770b10fb22b7f16ba7136ddaa484efd_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>常用的颜色名和颜色值<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-0910c17559b78bb7ef8d1f493a4cf548_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>字体和字号的<span style="color: black;">重视</span>事项及<span style="color: black;">实质</span>应用<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-19ed618dc8f7d3ff41d5e9d28bf182b5_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（二）盒子实体化三属性</p><span style="color: black;">倘若</span>想在浏览器中<span style="color: black;">详细</span>看到一个盒子占有的<span style="color: black;">实质</span>位置，<span style="color: black;">必须</span>设置盒子<span style="color: black;">能够</span>实体化的三属性。<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-eb59bb04c5293ca774d59ae22af2d284_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">4、</span>CSS<span style="color: black;">选取</span>器</p>在内嵌式和<span style="color: black;">外边</span>CSS中，<span style="color: black;">想要</span>将CSS样式应用于特定的HTML元素，<span style="color: black;">首要</span><span style="color: black;">必须</span>找到该<span style="color: black;">目的</span>元素，<span style="color: black;">此时</span><span style="color: black;">必须</span>用到CSS中的<span style="color: black;">选取</span>器。<span style="color: black;">选取</span>器：<span style="color: black;">选取</span>要添加样式的HTML标签的一种<span style="color: black;">办法</span>、模式。<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-a4a38ad4315091e0654a6b26e227b825_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">5、</span>CSS层叠式</p>CSS概念中，除了前面<span style="color: black;">说到</span>的样式外，还有一个<span style="color: black;">要紧</span>的概念<span style="color: black;">便是</span>层叠式，层叠式是贯穿<span style="color: black;">全部</span>CSS的一个性质，<span style="color: black;">包括</span>继承性和层叠性。<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-83214f309b977f717aa4b9d0de792d18_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-4ad10468bd94a402522e562aed79941a_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上一篇笔记：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下一篇笔记：</p>
外贸论坛是我们的，责任是我们的，荣誉是我们的，成就是我们的，辉煌是我们的。 百度seo优化论坛 http://www.fok120.com/
页:
[1]