CSS|青训营笔记

文章第一句话为“这是我参与「第四届青训营 」笔记创作活动的的第2天

在页面中使用CSS
<外链>
<link rel="styleshteet" href="/assets/style.css">
    
<嵌入>
<style>
    p{
        margin:1em 0;
    }    
    
</style>
    
    
<内联> 
<p style="magin:lem 0">Example Content</p>
    
​

 graph TD;
    加载HTML-->解析HTML;
    解析HTML-->加载CSS;
    解析HTML-->创建DOM树;
    创建DOM树-->展示页面;
    加载CSS-->解析CSS;
    解析CSS-->添加样式到DOM节点;
    添加样式到DOM节点--> 创建DOM树;

<input value="zhao" disable/>
​
<style>
[disabled]//只要元素有disabled属性就可以选中它
    {
        backgound:#eee;
        color:#999;
    }
</style>
​

<p>
    
    <input  type="password" value="123456"/>
</p>
​
<style>
    input[type="password"]{//根据属性某个特定值选中
        boder-color:red;
    }
</style>

<style>
    a[href^="#"]{  以井号开头会被匹配
        
        ...
    }
    a[href$=".jpg"]{  以.jpg号结尾会被匹配
        
        ...
    }
​
</style>
​

伪类

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

• 几种伪类

  • 状态伪类

  • 结构性伪类

  状态伪类

<style>
/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

    </style>

<ol>
    <li>阿凡达</li>
    <li>泰坦</li>
    <li>星球</li>
    <li>侏罗纪</li>
</ol>
​
<style>
    li:first-child{   父级排名第一的
      
    }
    li:last-child{     最后一个的
        
    }
​
</style>

颜色-RGB

rgb( xx,xx,xx)或者 #…

HSL:更符合人的习惯

hsl( xx,xx%,xx%)

alpha透明度

字体font-family

网页会被不同的设备访问，在使用是最好加上一个通用字体族

中英文推荐英文写在中文前面

使用web font
<h1>
    Web 
</h1>
<style>
​
    @font-face{
        font-family:"Megrim";
        src: url(...)
        format('woff2');
    }
    h1{
        font-family:Megrim,Curive;
    }
</style>
​
​
​

font-size

• 关键字

  • small medium large

• 长度

  • px em

• 百分数

  • 相对于父元素字体大小

line-height

行高

White-space

调式css

• 右键点击页面,选择检查

• 使用 快捷键

  • Ctrl +shift +I

深入css

优先级

选择器的特异度
                                    #            .               E
                                    id           (伪类)         标签
#nav .list li a:link                 1             2             2
.hd ul.links a                       0             2             2

继承

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

显示继承
*{      
box-sizing : inherit;
}
html{
box-sizing:content-box;
}
.some-widget{
 box-sizing:content-box;
}
​
​

CSS求值

区别

计算值：浏览器拿到马上就能计算/转化的值，可以resolving 阶段进行转化

使用值：有些要实际用户打开浏览器多少才能

布局(Layout)

• 确定内容的大小和位置的算法

• 根据元素，容器，兄弟节点和内容等信息来计算

布局相关技术

常规流

浮动

绝对定位

height

• 指定content box高度

• 取值为长度，百分数，auto

• auto 取值由内容计算得来

• 百分数相对于容器得content box高度

• 容器有指定得高度时，百分数才生效

padding

• 指定元素四个方向的内边距

• 百分数相对于容器底部

未完待续…

\