首页 > 其他分享 >新人基础笔记css的文本属性及字体样式

新人基础笔记css的文本属性及字体样式

时间:2024-03-18 18:58:19浏览次数:22  
标签:文本 normal 新人 语法 字体 font 文本属性 css 属性

css的字体属性 

1.字体系列

CSS使用font-family属性定义文本的字体系列。
语法:

p { font-family:“微软雅黑”;}
div {font-family:Arial,“Microsoft Yahei”,"微软雅黑";}
  • 各种字体之间必须使用英文状态下的逗号隔开
  • 一般情况下,如果有空格隔开的多个单词组成的字体,加引号
  • 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
  • 最常见的几个字体:body{font-family:'MicrosoftYaHei',tahoma,arial,'Hiragino Sans GB’;  

 2.字体大小

CSS 使用 font-size 属性定义字体大小。
语法:

p{
 font-size: 20px;
}
  • px(像素)大小是我们网页的最常用的单位

  • 谷歌浏览器默认的文字大小为16px

  • 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小

  • 可以给 body 指定整个页面文字的大小

3.字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细,
语法:

 

p{
  font-weight:bold;
}
属性值描述
noraml默认值(不加粗的)
bold定义粗体(加粗的)
100~900400同等有normal,而700等于bold    注意这个数字后面不跟单位

 4.文字样式

CSS 使用 font-style 属性设置文本的风格。

语法:

p{
  font-style:normal;
}
属性值作用

normal

默认值,浏览器会显示标准的字体样式font-style:normal ;
italic

浏览器会显示斜体的字体样式。

 5.字体总结

属性表示注意点
font-size

字号

我们常用的单位是px像素,一定要带上单位
font-family字体实际工作中按照团队的要求来写字体
font-weight字体粗细记住加粗是700或者bold,不加粗是normal或者400记住数字不要跟单位
font-style字体样式记住倾斜是italic,不倾斜是normal工作中我们最常用的就是normal

css文本属性

1.文本颜色

color 属性用于定义文本的颜色。
语法:

div{
  color:red;
}
表示属性值
预定义的颜色值red,green,blue,orange,pink等等
十六进制#FF0000,#FF6600,#29D794等
RGB代码rgb(255,0,0)或rgb(100%,0%,0%)

开发中常用的是十六进制,实例如下可用工具寻找颜色: 

2.文本对齐

text-align 属性用于设置元素内文本内容的水平对齐方式。

语法:

div{
 text-align: center;
}
属性值解释
left左对齐(默认值)
right右对齐
center居中对齐

3.装饰文本

 语法:

div{
  text-decoration:underline;
}

 

属性值描述
none默认,没有装饰线(最常用)
underline下划线,链接a自带下划线(常用)
overline上划线(几乎不用)
line-through删除线(不常用)

 4.文本缩进

语法:

div{
  text-indent:20px;
}
div{
  text-indent:2em;
}

em 是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的 1个文字大小! 

5.行间距

line-height 属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离
语法:

p{
  line-height:26px;
}

行高的文本分为 上间距 文本高度 下间距 =行间距

注释:想交流的私信我+1

 

标签:文本,normal,新人,语法,字体,font,文本属性,css,属性
From: https://blog.csdn.net/J3259392566/article/details/136768269

相关文章

  • CSS样式表和调试工具及语法及符合选择器
    注:CSS样式表,chrome调试工具,Emmet语法,css符合选择器一.样式表按照CSS样式书写的位置(或者引入的方式),CSS样式表可以分为三大类:1.行内样式表(行内式)行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式。语法:<divstyle="color......
  • css实现一个三排数组滚动抽奖
    简单理解可视化版本:<divclass="slot-machine"><divclass="reel"><div>Item1</div><div>Item2</div><div>Item3</div><div>Item1<......
  • html css 两栏 三栏布局
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device......
  • 关于scss手动遍历生成类名
    1、自动生成宽度类名$width-name:300,100;@each$namein$width-name{.w#{$name}{width:$name+px;}};//以上代码将会生成.w300{width:300px;};.w100{width:100px;}2、自动生成间距类名$margin-name:(mt:(16,24,10),mb:(16),ml:......
  • css的基本使用
    CSS2.3结构伪类选择器伪类<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>ulli:first-child{background:brown;}......
  • 详细了解前端中css的相对定位和绝对定位
    序言:今天要说的是前端中css经常使用的相对定位和绝对定位,相信你在看完这篇文章后,对它的使用,以及它们出现的各种嵌套都会了如指掌,得心应手。目录概念理解:1、对相对定位的概念理解2、对绝对定位的概念理解应用实践:1、在相对定位方框体内的其他方框的定位情况分析:<1>在相......
  • CSS3一些总结
    1.标准流2.浮动3.定位1.relative[相对定位]以当前相对定位的元素原有的位置作为参照物移动指定的距离相对定位的元素移动后,原有的位置仍然会被占用2.absolute[绝对定位]绝对定位的元素移动后,原有的位置不会被占用以其他定位的元素[默认值static不算]作为参照物移......
  • CSS常见选择器
    1.基础选择器   选择器作用:查找标签设置样式标签选择器:使用标签名作为选择器类选择器:(1)定义类选择器-->.类名(2)使用类选择器标签添加class="类名"<style>/*定义*/.green{color:green;}.size{font-size:10px;}<......
  • CSS——字体和文本样式
    1.字体样式1.1.字体大小属性名:font-size取值:数字+px注意点:谷歌浏览器默认文字大小是16px单位需要设置,否则无效1.2.字体粗细属性名:font-weight取值:关键字:正常normal加粗bold纯数字:100~900的整百数:正常400加粗700注意点:不是所有字体都提供了......
  • HTML学习笔记3: CSS选择器
    CSS选择器元素选择器<style>p{color:lightcoral;}</style><!--元素选择器:设置了某个元素(span,p,h1)的样式--><p>元素选择器</p>类选择器<style>.hclass{color:lightgoldenrodyellow;}</style><!--类选择器:给标签指定一个类--><......