前端与css|青训营笔记

GeorgeH
56 阅读2分钟

这是我参与「青训营」的第三天，以下为今日的css学习笔记

在页面中使用css

  • 外链方式
<link rel="stylesheet" href="index.css">
​
  • 内联方式
<div style="margin:lem 0">
    Example
</div>
  • 嵌入方式
<style>
    p{margin:lem 0};
</style>

一般我们推荐使用外链的方式加载css

css是如何工作的？

css-work.png

css选择器

  • id选择器

  • class选择器

  • 属性选择器

    • [属性名]
    input[disable]{//选择所有禁用的input框
    
}
    • [属性名=“值”]
    input[type="password"]{}//选择所有的type=“password”的input框
a[href$=".jpg"]//使用通配符选择所有以".jpg"结尾的href的a标签
a[href^="#"]//选择"#"开头

  • 伪类选择器（什么是伪类？不基于标签和属性定位元素）

    • 状态伪类
    a:link{}
a:visited{}
a:hover{}
a:active{}
:focus{}
    • 结构性伪类
    li:first-child{}
li:last-child{}

  • 组合

css-zuhe.png

  • 选择器的特异度

特异度就是选择题的特异程度，特异度越高选择器的优先程度就越高

如何比较两个选择器的特异度大小：

如下图，我们把一组选择器按id，class，标签的个数排列得到一个数，进行比较这个数的大小就可以确定特异度了。下面这个例子中第一个的特异度大于第二个（122>22)

css特异度.png

  • 特异度的作用

特异度高的样式会覆盖特异度低的样式

在开发中，我们可以写一些基础的样式，当我们要用到一些特殊的样式的时候就可以通过特异度的性质去覆盖掉我们基础的样式

.btn{
   display:inline-block;
   padding:.36em .8em;
   margin-left:.5em;
   text-align:center;
   cursor:pointer;
   border-radius:.3em;
   border:none;
   color:#333;
   background:#e6e6e6;
}
.btn .primary{
    color:#fff;
    banckground:#218de6;
}

  • 继承

    （某些属性会自动继承器父元素的属性值，除非显式指定一个值）

    在css里面一般与文字相关的属性都是可以继承的，与盒子相关的不可继承

    • 显式继承

      • 通过inherit显示继承父元素的样式

white-space属性：

值描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 
 标签。
nowrap文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap保留空白符序列，但是正常地进行换行。
pre-line合并空白符序列，但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。
  • css求值过程

css求值过程.png

总结

刚开始学css的时候会感觉里面的东西有很多，学起来很累。其实没有必要去把里面每一个属性都记住，我们只需要把常用的设计样式的方法都去敲几遍，加深自己的理解就行了，后期遇到特殊的需求再去查看文档

avatar
文章
阅读
粉丝