CSS(1)| 青训营笔记

33 阅读2分钟

这是我参与「第五届青训营」伴学笔记创作活动的第1天

css基础样式

CSS(Cascading Style Sheets):用来定义页面样式

    h1{
    color: white;
    font-size: 14px;
    }

"h1"选择器:页面所有h1的样式

声明:属性("color")+属性值("white")

每条声明用分号隔开

页面中使用css

外链: <link rel="stylesheet" href="/assets/style.css">

嵌入: <style> li {margin:0; list-style:none;} p {margin:lem 0;} </style>

内链: <p style="margin:lem 0">Example Content</p>直接写到标签里,不需要选择器

常用外链,可以让内容和样式分离;目前多是使用组件。

css工作方式

image.png

选择器Selector

统配选择器:匹配页面所有元素

    *{
    color:red;
    font-size: 20px;
    }


标签选择器:匹配所有对应标签

    h1{
    color: white;
    font-size: 14px;
    }


id选择器:给特定元素设置了id属性,就可以通过id来匹配对应元素,id是唯一的

    <style>
        #logo {
            font-size: 60px;
            font-weight: 200;
        }
    </style>


类选择器:给多个元素设置class属性,可以通过clasa来匹配所有属于同一个class的元素

    <li class="done">...</li>
    <li class="done">...</li>
    .
    .
    <style>
    .done{
        color:gray;
        text-decoration: line-through;
    }
    </style>


属性选择器:通过属性或者属性值来匹配元素

    <style>
        [disabled]{
        ...
        }
     </style>

image.png
^="#" :#开头
$=".jpg :.jpg结尾

状态伪类:用户与页面交互的状态

链接状态: image.png
输入框: focus{...}


结构伪类: image.png

伪类还有很多玩法,查文档 多种方法能组合使用 image.png

颜色

RGB/rgba
#.... 井号后面为6位16进制数,三原色各占两位;a再多两位,表示透明度

HSL
hue色相[0-360] (度)
saturation 饱和度 [0-100%]
Lightness 亮度 [0-100%]

字体font

font-family:字体族,指定多个字体,方便各种不同的设备显示,会从前往后匹配设备具备的字体。

serif衬线体:字符尖端有修饰
sans-serif无衬线体
cursive手写体:仿手写
fantasy:花里胡哨
Monospace等宽字体

一般情况建议先英文字体,再中文字体

使用web font:
    font-family:"Megrim";
    src:url(http://....)

font-size
关键字:small、medium、large
长度:px像素、em倍数(相对父级的设置)
百分数:%(相对父级的设置)

font-style:eg.斜体

font-weight:粗细,400=normal 700=bold

line-height:eg. 1.6,字体本身大小的1.6倍行高

white-space

normal:多个连续空格和换行会合并成一个
nowrap:超出大小也不换行
pre:保留所有空格和换行
pre-wrap:pre+自动换行
pre-line:合并空格,但保留换行

调试

使用浏览器的检查工具能很方便的观察html和css