Day 05：专案01 - 超简单个人履历04 | CSS文字、区块属性

大家早安~昨天介绍完CSS的语法和选择器後，今天要来实际告诉大家究竟有哪些常见属性可以使用呢?

CSS文字

文字颜色

color属性用於设定文字颜色，属性值可以是颜色名称、HEX十六进位色码、RGB色码或HSL色码。

HTML：

<h1 class="name">This is colored by name</h1>
<h1 class="hex">This is colored by HEX</h1>
<h1 class="rgb">This is colored by RGB</h1>
<h1 class="hsl">This is colored by HSL</h1>

CSS：

.name {
    color: red;
}
.hex {
    color: #00946f;
}
.rgb {
    color:rgb(30, 27, 180);
}
.hsl {
    color:hsl(298, 71%, 46%)
}

显示结果为：

想换成其他颜色只要到这个网页挑选好颜色，再复制色码就好了。

背景颜色

使用background-color属性设定背景颜色，属性值和文字颜色的属性值一样。

HTML：

<h1>这是一般的文字</h1>
<h1 class="c0">这是有背景颜色的文字</h1>

CSS：

.c0 {
    background-color: yellow;
}

显示结果为：

文字透明度

使用opacity属性设定透明度，属性值为0~1的浮点数，数字越小越透明。

HTML：

<h1>这是一般的文字</h1>
<h1 class="c1">这是有点透明的文字</h1>

CSS：

.c1 {
    opacity: 0.5;
}

显示结果为：

文字大小

使用font-size属性设定字体大小，属性值可以是像素(px)、百分比(%)...等等。

HTML：

<p>这是一般的文字</p>
<p class="c2">这是放大的文字</p>
<p class="c3">这是缩小的文字</p>

CSS：

.c2 {
    font-size: 20px;
}
.c3 {
    font-size: 50%;
}

显示结果为：

文字粗细

使用font-weight属性设定文字粗细，属性值可以是文字或0~1000的数字，数字越大文字越粗，大於500是比原本粗，小於500是比原本细。

HTML：

<p>这是一般的文字</p>
<p class="c4">这是较细的文字</p>
<p class="c5">这是较粗的文字</p>

CSS：

.c4 {
    font-weight: lighter;
}
.c5 {
    font-weight: 800;
}

显示结果为：

文字字体

使用font-family属性设定文字字体，属性值为字体名称。

HTML：

<p>This is a paragraph</p>
<p class="c6">This is a paragraph</p>
<p class="c7">This is a paragraph</p>

CSS：

.c6 {
    font-family: serif
}
.c7 {
    font-family: cursive;
}

显示结果为：

文字行高

使用line-height设定文字行高，属性值跟文字大小一样。

HTML：

<p>这是一般的文字</p>
<p class="c8">这是行高的文字</p>

CSS：

.c8 {
    line-height: 50px;
}

显示结果为：

文字水平对齐方式

使用text-align设定文字水平对齐方式，属性值left为置左(预设)、center为置中和right为置右。

HTML：

<p>这是置左的文字</p>
<p class="c9">这是置中的文字</p>
<p class="c10">这是置右的文字</p>

CSS：

.c9 {
    text-align: center;
}
.c10 {
    text-align: right;
}

显示结果为：

CSS区块

区块大小

使用width和height属性设定区块的宽和高。属性值可以是像素(px)或百分比(%)。

HTML：

<div class="d1">
    <p>Inside the div</p>
</div>

CSS：

.d1 {
    width: 400px;
    height: 200px;
    background-color: blue;
    color: white;
}

显示结果为：一个宽400px，高200px，背景蓝色文字白字的区块。

区块边框

使用border属性可以设定区块的边框，属性值依序为宽度、样式、颜色。

宽度和颜色的属性值和前面一样，而样式的属性值如下：

• solid：单条实线(预设)
• double：双条实线
• dotted：点状虚线
• dashed：线状虚线

HTML：

<div class="d2">
    <p>Inside the div</p>
</div>

CSS：

.d2 {
    width: 400px;
    height: 200px;
    border: 5px dashed blue;
}

显示结果为：蓝色虚线，宽度给5px的边框。

也允许你单别设定单一边框的属性值，语法就是-後加上top、bottom、left、right，分别对应到上、下、左、右。

HTML：

<div class="d3">
    <p>Inside the div</p>
</div>

CSS：

.d3 {
    width: 400px;
    height: 200px;
    border-top: 5px dashed blue;
    border-right: 2px solid green;
}

显示结果为：上方为蓝色线，右方为绿色线。

边框角度

使用border-radius设定边框的角度，属性值和设定长宽一样。

HTML：

<div class="d4">
    <p>Inside the div</p>
</div>

CSS：

.d4 {
    width: 400px;
    height: 200px;
    background-color: blue;
    color: white;
    border-radius: 10px;
}

显示结果为：

这边有个技巧，如果区块是正方形，然後将border-radius设为50%，会得到圆形的区块。个人履历的头像就是这样做的。

HTML：

<div class="d5">
    <p>Inside the div</p>
</div>

CSS：

.d5 {
    width: 200px;
    height: 200px;
    background-color: green;
    color: white;
    border-radius: 50%;
}

显示结果为：

小结

今天介绍了文字和区块的属性，有了这些属性，我们的网页变得更加五颜六色了!

明天我要讲如何使用CSS调整版面，是非常实用的技巧，千万别错过了哦~

如果喜欢这系列文章麻烦帮我按Like加订阅，你的支持是我创作最大的动力~

本系列文章以及范例程序码都同步更新在GitHub上，後续会持续的更新，如果喜欢也麻烦帮我按个星星吧~

有任何问题或建议，都欢迎在底下留言区提出，还请大家多多指教。