wloe2gf 发表于 2024-6-29 19:11:16

css有些要紧的知识点


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、CSS简介</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.1、CSS是什么？</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS指的是层叠样式表（Cascading Style Sheets）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS描述了<span style="color: black;">怎样</span>在屏幕、纸张或其他<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;">CSS节省了<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;">1.2、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>场景</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">内嵌式 CSS写在style标签中。style标签<span style="color: black;">一般</span>放在head中 当前页面 小案例</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">外联式 CSS写在单独的CSS文件中，<span style="color: black;">经过</span>link标签引入 多个页面 项目中</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">行内式 CSS写在标签的style属性中 当前标签 <span style="color: black;">协同</span>js<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>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.1、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;">2.1.1 ID<span style="color: black;">选取</span>器</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">结构：#id属性值 { 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>id属性值，找到页面中带有这个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;">所有标签上都有id属性</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;">一个标签上只能有一个id属性值</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;">2.1.2 类<span style="color: black;">选取</span>器</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">结构：.class { 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>类名，找到页面中所有带有这个类名的标签，设置样式</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;">所有标签上都有class属性，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>由数字、字母、下划线、中划线<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;">2.1.3 通配符<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;">功效</span>：找到页面中所有的标签，设置样式</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重视</span>点：默认去除浏览器自带属性margin和padding</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.1.4 标签<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;">功效</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>器<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;">2.1.5 属性<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>多有带 attribute 属性的元素</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> <span style="color: black;">选取</span> attribute=value的所有元素</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> <span style="color: black;">选取</span> attribute属性<span style="color: black;">包括</span>单词 value的所有元素</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> <span style="color: black;">选取</span>其attribute属性值以value开头的所有元素</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> <span style="color: black;">选取</span>其attribute属性值以 value结束的所有元素</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> <span style="color: black;">选取</span>其attribute属性中<span style="color: black;">包括</span>value子串的<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;">功效</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>器<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;">2.2、组合<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>空格分隔 .father .son { 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> &gt;分隔 .father &gt; .son { 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>,分隔 div,p,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>器的元素 <span style="color: black;">选取</span>器之间紧挨着 <a style="color: black;">p.red</a> { css }</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">兄弟<span style="color: black;">选取</span>器 匹配p标签后的所有span元素 <span style="color: black;">选取</span>器之间<span style="color: black;">经过</span> ~ 分隔 p ~ 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;">第1</span>个span元素 <span style="color: black;">选取</span>器之间<span style="color: black;">经过</span> + 分隔 p + span</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.3、伪类<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;">E:first-child <span style="color: black;">做为</span>父元素的第一个子元素的元素E</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">E:last-child <span style="color: black;">做为</span>父元素的最后一个子元素的元素E</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">E:nth-child(n) <span style="color: black;">做为</span>父元素的第n个子元素E</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">E:nth-last-child(n) <span style="color: black;">选取</span>父元素的倒数第n个子元素</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">E:first-of-type <span style="color: black;">选取</span>父元素内<span style="color: black;">拥有</span>指定类型的<span style="color: black;">第1</span>个E元素</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">E:last-of</p>




星☆雨 发表于 2024-8-29 12:19:56

谢谢、感谢、感恩、辛苦了、有你真好等。

游过一群鸭 发表于 2024-9-7 05:36:31

楼主的文章深得我心，表示由衷的感谢！

qzmjef 发表于 2024-10-1 19:05:01

外贸网站建设方法 http://www.fok120.com/

j8typz 发表于 2024-10-18 09:53:35

感谢楼主的分享！我学到了很多。

nykek5i 发表于 2024-11-6 22:11:23

“BS”（鄙视的缩写）‌

j8typz 发表于 2024-11-10 08:21:25

期待与你深入交流，共探知识的无穷魅力。
页: [1]
查看完整版本: css有些重要的知识点