tw4ld6 发表于 2024-6-30 10:43:04

CSS基本语法


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">css概念</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 层叠式样式表，一种来表现HTML的文件样式的计算机语言</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> <span style="color: black;">功效</span>：静态修饰网页，<span style="color: black;">能够</span><span style="color: black;">协同</span><span style="color: black;">各样</span>脚本语言动态地对网页各元素进行格式化</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">css的<span style="color: black;">构成</span></h3>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">层叠式：css中贯穿始终的加载特性</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 1.层叠性</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 2.继承性</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">样式：定义<span style="color: black;">怎样</span><span style="color: black;">表示</span>HTML元素</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 1.文字文本</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 2.背景</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 3.盒模型 </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 4.浮动</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 5.定位</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 6.其他</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">css代码书写位置</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 有4种书写方式：内联式、内嵌式、外联式、导入式。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">内联式：行内式</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 书写位置：在HTML标签之上的style属性中书写css样式</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 所有的css样式属性总体<span style="color: black;">构成</span>标签的style属性的属性值</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">"width:100px;height:100px;font-size:14px;"</span><span style="color: black;">&gt;</span>1<span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span></div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">内联式缺点</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 1.内联式<span style="color: black;">必要</span>写在标签上，<span style="color: black;">无</span>完全脱离html标签</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 2.css样式代码让标签结构繁重，<span style="color: black;">有害</span>于HTML结构<span style="color: black;">诠释</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 3.一个内联式css代码，只能给一个标签<span style="color: black;">运用</span>，<span style="color: black;">倘若</span>有多个标签有相同的样式，<span style="color: black;">一样</span>的css代码要写多次</p>
    <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;"><span style="color: black;">实质</span>工作中不<span style="color: black;">运用</span>内联式编写css代码</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">内嵌式</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">书写位置：在HTML文件中，在head标签里面写一个style标签，所有css代码写在style标签内部。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">内嵌式特点：</h3>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">优点：</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 1.实现了结构和样式的初步分离css负责样式，HTML负责结构</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 2.多个标签<span style="color: black;">能够</span>利用一段代码设置相同的样式，节省代码量。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">缺点：</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 1.结构和样式并<span style="color: black;">无</span>完全分离，代码依然写在HTML文件的 style内部。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.css样式只能给一个HTML文件<span style="color: black;">运用</span>，<span style="color: black;">不可</span>够被多个HTML文件<span style="color: black;">同期</span><span style="color: black;">运用</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 3.在HTML中<span style="color: black;">倘若</span>css代码太多，会<span style="color: black;">导致</span>文件头重脚轻。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">外联式</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 书写位置：在一个单独的扩展名为.css的文件中</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在css文件中直接书写css规则。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">引用：在HTML中head标签内部<span style="color: black;">运用</span>link标签进行引入。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">link标签属性</h3>属性名属性值说名rel“stylesheet”引入的<span style="color: black;">外边</span>文件与HTML之间的关系，样式表hrefcss文件路径引入css文件type“text/css”<span style="color: black;">暗示</span>加载时代码<span style="color: black;">根据</span>纯文本形式的css代码加载。H5中<span style="color: black;">能够</span>省略不写<h3 style="color: black; text-align: left; margin-bottom: 10px;">外联式优点：</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 1.实现了HTML和css完全分离</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.多个HTML文件<span style="color: black;">能够</span>共用一个css文件，便于提取公共css，减少代码量</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 3.<span style="color: black;">能够</span>实现一个css变化，多个HTML页面<span style="color: black;">同期</span>变化，减少工作量</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 4.一个HTML文件<span style="color: black;">能够</span>引入多个css文件，<span style="color: black;">能够</span>实现同一个页面中css代码分层</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">导入式</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">工作中很少<span style="color: black;">运用</span>导入式</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">实质</span>应用:</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 小型案例：<span style="color: black;">能够</span><span style="color: black;">运用</span>内嵌式css</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> <span style="color: black;">实质</span>工作、大型网站项目：<span style="color: black;">举荐</span><span style="color: black;">运用</span>外联式css</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">css规则</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.css代码在给某个标签设置样式前，<span style="color: black;">必要</span><span style="color: black;">运用</span><span style="color: black;">选取</span>器选选中标签</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 2.css样式的属性，属性名和属性值的键值对写法为k:v;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 3.给<span style="color: black;">每一个</span><span style="color: black;">选取</span>器添加样式属性都<span style="color: black;">必要</span>写在一对大括号{}之内</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 4.给一个标签添加所有<span style="color: black;">必须</span>的样式，都<span style="color: black;">必须</span>在{}内部一一<span style="color: black;">陈列</span>出来</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">重视</span>：</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 1.分号， 每条属性后面的分号都<span style="color: black;">必要</span>写，<span style="color: black;">倘若</span>不写会<span style="color: black;">引起</span>后面的所有代码加载错误</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.css中所有属性与属性之间对空格、换行、缩进不<span style="color: black;">敏锐</span></p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">恰当</span>添加注释，使得css代码清晰易读</h3>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">/*注释内容*/</span></div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">代码书写标准</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 展开格式：<span style="color: black;">研发</span>过程<span style="color: black;">运用</span>，代码可读性强，便于调错。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 紧凑格式：上传服务器时<span style="color: black;">运用</span>，减少不必要的空白字符，压缩文件<span style="color: black;">体积</span>，便于传输。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">css中的英文<span style="color: black;">能够</span><span style="color: black;">体积</span>写，不<span style="color: black;">举荐</span><span style="color: black;">运用</span>大写</h3>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">空格规范</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.<span style="color: black;">选取</span>器与大括号{}之间<span style="color: black;">保存</span>一个空格</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 2.冒号后面，属性前面，<span style="color: black;">保存</span>一个空格</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">文字三属性</h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">颜色color</h3>
    <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;"> 属性名k:color</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 属性值v：颜色名、颜色值</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">颜色名</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> <span style="color: black;">运用</span>颜色的英文单词进行<span style="color: black;">暗示</span></p>颜色单词红色red黑色black橙色orange白色white黄色yellow金色gold绿色green粉色pink青色cyan浅黄色lightyellow蓝色blue黄绿色yellowgreen紫色purple天蓝色skyblue<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">更加多</span>的颜色名<span style="color: black;">能够</span><span style="color: black;">经过</span>w3c手册<span style="color: black;">查找</span>到</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">字体font-family</h3>
    <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;"> 属性名k：font-family，字体属于font综合属性的一个单一属性</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">属性值v：字体名<span style="color: black;">叫作</span>，<span style="color: black;">必要</span>包裹在一</p>




nykek5i 发表于 2024-10-7 22:15:05

外贸B2B平台有哪些？

4zhvml8 发表于 2024-10-8 19:25:40

外贸论坛是我们的，责任是我们的，荣誉是我们的，成就是我们的，辉煌是我们的。

qzmjef 发表于 2024-10-28 07:33:17

你的见解独到，让我受益匪浅，非常感谢。
页: [1]
查看完整版本: CSS基本语法