自学前端——第三天（CSS）

第三天的学习内容是CSS，这是一种用来为HTML文件添加样式的标准。以下是一些CSS的基本用法示例：




<p style="color:blue;">这是一个蓝色的段落。</p>




<head>
    <style>
        p { color: red; }
    </style>
</head>
<body>
    <p>这是一个红色的段落。</p>
</body>

在一个单独的.css文件中：




/* style.css */
p {
    color: green;
}

在HTML文件中引用：




<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>这是一个绿色的段落。</p>
</body>




<style>
    .center {
        text-align: center;
    }
</style>
<p class="center">这段文字居中显示。</p>




<style>
    #big {
        font-size: 24px;
    }
</style>
<p id="big">这段文字字号为24px。</p>




div {
    width: 300px;
    padding: 10px;
    border: 5px solid blue;
    margin: 20px;
}




.container {
    display: flex;
}
.item {
    flex: 1; /* 等于flex: 1 1 0; 表示可伸缩、可收缩、不设最小宽度 */
}




<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>




.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}
 
.grid-item {
    border: 1px solid red;
}




<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
</div>




a:link { color: red; }
a:visited { color: green; }
a:hover { color: hotpink; }
a:active { color: blue; }




<a href="https://example.com">访问Example.com</a>

当多个样式作用于同一元素时，具体的样式取决于选择器的特异性，以及它们在文档中的位置。后者通常意味着在HTML中越后定义的样式优先级越高。




div {
    position: relative;
    top: 20px;
}




div {
    position: absolute;
    top: 10px;
}




div {
    position: fixed;
    bottom: 0;
}




div {
    position: sticky;