理解CSS|青训营笔记

郭靖媛
85 阅读7分钟

理解CSS|青训营笔记

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

使用CSS的方式

  • 外链：<link rel="stylesheet" type="text/css" href="style.css">
  • 嵌入：
<head> 
<style type="text/css"> 
   p{ color: red; font-size: 50px; }     
</style> 
</head>
  • 内联：<p style="color: red;font-size: 20px;">这是一段文本</p>

CSS是如何工作的？

graph TD
加载HTML --> 解析HTML --> 创建DOM树 -->展示页面
解析HTML-->加载CSS-->解析CSS -->创建DOM树

基本选择器

1.通用选择器

{ ​ border: 1px solid red; ​ }

解释：" * "号选择器是通用选择器，功能是匹配所有html元素，包括和标签，可以用如下元素标记测试效果：

通过用选择器会将所有元素匹配并配置样式，这是双刃剑，好处就是非常方便，坏处就是将不必要的元素也配置了。目前为止，还不存在所有元素都必须配置的样式，所以不常用。

2.元素选择器

 p{
color: red;
}
<p>这是一个段落</p>

解释：直接使用元素名称作为选择器名即可。

3.ID选择器

#abc{
color: green;
}
<p id="abc">这是一个段落</p>

解释：通过对元素设置全局属性id，然后使用#id值来选择页面唯一元素（注：不能用一个id表示两个元素）。

4.类选择器

（1）用法一
.abc{
 color: blue;
 }

解释：通过对元素设置全局属性class，然后使用.class值选择页面的一个或多个元素。

