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

理解CSS

CSS是什么？

css(Cascading Style Sheets)

• 用来定义页面的样式

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

在页面中使用css

CSS是如何工作的？

CSS选择器（Selector）

• 找出页面中的元素，以便给他们设置样式

• 使用多种方式选择元素

  • 按照标签名、类名或id
  • 按照属性
  • 按照DOM书中的位置

元素选择器

h1{
 color:white;
}

通配选择器

*{
 color:red;
}

ID选择器

#demo1{
 color:red;
}

<p id="demo1">helloWorld</p>

id选择器，在标签上用id赋值，有且只有一个

类选择器(Class Selector)

.list{
   width:100%;
   display:flex;
   flex-flow:row nowrap;
}
.list-item{
 height:88px;
 background:#eee;
 border-radius：.2rem;
 padding:6px 12px 6px 12px;
}

<ul class="list">
   <li class="list-item">1</li>
   <li class="list-item">2</li>
   <li class="list-item">3</li>
</ul>

类选择器可以使用多次

属性选择器

<div id="app">
  <a href="https://www.baidu.com">百度一下</a>
  <input type="password" placeholder="密码"></input>
   <input type="text" placeholder="密码"></input>
</div>

[href]{
​
 color: red;
​
}
​
input[type="password"]{
​
 background-color: #eee;
​
}
​
input[type="text"]{
​
 background-color: rgba(180, 170, 170, 0.644);
​
}

属性选择器，使用[]来选择a元素里面的href属性，改变了a元素链接的字体颜色。通常可以用来修改input框没有输入时候的提示语属性颜色字体样式。在input里面可以根据input的type类型来进行不同的样式设置。

伪类（pseudo-claasses）

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

• 几种伪类

  • 状态伪类
  • 结构性伪类

学习css的几点建议

• 充分利用MDN和M3C CSS规范
• 保持好奇心，善用浏览器的开发者工具
• 持续学习，新特性还在不断出现