CSS基本用法 ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第1天。 已经在青训营学习到了第二天了，今天学习了CSS的相关知识，自己对于不会的和之前不完善的知识整理了如下。

选择器

属性选择器

I.某种属性的时候

<input value="zhao" disabled/>

<style>
    [disabled] {
        background:#eee;
        color:#999;
    }
</style>

II.属性等于某种特定的值的时候

<input  type="password" value="zhao"/>

<style>
    input [type="password"]{
        border-color:red;
        color:#999;
    }
</style>

III.表达式

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
    //以#开头
    a[href^="#"]{
​
    }
    //以.jpg结尾
    a[href$=".jpg"]{
​
    }
</style>

伪类选择器

<a href="http://example.com">example.com</a>

<style>
    //默认状态下的链接颜色
    a:link{
        color:black;
    }
    //访问过的链接颜色
    a:visited{
        color:gray;
    }
    //鼠标滑过
    a:hover{
        color:orange;
    }
    //鼠标按下
    a:active{
        color:red;
    }
</style>

当出现焦点时的状态

:focus{
    outline:2px solid orange;
}

组合（Combinators）

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	AB	选中B，如果它是A的子孙	nav a
亲子组合	A>B	选中吧，如果它是A的子元素	section > p
兄弟选择器	A~B	选中B，如果它在A后且和A同级	h2 ~ p
相邻选择器	A+B	选中B，如果它紧跟在A后面	h2 + p

选择器组

body,h1,h2,h3{
    margin:0;
    padding:0;
}
[type="checkbox"],[type="radio"]{
    box-sizing:border-box;
    padding:0;
}

字体

通用字体族

字体名	分类	示例
Serif	衬线体	Georgia、宋体
Sans-Serif	无衬线体	Arial、Helvetica、黑体、微软雅黑
Curisive	手写体	Caflisch Script、楷体
Fantasy	英文手写体	Comic Sans MS,Papyus
Monospace	等宽字体	Consolas、Courier、中文字体

实在想用一个字体

将字体文件放到服务器上

通过Web Fonts

英文字体

<h1>Web fonts are awesome!</h1>

<style>
    @font-face{
        font-family:"Megrim";
        src:url("https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2");
    }
    h1{
        font-family:Megrim,Cursive;
    }
</style>

中文字体

字体包通常比较大，会根据需要使用的字，进行裁切

@font-face{
    font-family: f1;
    src:url("//s2.ssl.qhimg.com/static/ff00cb8151eeeecd2.woff2") format("woff2");
}

字体大小font-size

关键字：small、medium、large

长度：px、em

百分数：相对于父元素字体大小

斜体：

font-style:italic;

font简写

font: style weight size/height family

font: blod 14px/1.7 Helvetica, sans-serif;

font: 14px serif;