一.画盒子
顾名思义就是在浏览器插入一个四方形,宽高随意,那这个要如何操作呢,记得之前学过的无语义标签不,我们可以用<div>标签来画盒子,具体如何操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red {
width: 100px;
height: 100px;
background-color: brown;
}
.orange {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="red">div1</div>
<div class="orange">div2</div>
</body>
</html>其实本质就是,div标签独占一行,有自己的宽高:
,我们所做的,就是把这个标签的宽高改变,然后加上背景颜色,这样就是一个盒子了涉及到的属性为width,height,background-color,宽高背景色.width是盒子的宽,单位是px,height是盒子的高单位也是px,background-color是背景色,直接写颜色名字就好了.
二.文字修饰属性
通过CSS,我们也可以对文字进行修饰,有font-size,font-weight,font-style.
1.font-size就是文字的大小,浏览器默认文字大小是16px,我们可以通过font-size来改变大小,记得单位用px.
2.font-weight是字体粗细,有两种表示方法,一种是数字一种是关键字,用数字为400是正常文字粗细,700就是文字加粗,关键字这是normal跟bold.一般都是用数字,在这里不用加单位px.
3.font-style是字体样式,用来设置文字是否倾斜,属性值有normal就是不倾斜,还有italic就是倾斜,可以用来清除文字默认的倾斜效果.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 谷歌浏览器字体大小默认16px */
.size {
font-size: 30px;
}
.h3 {
font-weight: 400;
}
.div {
font-weight: 700;
}
.em {
font-style: normal;
}
.div1 {
font-style: italic;
}
</style>
</head>
<body>
<p class="size">测试字体大小</p>
<br><br>
<h3 class="h3">h3 标题</h3>
<div class="div">div标签</div>
<br><br>
<em class="em">em 标签</em>
<div class="div1">div 标签</div>
</body>
</html>
三.行高
行高用来设置多行文本的间距,属性名是line-height属性值可以有两种写法,直接数字加px,就正常设置,或者直接写数字,就是当前font-size属性值的倍数,比如你现在字体大小30px,你行高写2,那你的行高就相当于60px.如果要测算行高,我们可以计算第一行文字的顶部,到第二行文字的顶部,这就是这个文段的行高了,还有一个小技巧,文字垂直居中,就是把行高属性值等于盒子高度属性值,这样就可以实现垂直居中效果了.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-size: 20px;
/* line-height: 30px; */
/* 行高值是数字,表示是当前标签字体大小的倍数 */
line-height: 2;
}
/* 行高-垂直居中 */
div {
height: 100px;
background-color: skyblue;
line-height: 100px;
}
</style>
</head>
<body>
<p>你发艾欧唯分内外哦安慰法人挖法分为一般一个冰与火虎流弊uv禹vviuvui预计宾语uui那句i呢i干部iv禹iv怒iiv粗盐提纯一天陈婷婷一次粗盐提纯</p>
<div>文字</div>
</body>
</html>如有错误,欢迎指正
标签：文字,15,标签,height,修饰,font,行高,size From： https://blog.csdn.net/Little_Green1/article/details/141194341