一、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>

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

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>

四、源码:

d60&61_fixed_format_of_CSS&text_attribute

地址:

https://github.com/ruigege66/HTML_learning/blob/master/d60%2661_fixed_format_of_CSS%26text_attribute

2.CSDN:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)

3.​博客园:https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号:傅里叶变换,后台回复“礼包”获取Java大数据学习视频礼包。​

HTML连载13-CSS基本格式以及文字相关的属性的更多相关文章

  1. CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、

    与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...

  2. CSS书写格式

    转自: https://segmentfault.com/a/1190000005046830 CSS书写格式 1.格式化代码 1.1文件 [建议]:CSS文件使用无BOM的UTF-8编码 1.2缩进 ...

  3. CSS:CSS 文本格式

    ylbtech-CSS:CSS 文本格式 1.返回顶部 1. CSS 文本格式 文本格式 This text is styled with some of the text formatting pr ...

  4. 在windows中,如何使用cmd命令行窗口正确显示编码为utf-8格式的文字

    在windows中,如何使用cmd命令行窗口正确显示编码为utf-8格式的文字呢? 正确的步骤如下: 1, 打开cmd命令行窗口 2, 输入命令 >chcp 65001 数字65001代表的是c ...

  5. css+div如何解决文字溢出

    看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...

  6. CSS 文本格式

    整理自:(http://www.w3school.com.cn/css/css_text.asp) Text Color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - ...

  7. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  8. CSS控制图片和文字在同一行显示且对齐的3种方法

    CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...

  9. CSS如何设置换行文字自动对齐

    CSS如何设置换行文字自动对齐 如图所示: 代码实现如下: <ul class='warn-page-content'>                <li>         ...

随机推荐

  1. C# 静态构造函数,静态变量执行顺序(精华版)(规正版)

    一.成员初始化整体顺序 1.成员赋值初始化先于构造函数: 2.成员赋值初始先从子类再到基类: 3.构造函数初始化先从基类再到子类: 4.静态成员初始化优先于实例成员初始化: 二.对类型静态成员构造的大 ...

  2. 更改linux的最大文件描述符限制

    To ensure good server performance, the total number of client connections, database files, and log f ...

  3. javascript中间AJAX

    兼容访问XMLHttpRequest物: var xhr = null; if(window.XMLHttpRequest){ //非IE浏览器 xhr = window.XMLHttpRequest ...

  4. ie height

    苦恼我许久了,为啥在IE中设置div的height属性无效呢... 在网上查了,常用解决是设置line-height或者设置overflow:hidden,不过我这个div用来定位的,一是里面没文字, ...

  5. Android 4.0开发之GridLayOut布局实践

    在上一篇教程中http://blog.csdn.net/dawanganban/article/details/9952379,我们初步学习了解了GridLayout的布局基本知识,通过学习知道,Gr ...

  6. Linux性能测试 tcpdump命令

    用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的“头” ...

  7. WPF 设置控件阴影后,引发的Y轴位置变化问题

    原文:WPF 设置控件阴影后,引发的Y轴位置变化问题 背景 最近遇到一个动画执行时,文本位置变化的问题.如下图: 如果你仔细看的话,当星星变小时,文本往下降了几个像素. 貌似有点莫名其妙,因为控件之间 ...

  8. v-charts显示标题

    使用v-charts的时候,如果要显示标题需要以下操作 1. 加入:title props <ve-pie :title="chartTitle" :data="c ...

  9. C#如何使用PythonTuple类型

    示例代码: new PythonTuple(new[] { 1, 2, 3 }); PythonTuple myTuple = PythonOps.MakeTuple(new object[] { 1 ...

  10. Android零碎知识之Style and Theme

    Android的styles资源文件中存在了我们在应用中定义的各种style,它们都是以style开始的元素,包含许多属性的集合.但我们一般般它们分为style和theme,那它们有什么区别呢? 一. ...