走近 CSS | 青训营笔记

stillcalm
46 阅读3分钟

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

理解 CSS

走近 CSS

CSS 的使用方式

课程介绍了在页面中使用 CSS 的三种方式：

  • 嵌入
  • 外联
  • 内联

个人推荐使用嵌入以及外联的方式来使用 CSS，避免使用内联，这样有有利于代码的维护

CSS 选择器

通配选择器

一个星号 (*) 就是一个通配选择器，它可以匹配任意类型的 HTML 元素。在实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。

*{
margin：0；       /*定义外边距*/
padding：0；     /*定义内边距*/
}

标签选择器

所有的HTML标记名都可以作为标签选择器

p{ 
    font-size: 12px; 
    color: #666; 
    font-family:"微软雅黑"; 
}

id 选择器

<p id="red"></p>
​
<style>
  #red{
    color: red;
  }
</style>

id 选择器的值最好唯一，当 id 选择器的值不唯一的时候，会引起一些不必要的麻烦

类选择器

<p class="blue"></p>
​
<style>
  .blue{
    color: blue;
  }
</style>
​

属性选择器

<p title></p>
​
<style>
 [title]{
    color: red;
  }
</style>

伪类选择器

关于状态伪类：

a{
        padding: 10px;
        color:black; /*初始颜色全为黑色*/
        font-weight: bold;
    }
a:hover{
        color:red; /*当鼠标悬停时链接1变成红色*/
    }
a2:link{
        background-color: blue; /*给链接2添加蓝色的背景色*/
    }
a:focus{
        color:yellow; /*当链接3获取焦点时变为黄色,失去焦点时恢复黑色*/
    }
a4:visited{
        color:green; /*被访问过后的链接4变为绿色*/
    }
a5:active{
        background-color: blue; /*鼠标点击的那一瞬间给链接5添加蓝色的背景*/
    }

关于结构伪类：

<style>
li:fisrt-child{  // 选中 li 标签下的第一个子标签
}
​
li:last-child{  // 选中 li 标签下的最后一个子标签
}
</style>

CSS 继承与布局

继承

继承：某些属性会自动继承其父元素的计算值，除非显示指定一个值

文档流布局方式

定位类型分为 3 种： 常规流、浮动和定位

布局方式：

static：默认值

inherit：继承父元素

relative：相对定位

fixed：相对浏览器窗口进行绝对定位

absolute：相对非 static 父元素绝对定位

tips：

1.元素 position 样式属性值为 static（默认值）时，元素会忽略 top/bottom/left/right 或者 z-index 声明

2.元素 position 样式属性值为 relative 时，元素会保持原有文档流，但相对本身的原始位置发生位移，且会占用空间

3.元素 position 样式属性值为 absolute 、且设置了定位（top/bottom/left/right）时，元素会 脱离文档流 相对于其包含块来定位，且不占位

4.元素 position 样式属性值为 fixed 时，元素脱离文档流、且不占位，此时看上去与 absolute 相似

给元素或是其父类元素添加 position: fixed 或者 position: absolute 可以将一个元素固定在页面的某个位置

内联元素与块状元素

<a> （内联元素）可以和其他内联元素位于同一行，且宽高设置无效

<div> （块状元素）不可以和其他元素位于同一行，且宽高设置有效

设置 display 的值：

avatar
文章
阅读
粉丝