css基础八部分教学

CSS是居于HTML和JavaScript之上的又一重要的前端技术。学习好CSS的基础非常重要，下面将简要地介绍CSS基础的八个主要部分。

CSS引入

head>
    link rel="stylesheet" type="text/css" href="style.css">
    /head>
    

CSS引入通常放在HTML的head> 中

CSS语法

selector {
    property: value;
    property: value;
}

通过选择器 (selector) 选择对应的元素，并通过属性-值 (property-value) 进行样式改变。

选择器

p {
    color: red;
}
#title {
    font-size: 24px;
}
    

选择器有标签选择器、类选择器、id选择器、属性选择器、伪类选择器、伪元素选择器、组合选择器等。

单位

width: 100px;
    height: 50%;
    font-size: 16px;

CSS中常见的单位有像素 (px)、百分比 (%)、文本相对单位 (em) 和视口宽度 (vw) 等。

层叠与继承

.parent {
    color: red;
}
.child {
    color: blue;
}
    div class="parent">
    div class="child">
    text/div>
    /div>

子元素会从父元素中继承属性值。若父元素与子元素存在相同属性，则会根据优先级进行层叠，具体请看下面的内容。

优先级

p {
    color: red;
}
#title {
    color: blue;
}
/* 比较结果为 #title 的优先级大于 p */

class选择器的优先级比元素选择器优先级高，id选择器的优先级比class选择器的优先级高，多个选择器并列时优先级的比较结果与选择器在css中的位置顺序有关。

盒模型

.box {
    width: 100px;
    height: 50px;
    padding: 10px;
    margin: 10px;
    border: 1px solid black;
}

CSS的盒模型有内容区域、内边距、边框和外边距四部分。

浮动与定位

#float {
    float: left;
}
#position {
    position: absolute;
    top: 100px;
    left: 100px;
}
    

浮动常用于布局，定位常用于插入背景图片或进行透明遮罩层的添加等。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！