m5k1umn 发表于 2024-6-30 08:11:23

CSS样式表


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">前端学习笔记教程不<span style="color: black;">定时</span>更新中，传送门：</p><a style="color: black;">前端HTML<span style="color: black;">第1</span>天：什么是网页？什么是HTML？网页怎么形成？</a><a style="color: black;">HTML标签大全</a><a style="color: black;">前端学习：表格学习，附练习+源码</a><a style="color: black;">前端学习之列表，附送全套源码</a><a style="color: black;">CSS入门最全笔记</a>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上一期的CSS入门笔记<span style="color: black;">无</span>更新完，最后一下知识点在本篇内容。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>CSS样式表</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">根据</span>CSS样式书写的位置（<span style="color: black;">或</span>引入的方式）CSS样式<span style="color: black;">能够</span>分成三类</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">1.1 行内样式表（行内式）</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.</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;">"color: red; font-size: 12px;"</span><span style="color: black;">&gt;</span><span style="color: black;">青春不常在</span><span style="color: black;">，</span><span style="color: black;">抓紧谈<span style="color: black;">爱情</span></span><span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.style 其实<span style="color: black;">便是</span>标签的属性</p>
    <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;"> 2.<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.<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><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><span style="color: black;">运用</span></p> 4.<span style="color: black;">运用</span>行内样式表设定 CSS，<span style="color: black;">一般</span><span style="color: black;">亦</span>被<span style="color: black;">叫作</span>为行内式引入
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">1.2 内部样式表（嵌入式）</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个
      标签中</p>

    语法：
    <div style="color: black; text-align: left; margin-bottom: 10px;"> <span style="color: black;">&lt;</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">div</span> <span style="color: black;">{</span>
      <span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">red</span><span style="color: black;">;</span>
      <span style="color: black;">font-size</span><span style="color: black;">:</span> <span style="color: black;">12</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 1.
      标签理论上<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;">2.<span style="color: black;">经过</span>此种方式，<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;"> 3.代码结构清晰，<span style="color: black;">然则</span>并<span style="color: black;">无</span>实现结构与样式完全分离</p> 4.<span style="color: black;">运用</span>内部样式表设定 CSS，<span style="color: black;">一般</span><span style="color: black;">亦</span>被<span style="color: black;">叫作</span>为嵌入式引入，这种方式是<span style="color: black;">咱们</span>练习时常用的方式
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">1.3 <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>都是<span style="color: black;">外边</span>样式表. 适合于样式比较多的<span style="color: black;">状况</span>. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中<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>样式表分为两步：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1. 新建一个后缀名为 .css 的样式文件，把所有 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> 标签引入这个文件。</p>语法：
    <div style="color: black; text-align: left; margin-bottom: 10px;"> <span style="color: black;">&lt;</span><span style="color: black;">link</span> <span style="color: black;">rel</span><span style="color: black;">=</span><span style="color: black;">"stylesheet"</span> <span style="color: black;">href</span><span style="color: black;">=</span><span style="color: black;">"css文件路径"</span><span style="color: black;">&gt;</span></div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>Chrome调试<span style="color: black;">工具</span></h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-ea884b096ce72fb54cf731eb29c4fd79_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;">1.Ctrl+滚轮 <span style="color: black;">能够</span>放大<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.左边是 HTML 元素结构，右边是 CSS 样式。</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>直接输入）和查看颜色。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.Ctrl + 0 复原浏览器<span style="color: black;">体积</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5.<span style="color: black;">倘若</span>点击元素，<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;">6.<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>有雷同是知识点相同。搬运麻烦标明出处，感谢支持原创内容。</p>




gao808909 发表于 2024-8-29 06:31:37

你的留言真是温暖如春，让我感受到了无尽的支持与鼓励。

nqkk58 发表于 2024-10-6 08:22:40

你的话深深触动了我，仿佛说出了我心里的声音。

nykek5i 发表于 2024-10-29 12:04:15

“NB”（牛×的缩写，表示叹为观止）‌

nykek5i 发表于 2024-10-30 22:51:49

外链发布社区 http://www.fok120.com/

nqkk58 发表于 2024-10-31 16:53:02

在遇到你之前，我对人世间是否有真正的圣人是怀疑的。
页: [1]
查看完整版本: CSS样式表