CSS-字体和⽂本属性设置随学笔记
CSS-美化⽹页元素-字体和⽂本属性
使⽤CSS样式美化⽹页⽂本具有如下意义。
1. 有效的传递页⾯信息
2. 使⽤CSS美化过的页⾯⽂本，使页⾯漂亮、美观，吸引⽤户
3. 可以很好的突出页⾯的主题内容，使⽤户第⼀眼可以看到页⾯主要内容
4. 具有良好的⽤户体验
⼀、字体属性
1. 字体设置
CSS使⽤font-family属性定义⽂本的字体系列，字体可以使⽤英⽂字体，也可以使⽤多个字体，各种字体之间必须使⽤英⽂状态下的逗号隔开；注意事项：
⼀般情况下，如果有空格隔开的多个单词组成的字体，加引号；
尽量使⽤系统默认⾃带的字体，保证在任何⽤户的浏览器中都能正确显⽰；
最常见的⼏个字体：body{font-family： 'MicrosoftYaHei',tahoma,arial,'Hiragino Sans GB';}
使⽤多个字体的好处是：系统按顺序检测浏览器是否有这个字体，如果不存在，就会转向下⼀个字体，如果存在，就优先使⽤；
实际开发中，字体设置常⽤于<body>标签，按照团队约定来设置字体。
<style>
h2 {
font-family: '微软雅⿊';
}
.songti {
font-family: '宋体';
}
#kaiti {
font-family: '楷体'
}
* {
font-family: '⿊体';
}
</style>
</head>
<body>
<!-- CSS使⽤font-family属性定义⽂本的字体系列 -->
<h2>泰⼽尔经典语录</h2>
<p class="songti">世界上最遥远的距离，不是⽣与死，⽽是我就站在你⾯前，你却不知道我爱你。——泰⼽尔《鱼和飞鸟的故事》</p>
<p id="kaiti">纵然伤⼼，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p>
<p>寂静在喧嚣⾥低头不语，沉默在⿊夜⾥与⽬光结交，于是，我们看错了世界，却说世界欺骗了我们。</p>
<p>⽣如夏花之灿烂，死如秋叶之静美。</p>
<p>不要着急，最好的总会在最不经意的时候出现。</p>
</body>
　2. 字体⼤⼩和粗细
CSS使⽤font-size属性定义字体⼤⼩
如：p {
font-size: 20px;
}
注意：
px（像素）⼤⼩是⽹页最常⽤的单位；
⾕歌浏览器默认⽂字⼤⼩是16px；
不同浏览器可能默认的⽂字⼤⼩不⼀致，我们尽量给⼀个明确值⼤⼩，不要默认⼤⼩，可以给body指定字体⼤⼩；
标题标签⽐较特殊，，需要单独指定⽂字⼤⼩；
CSS使⽤font-width设置⽂字粗细
参数：normal  正常的字体相当于number为400，声明此值将取消之前的任何设置
bold：粗体相当于number为700，也相当于b对象的作⽤
bolder：特粗体  lighter 细体
<style>
body {
font-size: 16px;
}
/* 标题标签⽐较特殊，，需要单独指定⽂字⼤⼩ */
h2 {
font-size: 16px;
}
.bold {
font-weight: bold  ;
/* fong-werght: 700; */
/* 这个700的后⾯不跟单位，等价于bold，都是加粗的效果
实际开发中，我们提倡使⽤数字，来表⽰粗体或细体*/
}
/* 也可以⽤不让字体变粗，如标题： */
h2 {
font-weight: 400;
/* font-weight: normal; */
}
</style>
</head>
<body>
<h2>泰⼽尔经典语录</h2>
<p class="songti">世界上最遥远的距离，不是⽣与死，⽽是我就站在你⾯前，你却不知道我爱你。——泰⼽尔《鱼和飞鸟的故事》</p>
<p id="kaiti">纵然伤⼼，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p>
<p class="bold">寂静在喧嚣⾥低头不语，沉默在⿊夜⾥与⽬光结交，于是，我们看错了世界，却说世界欺骗了我们。</p>
<p>⽣如夏花之灿烂，死如秋叶之静美。</p>
<p>不要着急，最好的总会在最不经意的时候出现。</p>
</body>
3.字体⽂字样式
CSS使⽤font-style属性设置⽂本样式
参数：normal：默认值，浏览器会显⽰标准的字体样式
italic：浏览器会显⽰斜体的字体样式
<style>
h2 {
font-style: italic;
}
em {
font-style: normal;
}
</style>
</head>
<body>fontweight属性bold
<h2>泰⼽尔经典语录</h2>
<em>泰⼽尔</em>
所谓
复合属性：就是前⼏种属性的简写的⽅式
⼀般情况下，想要设置div⽂字变倾斜加粗字号设置为16像素，并且是微软雅⿊，写法如下
div {
font-size: 16px;
font-family: "Microsoft Yahei";
font-weight: 700;
font-style: italic;
}
但这样写⽐较⿇烦，代码⾏过多，所以我们可以使⽤复合属性
格式：
font: font-style font-weight font-size/line-height font-family;
注意：不能更改顺序，且各个属性之间以空格隔开；
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性不起作⽤。
<style>
font: italic 700 16px 'Micorsoft Yahei';
</style>
</head>
<body>
<div>三⽣三世⼗⾥桃花，⼀⼼⼀意百⾏代码</div>
</body>
可以产⽣同样的效果。
⼆、⽂本属性
1.⽂本颜⾊
CSS⽂本属性可以定义⽂本的外观，⽐如⽂本的颜⾊、对齐⽂本、装饰⽂本、⽂本缩进、⾏间距等
color属性⽤于定义⽂本颜⾊：
⽅式：1.预定义的颜⾊值：red green blue 等；
2.⼗六进制： #FF0000，#FF6600,#29D794等；
3.RGB代码：rgb（255,0）或rgb（100%，0%，0%） r-red g-green b-blue；
<style>
h2 {
color: deeppink;
}
p {
color: #41c526;
}
#a {
color: rgb(228, 37, 37);
}
</style>
</head>
<body>
<h2>泰⼽尔经典语录</h2>
<p id="a">世界上最遥远的距离，不是⽣与死，⽽是我就站在你⾯前，你却不知道我爱你。——泰⼽尔《鱼和飞鸟的故事》</p>
<p>纵然伤⼼，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p>
</body>
2.对齐⽂本
text-align属性⽤于设置元素内⽂本内容的⽔平对齐⽅式
左对齐 left（默认）居中对齐 center  右对齐right
<style>
h2 {
/* 本质是让h2盒⼦⾥的⽂字⽔平居中对齐 */
text-align: center;
}
</style>
</head>
<body>
<h2>泰⼽尔经典语录</h2>
</body>
3.⽂本缩进
text-indent 属性⽤来制定⽂本的第⼀⾏的缩进，通常是将段落的⾸⾏缩进；
通过设置该属性，所有元素的第⼀⾏都可以缩进⼀个给定的长度，甚⾄该长度可以为负值；
特别地：em是⼀个相对单位，就是当前元素（font-size）1个⽂字的⼤⼩，如果当前元素没有设置⼤⼩，则会按照⽗元素的⼀个⽂字⼤⼩
<style>
p {
text-indent: 20px;
}
.two {
/* 此时写了2em，则是缩进当前元素两个⽂字⼤⼩的距离 */
text-indent: 2em;
}
</style>
</head>
<body>
<h2>泰⼽尔经典语录</h2>
<p>纵然伤⼼，也不要愁眉不展，因为你不知是谁会爱上你的笑容。世界上最遥远的距离，不是⽣与
死，⽽是我就站在你⾯前，你却不知道我爱你。——泰⼽尔《鱼和飞鸟的故事》。纵然伤⼼，也不要愁眉不展，因为你不知是谁会爱上你的笑容。<p>不要着急，最好的总会在最不经意的时候出现。</p>
<p class="two">纵然伤⼼，也不要愁眉不展，因为你不知是谁会爱上你的笑容。世界上最遥远的距离，不是⽣与死，⽽是我就站在你⾯前，你却不知道我爱你。——泰⼽尔《鱼和飞鸟的故事》。纵然伤⼼，也不要愁眉不展，因为你不知是谁会爱上</body>
4.装饰⽂本
text-decoration属性规定添加到⽂本的修饰，可以给⽂本添加下划线、删除线、上划线
参数：
none（默认）没有装饰线最常⽤
underline 下划线链接a⾃带下划线常⽤
overline 上划线⼏乎不⽤
line-through 删除线不常⽤
<style>
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-throug {
text-decoration: line-through;
}
/* 可以取消链接a默认的下划线 */
a {
}
</style>
</head>
<body>
<h2>泰⼽尔经典语录</h2>
<p class="underline">世界上最遥远的距离，不是⽣与死，⽽是我就站在你⾯前，你却不知道我爱你。——泰⼽尔《鱼和飞鸟的故事》</p>
<p class="overline">纵然伤⼼，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p>
<p class="line-through">寂静在喧嚣⾥低头不语，沉默在⿊夜⾥与⽬光结交，于是，我们看错了世界，却说世界欺骗了我们。</p>
<a href="#">泰⼽尔经典语录</a>
5.⾏间距
line-height属性⽤来设置⾏间距，可以控制⽂字⾏与⾏之间的距离
⾏间距=上间距+⽂本⾼度+下间距
测量⾏⾼⼯具推荐：FastStone Capture
测量⽅法：⼀⾏⽂字的最下端到下⼀⾏⽂字的最下端的距离等同于⾏间距
<style>
div {
line-height: 26px;
}
</style>
</head>
<body>
<div>泰⼽尔经典语录</div>
<p>纵然伤⼼，也不要愁眉不展，因为你不知是谁会爱上你的笑容。世界上最遥远的距离，不是⽣与死，⽽是我就站在你⾯前，你却不知道我爱你。——泰⼽尔《鱼和飞鸟的故事》。。</p> </body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。