您现在的位置是：首页 > 技术教程正文

前端秘法基础式(CSS)(第二卷)

admin 阅读： 2024-03-26

后台-插件-广告管理-内容页头部广告（手机）

一.字体

1.字体的设置

2.字体的颜色

2.1预定义的颜色值

2.2十六进制

2.3rgb表示法

3.字体粗细及样式

4.文本

4.1text-align

4.2text-indent

4.3text-decoration

二.背景属性

三.圆角矩形

四.元素显示模式

五.盒模型

六.弹性布局

七.Chrome调试工具

一.字体

1.字体的设置

通过font-family设置字体样式,通过font-size设置字体大小

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<link rel="stylesheet" href="csspassage/html02.css">
head>
<body>
<div>
龙年大吉!
div>
body>
body div{
font-family: 'Microsoft YaHei';
font-size: 30px;
}

2.字体的颜色

有三种展示方式

2.1预定义的颜色值

直接用对应的单词

body div{
font-family: 'Microsoft YaHei';
font-size: 30px;
color: red;
}

2.2十六进制

#ff0000表示红色,ff转成十进制就是255,一共有六位,每两位对应三原色中的一个,顺序是红绿蓝,每个颜色最多取到255,可以简写成#f00

2.3rgb表示法

color: rgb(255, 0, 0);

3.字体粗细及样式

字体粗细有四种预定样式

normal默认值,粗细为400

bold粗700

bolder更粗 lighter更细

那么字体样式也有四种

normal默认样式

italic斜体

oblique倾斜

inherit继承父元素的字体样式

4.文本

4.1text-align

控制文本靠左靠右居中

4.2text-indent

控制首行缩进,以em为单位代表缩进N个字符

4.3text-decoration

文本装饰

underline加下划线

line-through加中线

overline加上划线

none去下划线

line-height行高,控制行间距

h1{

font-family: 'Microsoft YaHei';

font-size: 25px;

text-align: left;

}

h2{

font-family: 'Microsoft YaHei';

font-size: 25px;

text-align: center;

}

h3{

font-family: 'Microsoft YaHei';

font-size: 25px;

text-align: right;

}

div p{

font-size: 25px;

text-indent: 2em;

text-decoration: underline;

line-height: 50px;

}

二.背景属性

background-color指定背景颜色

background-image:url()添加背景图片

background-repeat指定背景的排列方式

background-position指定背景的位置

background-size指定背景的尺寸

body{

background-color:rgb(71, 209, 209);

background-image: url(https://img2.baidu.com/it/u=1737199380,1768433982&fm=253&fmt=auto&app=120&f=JPEG?w=1067&h=800);

background-size: cover;

}

p{

font-size: 50px;

font-family: "Microsoft YaHei";

color: aliceblue;

text-align: center;

}