CSS学习|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天

css选择器

属性选择器

disable表示表单项是否被禁用。选中所有disabled属性

<input value="zhao" disable>
<style>
    [disabled]{
        background:#eee;
        color:#999;
    }
</style>

当为特定值时选用，只会选中input并且type为password选择元素。

<input type="password" value="123456">
<style>
    input[type="password"]{
        border-color:pink;
        color:pink;
    }
</style>

属性值匹配条件

<p>
    <a href="#top">回到顶部</a>
</p>
<p>
    <a href="a.jpg">查看图片</a>
</p>

<style>
a[href^="#"]{
    color:#f54767;
    background:0 center/1em url(https://assets.codepen.io/549477/arrow-up.png) no-repeat;
    padding-left:1.1em;
}
//表示href以#开头匹配
​
a[href$=".jpg"]{
   color:#f54767;
    background:0 center/1em url(https://assets.codepen.io/549477/image3.png) no-repeat;
    padding-left:1.2em;
}
//表示href以.jpg结尾
</style>

伪类选择器

• 不基于标签和属性定位元素

• 几种伪类

  • 状态伪类（属于某一状态选中，如连接选择状态）
  • 结构性伪类

状态伪类：

<a href="http://example.com">111</a>
    <br>
    <label>
        用户名：
        <input type="text">
    </label>
<style>
        a:link {
            color: black;
        }
        
        a:visited {
            color: gray;
        }
        
        a:hover {
            color: orange;
        }
        
        a:active {
            color: red;
            /* 鼠标按下之后 */
        }
        
         :focus {
            outline: 2px solid orange;
        }
    </style>

结构伪类：根据dom结点在dom树中出现的位置来决定是否选中元素

<ol>
        <li>阿凡达</li>
        <li>泰塔尼克号</li>
        <li>星球大战：原力觉醒</li>
        <li>复仇者联盟</li>
        <li>侏罗纪世界</li>
    </ol>
<style>
        li{
            list-style-position:inside;
            border-bottom:1px solid;
            padding:0.5em;
        }
        li:first-child{
            color:coral
        }
        li:last-child{
            border-bottom:none;
        }
    </style>

学习实践

flex布局

flex:1 auto

• auto
  

  元素会根据自身的宽度与高度来确定尺寸，但会增加并吸收伸缩容器中额外的自由，空间可能具有自身的宽度和高度来适应伸缩。这相当于将设置为“ flex: 1 1 auto”。

  <div class="box">
          <div class="inner"></div>
          <div class="inner"></div>
          <div class="inner"></div>
          <div class="inner"></div>
      </div>
  

  .box {
              display: flex;
              justify-content: space-evenly;
              /* 水平均匀分布 */
              align-items: center;
              /* 垂直居中 */
              flex-direction: column;
              width: 520px;
              height: 520px;
          }
          .inner {
              width: 300px;
              height: 300px;
              line-height: 75px;
              margin-top: 30px;
              /*background-color:pink;*/
              text-align: center;
              font-size: 20px;
          }
  

  margin与padding

  在网页中在进行css初始化时，通常会使用

  *{
      margin:0;
      padding:0;
  }
  

  其作用是重置浏览器的默认样式。*代表了网页中所有的元素，包括body,ul,li列表标签，p,h标签，dd,dt等......都有默认的margin或padding值，此设置就可以删除浏览器这些默认值。

  可以简单方便的一次性重置所有html网页元素的浏览器样式，代码少，控制量大。

  用*，这样效率会低很多(据说)，因为它重置了所有元素的样式，包括不需要重置的样式，例如table ,我们不需要去重置table元素的样式，所以还需要再为 table 设置默认样式,反而增加了代码量。而且通配符，需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一套初始化样式。

label中的for属性

label中的for属性规定了label与哪个表单元素绑定。for属性的值和表单元素的id值一样，即可完成该label标签与该表单元素的绑定。

<label for="test">label标签</label>
<input type="text"  id="test">

如上所示，该label便签和input便签完成了绑定，当鼠标点击“label标签”时，input元素会被触发，用户即可完成输入。

当点击label标签内的文本后，就会触发绑定的表单元素。也就是说，当用户渲染该标签时，浏览器就会自动将焦点转到绑定的表单控件上。