深入CSS| 青训营笔记

v10
103 阅读2分钟

20140124114736347.jpg.source.jpg 这是我参与「第五届青训营」笔记创作活动的的第2天

如何在页面中使用CSS

内联，直接在标签内添加style属性来控制该标签内容，不建议使用

<p style="font-size:26px;color: pink;">
        字体大小26px
</p>
复制代码

嵌入式写法，在<head></head>内添加<style></style>来选择控制相应的内容

<style>
        p{
            font-size:26px;
            color: pink;
        }
</style>
复制代码

链接外部CSS文件来更改当前页面的内容的样式，简称外链。推荐使用

<link rel="stylesheet" href="../css/lianxi.css">

选择器 Selecter

通配选择器

<h1>This is heading</h1>
<p>This is some paragraph.</p>

<style>
    * {
    color:red;
    font-size:20px;
    }
</style>
复制代码

标签选择器

<h1>This is heading</h1>
<p>This is some paragraph.</p>

<style>
    h1 {
        color: orange;
    }
    p {
        color: gray;
        font-size:20px;
    }
</style>
复制代码

id选择器

<h1 id="logo">
    <img
       src="https://assets.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width="48"/>
    HTML5 文档
</h1>
    
<style>
    #Logo {
        font-size： 60px;
        font-weight: 200;
    }
</style>
复制代码

类选择器

<h2>Todo List</h2>
<ul>
    <li class="done">Learn HTML</li>
    <li class="done">Learn CSS</li>
    <li>Learn JavaScript</li>
</ul>

<style>
    .done {
        color: gray;
        text-decoration:Line-through;
</style>
复制代码

属性选择器

<Label>用户名：</label>
<input value="zhao" disabled />
<label>密码：</label>
<input value="123456" type="password"/>

<style>
    [disabled] {
        background: #eee;
        color: #999;
    }
    input[type="password"] {
        border-color: red;
        color: red;
    }
</style>
复制代码

伪类（pseudo-classes）

<style>
    a:link{   }
    a:visited {  }
    a:active {  }
    :focus{   }
    li:first-child{	  }
    li:last-child{	 }
</style>
复制代码

image-20220725222303140

选择器的特异度

image-20220725223846380

  • id > . > E

继承

某些属性回自动继承其父元素的计算值，除非显式指定一个值

文字属性（color等）一般都可继承，和模型相关的属性（p的width等）一般不可继承

显式继承

inherit

让一个不可继承的属性变成可继承

<style>
    * {
        box-sizing: inherit;
    }
    html {
        boxing-sizing: border-box;
    }
    .some-widget {
        box-sizing: content-box;
    }
</style>
复制代码

如果从元素父集一层一层往上找没找到 => 初始值

初始值

  • CSS中，每个属性都有一个初始值

    • background-color 的初始值为 transparent
    • margin-left 的初始值为 0

  • 可以使用 initial 关键字显式重置为初始值

    • background-color: initial

Flex布局：一维

Grid布局：二维

image-20220725231138968

绝对定位

position属性

  • static 默认值，非定位元素
  • relative 相对自身原本位置偏移，不脱离文栏流
  • absolute 绝对定位，相对非 static 祖先元素定位
  • fixed 相对于视口绝对定位

盒模型

image.png margin，也就是外边距。外边距规定了两个盒模型之间的距离.border，也就是边界。边界决定了一个盒模型的最外层。边界里面的就是padding，即内边距。内边距决定了内容到边框中间的距离.content就是实际的内容。

总结：

这是我参加青训营的第二天，CSS中flex的布局用的并不多，通过这些课进行了一些巩固。
avatar
文章
阅读
粉丝