6hz7vif 发表于 2024-6-30 10:59:23

CSS基本语法（一）


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">1 CSS<span style="color: black;">基本</span>语法</h2>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">1.1 <span style="color: black;">基本</span>特性</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">由<span style="color: black;">选取</span>器、属性、属性值三部分<span style="color: black;">形成</span> selector {property: value}</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">1.2 引用<span style="color: black;">办法</span></h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">行内样式
      &lt;div style="color: red;"...
      内部样式表
      &lt;head&gt;
      &lt;style type="text/css"&gt;
      &lt;/style&gt;
      ...
      &lt;/head&gt;
      <span style="color: black;">外边</span>样式表（页面加载的<span style="color: black;">同期</span><span style="color: black;">亦</span>加载css样式表，<span style="color: black;">倘若</span>多个页面引用同一个css样式，则<span style="color: black;">没</span>需重复加载）
      &lt;link href="./css/1.css" rel="stylesheet" type="text/css"/&gt;
      导入式（1.页面加载慢的时候可能会有问题 2.存在浏览器兼容性问题）
      &lt;style type="text/css"&gt;
      @import url("./css/1.css");
      &lt;/style&gt;
    </div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">1.3 引用优先级</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">行内样式 &gt; 内部样式（内部定义 &gt; @import引入） &gt; <span style="color: black;">外边</span>样式
      注：链入<span style="color: black;">外边</span>样式和内部样式的优先级取决于离渲染的标签的位置，越近优先级越高（就近原则）</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">2 CSS<span style="color: black;">选取</span>器</h2>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">2.1 <span style="color: black;">选取</span>器（标签<span style="color: black;">选取</span>器和类<span style="color: black;">选取</span>器）</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">标签<span style="color: black;">选取</span>器：标签名为<span style="color: black;">选取</span>器，引用该样式的页面的对应标签都会<span style="color: black;">运用</span>该样式
      类<span style="color: black;">选取</span>器：
      1.标签中的class属性值为<span style="color: black;">选取</span>器，以点开头，并且在html页面中<span style="color: black;">能够</span>被多次调用
      2.一个标签<span style="color: black;">能够</span>加载多个类<span style="color: black;">选取</span>器，用空格隔开。不<span style="color: black;">一样</span>式进行叠加，冲突样式属性已最下面的样式的属性为准（就近原则）</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">2.2 <span style="color: black;">选取</span>器（ID<span style="color: black;">选取</span>器）</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">同一个id值<span style="color: black;">不可</span>赋给多个标签，但同一个ID<span style="color: black;">选取</span>器在CSS样式设置时，<span style="color: black;">能够</span>被多次<span style="color: black;">运用</span>。
      &lt;style type="text/css"&gt;
      #diTest{
      font-size: 60px;
      }
      #diTest{
      color: blueviolet;
      }
      &lt;/style&gt;</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">2.3 群组<span style="color: black;">选取</span>器和全局<span style="color: black;">选取</span>器</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">群组<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>器、ID<span style="color: black;">选取</span>器等）
      p.classChoose,#diTest{text-decoration: underline}
      全局<span style="color: black;">选取</span>器
      *{text-decoration: underline}</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">2.4 后代<span style="color: black;">选取</span>器</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">1.写法（用空格隔开）：
      h5.class em{color: blueviolet}
      #id em{color: blueviolet}
      2.优先级高于类<span style="color: black;">选取</span>器</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">2.5 伪类<span style="color: black;">选取</span>器</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">1.语法：<span style="color: black;">选取</span>器:伪类标识{}
      2.应用场景：<span style="color: black;">区别</span>状态下<span style="color: black;">表示</span>不<span style="color: black;">一样</span>式
      3.链接伪类的书写<span style="color: black;">次序</span>：:link &gt; :visited &gt; :hover &gt; :active
      a:hover<span style="color: black;">必要</span>置于a:link和a:visited之后，才有效，a:active<span style="color: black;">必要</span>在a：hover之后，才有效。而link、visited两个伪类之间<span style="color: black;">次序</span><span style="color: black;">没</span><span style="color: black;">所说</span>，谁在前都<span style="color: black;">能够</span>。</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">3 CSS继承、层叠和优先级</h2>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">3.1 继承和层叠</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">1.继承：子元素<span style="color: black;">能够</span>从父元素处继承部分样式
      字体<span style="color: black;">体积</span>、颜色<span style="color: black;">能够</span>继承，border<span style="color: black;">没</span>法继承
      兼容性问题：IE6以下版本预览器<span style="color: black;">无</span>继承特性
      默认样式与继承样式冲突时，默认<span style="color: black;">运用</span>默认样式。<span style="color: black;">针对</span>有默认样式的元素，<span style="color: black;">例如</span>h1标签的默认字体<span style="color: black;">体积</span>为2倍于预览器的默认字体（16px），<span style="color: black;">倘若</span>设置body标签<span style="color: black;">选取</span>器的字体大小为12px，则h1的<span style="color: black;">体积</span>就为24px
      2.层叠
      可定义多个样式
      不冲突时，多个样式层叠为一个
      冲突时，<span style="color: black;">按照</span>样式的优先级来应用样式</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">3.2 <span style="color: black;">选取</span>器优先级</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">id<span style="color: black;">选取</span>器 &gt; class<span style="color: black;">选取</span>器（class属性有多个样式时，按样式的定义就近原则，与引用的<span style="color: black;">次序</span><span style="color: black;">无</span>关系） &gt; 标签<span style="color: black;">选取</span>器</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">3.3 权值</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">权值相同</div>




星☆雨 发表于 2024-9-5 15:25:50

论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上，我们要把这种精神传递下去。

j8typz 发表于 2024-10-3 18:18:39

期待楼主的下一次分享！”

7wu1wm0 发表于 2024-10-12 14:32:51

外链论坛的成功举办，是与各位领导、同仁们的关怀和支持分不开的。在此，我谨代表公司向关心和支持论坛的各界人士表示最衷心的感谢！
页: [1]
查看完整版本: CSS基本语法（一）