（2）用法二
b.abc{
color: orange;
}`

解释：也可以使用”元素.class值“的形式，限定某种类型的元素。

（3）用法三
 .def{ font-size: 30px; }

<span class="abc def">这是一个什么都没有</span>

解释：类选择器还可以调用多个样式，中间用空格隔开进行层叠。

5.属性选择器

(1) CSS2版本
[href]{ ​ color: orange; ​ }

<a href="http://baidu.com">百度</a>

解释：属性选择器，直接通过两个中括号里面包含属性名即可，还有好多扩展的属性选择器。

(2)CSS2版本
[type="password"]{
border: 2px solid green ;
}
<input type="text" > <input type="password">

解释：匹配属性值的属性选择器。

(3)CSS3版本
[href^="http"]{
color: red;
}
<a href="javascript:void(0)">好搜</a>

解释：属性值开头匹配的属性选择器。

(4)CSS3版本
[href$=".cn"]{ color: green; }
<a href="http://www.360.cn">360官网</a>

解释：属性值结尾匹配的属性选择器。

(5)CSS3版本
[href*="baidu"]{ color: blue; }
<a href="http://baidu.com">百度</a><br><br>

解释：属性值包含指定的字符的属性选择器。

(6)CSS2
[class~="def"]{ color: brown; }
<span class="abc def">这是一个什么都没有</span>

解释：属性值具有多个值时，匹配其中一个值的属性。

(7)CSS2
[lang|="en"]{ color: red; }

<i lang="en-us">HTML5</i>

解释：属性值具有多个值且使用 “ - ” 号连接符分割的属性选择器。

复合选择器

将不同的选择器进行组合形成新的特定匹配，称之为复合选择器。

1.分组选择器

 p,b,i,span{ font-size: 20px; }

解释：将多个选择器通过逗号分隔，同时设置一组样式。当然，不但可以分组元素选择器，还可以用ID选择器。类选择器。属性选择器混合使用。

2.后代选择器

p b{ color: brown; }
<p id="abc">这是一个<b>段落</b></p>

解释：选择<p>元素内部所有<b>元素，不在乎<b>的层次深度。当然，后代选择器也可以混合使用ID选择器、类选择器、属性选择器。

3.子选择器

ul > li{ 
    border: 1px solid red; 
    }
<ul> 
    <li>我是儿子` 
        <ol> 
            <li>我是孙子</li> 
            <li>我是孙子</li> 
        </ol>`​ 
    </li> ​ 
    <li>我是儿子</li> ​ 
    <li>我是儿子</li> 
</ul>

解释:子选择器类似于后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再向深层次选择。

4.相邻兄弟选择器

p + b{ color: red; }

解释：相邻兄弟选择器匹配和第一个元素相邻的第二个元素。

5.普通兄弟选择器

p ~ b{ color: red; }

解释：普通兄弟选择器匹配和第一个元素后面的所有元素。

伪元素选择器

伪选择器分为两种，第一种是伪类元素选择器，还有一种就是伪元素选择器。容易混淆，在CSS3中为了区分，伪元素前置两个冒号（::）,伪类前置一个冒号（:）。

1.::first-line块级首行

::first-line { color: red; }

解释：块级元素比如<p>、<div>等的首行文本被选定。如果想要限定某种元素，可以加上前置p::first-line.

2.::first-letter块级首字母

::fiest-letter{ color: green; }

解释：块级元素的首字母（中文也可）

3.::before文本前插入

a::before{ content: '点击'; }

解释：在文本前插入内容

4.after文本后插入

a::after{ content: '搜索'; }

解释：在文本后插入内容

image.png

image.png

颜色-HSL

H:色相，颜色本身属性，如红色、黄色，取值范围是0 ~ 360。
S:饱和度，指色彩的鲜艳程度，值越高越鲜艳，取值范围是0 ~ 100%。
L:亮度，指颜色的明亮程度，值越高越亮，取值范围是0~100%。

透明度-alpha

rgba(255,0,0,1) /#ff0000ff (从00 ~ ff)

字体

在写完字体样式最后最好加一个通用字体族。font-family.

image.png

相对字体大小

  <section>
        <h2>A web font example</h2>
        <p class="note">Note:web fonts...</p>
        <p>With this in mind..</p>
  </section>
  section{
      font-size:20px;
    }
  section h2{
      font-size: 2em;  //以section的字体大小为基础20*20px
    }
  section .note{
      font-size: 80%;  //20*80%=16px
    }

字重

font-weight:100 ~ 900;
特殊值：400-normal
           700-blod

行高

line-height:两行文字基准线之间的距离。

image.png

深入CSS

选择器的特异度

选择器特异度
(#)id(.)伪类(E)标签
#nav .list li a:link122
.hd ul.link a022

由表可知 #nav .list li a:link的特异度高，即优先级高

继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值。 文字相关的大部分都是可以继承的，盒模型都是不可继承的。 可以用inherit关键字使原本不可继承的一个属性变得可继承。

初始值

CSS中，每个属性都有一个初始值，当本身没有指定值且没有继承父元素时，为初始值。
eg:background的初始值为transparent（透明）
    margin-left的初始值为0
可以使用 initial关键字显示重置为初始值

CSS求值过程

image.png

image.png

image.png

布局相关技术

  • 常规流：行级、块级、表格布局、FlexBox、Grid布局 image.png

box-sizing:content*box

width: 1.指定content box宽度2.取值为长度、百分数、auto3.auto由浏览器根据其他属性确定 4.百分数相对于容器的conten box宽度

height: 1.指定content box高度 2.取值为长度、百分数、auto 3.auto取值由内容计算得来 4.百分数相对于容器的conten box高度 5.容器有指定的高度时，百分数才生效（元素所在的容器有确定的高度，这个元素设置成百分比才会生效；如果容器本身是auto的高度，容器的高度需要依赖里面的内容才可以确定，如果内容写的百分数，内容的高度又是依赖于容器，这样无法计算出来高度）
[比如一个元素设置了height:100%;需要看一下父级是否有确切的可以计算出来的高度]
padding: 指定元素四个方向的内边距，百分数相对于容器宽度,不管是top，还是bottom都是相对于宽度。
border： 指定容器边框样式、粗细、颜色（三个属性、四个方向）。 tips:可以将一个元素的宽度和高度都设置为0，此时只剩下边框，当粗细颜色不一样的时候可以得到四个三角形，可以根据需要将一些设置为透明色，得到各种各样的形状 image.png margin: margin:auto;水平居中
指定元素四个方向的外边距，百分数相对于容器宽度,不管是top，还是bottom都是相对于宽度。
margin collapse: 垂直方向的元素之间的间距，margin会有一个合并而不是直接叠加，会取两者之间一个较大的边距。

box-sizing:border-box（用的多）

image.png 宽高指的是包含padding和border在内的宽度和高度

  • 浮动：可以使文字环绕图片
  • 绝对流
avatar
文章
阅读
粉丝