web前端入门到实战:CSS基本格式以及文字相关的属性

一、CSS格式

1.注意点:

(1)style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签师兄弟关系)

(2)style标签中的属性type属性其实可以不写,默认就是type=“text/css”

(3)设置样式是必须按照固定格式来设置,key:value;其中不能省略冒号和分号(最后一个分号的时候可以省略,但是我们不提倡)

二、CSS包括什么?

CSS包括选择器和属性两部分

其中选择器就是标签名称,属性就是属性名称和值

<!--CSS的格式-->

<head>

  <style type="text/css">

    标签名称:{

              属性名称:属性值

              ......

              }

  </style>

</head>
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

三、常见的文字相关的属性

1.规定文字样式的属性

(1)格式:font:normal;

(2)常见取值:i.normal:正常的文字;ii.italic:倾斜的文字

(3)快捷键:(由于我们使用的是wbstorm,在企业开发过程中掌握某些软件的快捷键是很有必要的,可以达到事半功倍的效果)

fs+table代表font-style:italic;

fsn代表font-style:normal;

2.规定文字粗细的属性

(1)格式:font-weight:bolder;

(2)常见的取值:

i.单词取值:

bold加粗;bolder更粗;lighter:细线(注意:默认是细线的格式,并且有的字体加粗是有上限的,并不是能变得更粗)

ii.100-900之间整百的数字。

(3)快捷键:

fw代表font-weight::

fwb代表font-weight:bold;

fwbr代表font-weight:bolder;

3.规定文字大小的属性

(1)格式:font-size:30px;

(2)单位:px,这里是以像素来显示的(pixel),并且这个单位是不能省略的。

(3)常见的取值:数值加单位

(4)快捷键:

i.fz代表font-size:;

ii.fz20代表font-size:20px;

这里面是支持直接加个数字的

4.规定文字字体的属性

(1)格式:font-family;“”微软雅黑”

(2)常见取值:微软雅黑、宋体(默认)、…(word中有好多中字体)

(3)注意:取值如果是中文的话,一定要用引号来括起来;使用到的取值必须是电脑中提前装好的字体

(3)快捷键:

ff代表:font-family:;(不过在我的webstorm不行,估计版本过低)

<head>
    <meta charset="UTF-8">
    <title>d60&61_fixed_format_of_CSS&text_attribute</title>
    <style>
        p{
            font-style:italic;
            font-weight:900;
            font-size:50px;
            font-family:"微软雅黑";
        }
    </style>
</head>
<body>
<!---->
<p>我是一个段落</p>
<hr>
<hr>
<i>被废弃的倾斜</i>
<br>
<b>被废弃的加粗</b>

如果大家对编程,web前端感兴趣,想要了解学习,打算深入了解这个行业的朋友,可以加下我们的前端学习扣qun : 784783012 ,不论你是学生还是想转行的朋友,我都欢迎,不定期分享干货,整理的一份2019最新的web前端学习资料和0基础入门教程分享给大家:学习前端我们是认真的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值