1. 概念
  2. 如何在 html 标签中设置 CSS 样式
  3. 选择器语法
  4. 注释
  5. 选择器
  6. 伪类/伪元素
  7. CSS中颜色值表示
  8. Serif和Sans-serif字体区别
  9. 盒子模型(Box Model)
  10. @media媒体类型
  • font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, ‘Helvetica Neue’, Arial, ‘Noto Sans’, sans-serif, ‘Apple Color Emoji’, ‘Segoe UI Emoji’, ‘Segoe UI Symbol’, ‘Noto Color Emoji’;中 -apple-system, BlinkMacSystemFont是什么

    概念

    • CSS 指层叠样式表 (Cascading Style Sheets)
    • 如果把html比作人身体的各个部分，那么CSS就是人身上穿的衣服，耳朵上带的耳环，手腕上戴的手表，指甲上染的指甲油，它是用来装饰html标签的

    如何在 html 标签中设置 CSS 样式

    • 外部样式表(External style sheet)，写在单独的CSS文件中，当样式需要应用于很多页面时，使用外部样式表
    1
    2
    3
    <head>
    	<link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    • 内部样式表(Internal style sheet)，在html文件的style标签中，当单个文档需要特殊的样式时，使用内部样式表
    1
    2
    3
    4
    5
    6
    7
    <head>
    	<style>
    		hr {color:sienna;}
    		p {margin-left:20px;}
    		body {background-image:url("images/back40.gif");}
    	</style>
    </head>
    • 内联样式(Inline style)，直接通过标签的style属性，样式仅需要在一个元素上应用一次时，使用内联样式
    1
    <p style="color:sienna;margin-left:20px">这是一个段落。</p>

    • 当用多种方式定义样式时，应用样式的优先级是：

      内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

      内联样式 > id选择器 > class选择器 > 内部选择器 > 外部样式 > 浏览器默认样式

      上面的规则适用于没有!important 规则的情况。

    选择器语法

    注释

    1
    2
    3
    4
    5
    6
    7
    /*这是个注释*/
    p{
    	text-align:center;
    	/*这是另一个注释*/
    	color:black;
    	font-family:arial;
    }

    选择器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    /*id选择器，所有id属性是para1的标签被应用样式*/
    #para1{text-align:center;color:red;}
    /*class选择器，所有class属性是center的标签被应用样式*/
    .center {text-align:center;}
    /*所有类名是center的p标签被应用样式*/
    p.center {text-align:center;}
    /*标签选择器，所有p标签被应用样式*/
    p{text-align:center;}
    /*包含选择器1，div内的所有p标签被应用样式，不受层级影响*/
    div p{color:yellow;}
    /*包含选择器2，类名为first标签下的所有span标签被应用样式*/
    .first span{color:red;}
    /*子选择器1，div标签的儿子p标签被应用样式，更深一层不行*/
    div>p{color:red;}
    /*子选择器2，类名为first标签下的子span标签被应用样式，更深一层不行*/
    .first>span{color:red;}
    /*兄弟选择器，与div同级的所有p标签被应用样式*/
    div~p{color:red;}
    /*紧邻选择器，每个div后面的p被选中*/
    div+p{color:red;}
    /*通用选择器，匹配html中的所有元素标签*/
    *{color:red;}
    /*分组选择器*/
    h1,h2,p{color:green;}
    /*属性选择器，属性值中包含独立的单词*/
    [title~=flower]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" />
    /*属性选择器，属性值中只要能拆出来value这个词就行*/
    [title*=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
    /*属性选择器，属性值中必须是完整且唯一的单词，或者以 - 分隔开*/
    [lang|=en]     -->  <p lang="en">  <p lang="en-us">
    /*属性选择器，属性值的前几个字母是value就可以*/
    [lang^=en]    -->  <p lang="ennn">
    /*属性选择器，属性值的后几个字母是 value 就可以*/
    a[src$=".pdf"]

    伪类/伪元素

    CSS中颜色值表示

    • 十六进制：”#ff0000”
    • RGB：”rgb(255,0,0)”
    • 颜色名称：”red”

    Serif和Sans-serif字体区别

    盒子模型(Box Model)

    @media媒体类型

    • 为不同的设备设置不同的样式，一般用来响应式布局
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    /*语法规则*/
    @media mediatype and|not|only (media feature) {
        CSS-Code;
    }
    /*当页面小于960px的时候执行它下面的CSS
    screen的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前很多网站都会直接省略screen,因为一般网站可能不需要考虑用户去打印的情况
    */
    @media screen and (max-width: 960px){
        body{
            background: #000;
        }
    }
    /*混合使用大于与等于，意思是当页面宽度大于960px小于1200px的时候执行下面的CSS*/
    @media screen and (min-width:960px) and (max-width:1200px){
        body{
            background:yellow;
        }
    }
    /*竖屏*/
    @media screen and (orientation: portrait) and (max-width: 720px) { 对应样式 }
    /*横屏*/
    @media screen and (orientation: landscape) { 对应样式 }
    • 用min-width时，小的放上面大的在下面
    1
    2
    3
    @media (min-width: 1200px){ //>=1200的设备 }
    @media (min-width: 992px){ //>=992的设备 }
    @media (min-width: 768px){ //>=768的设备 }
    • 用max-width时，大的放上面小的在下面
    1
    2
    3
    @media (max-width: 1199px){ //<=1199的设备 }
    @media (max-width: 991px){ //<=991的设备 }
    @media (max-width: 767px){ //<=768的设备 }

    font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, ‘Helvetica Neue’, Arial, ‘Noto Sans’, sans-serif, ‘Apple Color Emoji’, ‘Segoe UI Emoji’, ‘Segoe UI Symbol’, ‘Noto Color Emoji’;中 -apple-system, BlinkMacSystemFont是什么

    • -apple-system 是在以 WebKit 为内核的浏览器（如 Safari）中，调用 Apple（苹果公司）系统（iOS, macOS, watchOS, tvOS）中默认字体（现在一般情况下，英文是 San Francisco，中文是苹方）
    • BlinkMacSystemFont 是在 Chrome 中实现调用 Apple 的系统字体