1fy07h 发表于 2024-6-30 11:00:37

CSS（一）


    <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;">结构(HTML)</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;"><span style="color: black;">行径</span>(JavaScript)</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;">层叠样式表</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<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>
    <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;"><span style="color: black;">第1</span>种方式</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>style属性来设置元素的样式问题</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>在每一个元素中都复制一遍，并且当样式<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;">第二种方式：内嵌式</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">将样式编写到head中的style标签里</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的<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>为多个标签设置样式，并且修改时只<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;">内部样式表更加方便对样式进行复用</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>，</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;">第三种方式 <span style="color: black;">外边</span>文件链入式</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1. <span style="color: black;">能够</span>将CSS样式编写到一个<span style="color: black;">外边</span>的CSS文件中，<span style="color: black;">而后</span><span style="color: black;">经过</span>link标签来引入<span style="color: black;">外边</span>的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><span style="color: black;">经过</span>1ink标签进行引入，<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. &lt;link rel=”stylesheet” href=”CSS文件路径”/&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4. 将样式编写到<span style="color: black;">外边</span>的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;">CSS语法</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;">CSS的基本语法:</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;"><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;"><span style="color: black;">例如</span>p的<span style="color: black;">功效</span><span style="color: black;">便是</span>选中页面中所有的p元素</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;">声明块由一个一个的声明<span style="color: black;">构成</span></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;">一个样式名 对应一个样式值， 名和值之间以:连接，以;结尾</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>器</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;">语法:*{}</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;"><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;">语法:标签名(}</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">id<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>元素的id属性值选中一个元素</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">语法: #id属性值{}</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;"><span style="color: black;">功效</span>:<span style="color: black;">按照</span>元素的c lass属性值选中一组元素</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">语法: .class属性值{}</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">class是一个标签的属性，它和id类似， <span style="color: black;">区别</span>的是class<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>class属性来为元素分组，<span style="color: black;">能够</span><span style="color: black;">同期</span>为一个元素指定多个class属性</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">id<span style="color: black;">不可</span>重复而class<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;"><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;">语法:<span style="color: black;">选取</span>器1<span style="color: black;">选取</span>器2选选器3<span style="color: black;">选取</span>器n{}</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;">交集<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>
    <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><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>器1，<span style="color: black;">选取</span>器2，<span style="color: black;">选取</span>器3,<span style="color: black;">选取</span>器n{}</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>子元素的元素叫做父元素</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>的元素是子元素</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>后代元素的元素叫做祖先元素</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;">后代元素</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;">子元素<span style="color: black;">亦</span>是后代元素</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>相同父元素的元素是兄弟元素</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;"><span style="color: black;">功效</span>：选中指定父元素的指定子元素</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">语法:父元素&gt;子元素</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;"><span style="color: black;">功效</span>:选中指定元素内的指定后代元素</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>下一个兄弟</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;">紧挨着的下一个元素标签</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;">语法:兄~弟</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;">[属性名=属性值]<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;">[属性名￥=属性值]<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;">伪类</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;">伪类用来描述一个元素的特殊状态</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>:开头</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">:first-child <span style="color: black;">第1</span>个子元素</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">:last-child 最后一个子元素</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">:nth-child() 选中第n个子元素</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;">n第n个n的范围到正<span style="color: black;">没</span>穷</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2n<span style="color: black;">暗示</span>选中偶数位的元素</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2n+1<span style="color: black;">暗示</span>选中奇数位的元素</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">:first-of-type</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">:last-of-type</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">:nth-of-type()</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这几个伪类的</p>




星☆雨 发表于 2024-9-2 16:23:46

论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上，我们要把这种精神传递下去。
页: [1]
查看完整版本: CSS（一）