1、文本标签
- <em> 和 <strong> 都表示强调内容
- <em> 主要是语气上的强调，默认使用斜体（关心语义而不是表现）
- <strong> 表示强调的内容，比em更强烈，默认使用粗体显示
-
<p> <em>我是em</em> <strong>我是strong</strong> </p>
- <i> 和 <b> 纯表现标签
- <i> 标签中的内容会以斜体显示
- <b> 标签中的内容会以加粗显示
- 但是他们没有任何语义，是纯表现的标签
- H5规范中规定，对于不需要着重的内容而是单纯的加粗或者斜体，就可以使用 <i> 和<b> 标签
-
<p> <i>我是i</i> <b>我是b</b> </p>
- <small> 标签
- <small>标签中的内容会比它的父元素中的文字要小一些
- 在H5使用<small>标签来表示一些细则一类的内容
- 比如：合同中的小字，网站的版权声明都可以放到<small>中
-
<p> 我是p标签中的内容 <small>我是small标签中的内容</small> </p>
- <cite>：
- 网页中所有的加书名号的内容都可以使用cite标签，表示参考内容
- 比如：书名、歌名、话剧名、电影名....
- 虽然有点斜体，但是一般只关心语义，不关心表现
- <p><cite>《AWM绝地求生》</cite>是我最喜欢的一本书</p>
- <q>标签：
- 表示一个短的引用（行内引用）
- <q>标签里面的内容，浏览器会默认给他加上引号，一般不常用
- <p>你是我的AWM：<q>你是我的可遇不可求!</q></p>
- <blockquote>标签：
- 表示一个长的引用（块引用）
- 他是一个块元素，不能用<p>元素引用
- 独占一行
-
<div>花城主： <blockquote>为您明灯三千，为您花开满城</blockquote> </div>
- <sup> 和 <sub> 标签
- <sup>标签：设置一个上标
- <sub>标签：设置一个下标
-
<p>Drunk<sup>Youth</sup></p> <p>醉爱于炀<sup><a href="#">[1]</a></sup></p> <p>HOG<sub>DY</sub></p>
- <del> 标签
- 使用<del>标签来表示一个删除内容
- 所以<del>标签中的内容，会自动添加一个删除线
- <p><del>17.5</del><br/>15.5<br/></p>
- <ins>标签
- 表示要插入的内容
- 会自动添加下划线
- <p>朝阳以俞，<ins>俞木逢朝</ins></p>
- <pre> 和 <code> 标签
- 在页面中直接编写代码
- pre标签是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
- code标签专门用来表示代码的，不会保留格式
- 一般结合使用pre和code来表示一段代码
-
<pre> <code> window.onload = funtion(){alert("hello");} </code> </pre>
2、无序、有序、定义列表
- 去掉项目符号
- <style type="text/css"> ul{list-style:none;} </style>
- 无序列表和有序列表：
- 列表就相当于去超市时用的购物清单，在HTML也可以创建列表
- 在网页中一共有三种列表：
- 1、无序列表
- 2、有序列表
- 3、定义列表
- 无序列表：
- 使用ul标签来创建一个无序列表
- 使用li在ul中创建一个一个列表项，一个li就是一个列表项
- 无序列表的项目符号是默认小点点，实体的
- 所以要去掉默认的点点，用css样式
- 通过type属性可以修改无序列表的项目符号
- 可选值：
- disc: 默认值，实心圆点
- square：实心的方块
- circle：空心的圆
- 注意，默认的项目符号我们一般都不使用，在不同的浏览器里显示的不一样
- 如果要设置项目符号，可以采用为<li>设置背景图片的方式来设置
- 注意，<ul>和<li>都是块元素
-
<ul> <li>星际大巫</li> <li>天官赐福</li> <li>AWM绝地求生</li> <li>伪装学渣</li> <li>快穿之打脸狂魔</li> </ul>
- 有序列表：
- 和无序列表类似，只是使用了<ol>标签来代替了<ul>剩下的全一样
- 有序列表使用有序序号作为项目符号
- type属性可以指定序号的类型
- 可选值：
- 1，默认值，使用阿拉伯字母
- a/A 采用小写或大写的字母来作为序号
- i/I 采用小写或大写的罗马字作为序号
- <ol>也是块元素
-
<ol type="i"> <li>宿溪</li> <li>花怜</li> <li>醉炀</li> <li>朝俞</li> <li>玄晟</li> </ol>
-
<!--列表之间都是可以相互嵌套的：--> <p>我喜欢的书：</p> <ul> <li>星际大巫</li> <ol> <li>段小溪</li> <li>戚宿</li> </ol> <li>AWM绝地求生</li> <ul> <li>祁醉</li> <li>于炀</li> </ul> <li>伪装学渣</li> </ul>
- 定义列表：
- 用来定义对一些内容或词汇
- 使用<dl>来创建一个定义列表
- <dl>中有两个子标签
- <dt>：被定义的内容
- <dd>：对定义内容的描述
- 同样，<ol>，<ul>，<dl>可以相互嵌套使用
-
<dl> <dt>祁醉</dt> <dd>电竞之光，神之右手</dd> <dd>老流氓不做人</dd> <dt>于炀</dt> <dd>帝国狼犬</dd> </dl>
3、长度单位
- 百分比：%
- 可以将单位色湖之成百分比的形式，浏览器会按照其父元素的样式来计算该值
- 使用百分比，当父元素的属性值发生变化时，子元素的属性值也会按照比例跟着变
- 在我们创建一个自适应的页面时，经常使用百分比作为单位
- em
- 和百分比类似，它是相对于当前元素的字体大小来计算的
- 1em = 1 font-size
- 如下代码，1em=100font-size，
- 这是当前的字体大小，如果此时em为10，则表示有10个100的font-size
- em会跟着font-size变化而变化
- 当设置字体相关的样式时，经常会使用em
- 像素：px
- 像素是网页中使用的最多的一个单位，一个像素就相当于一个屏幕里的小点
- 不同的显示器，像素的大小不相同，显示效果越好越清晰，像素越小
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:red;
}
.box1{
font-size:100px;
width:1em;
height:50%;
background-color:yellow;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>4、RGB颜色值
- 颜色单位：
- 在我们css中，可以直接使用颜色的单词来表示不同的颜色
- 也可以使用RGB值来表示不同的颜色
- 所谓的RGB值指的是通过Red、Green、Blue三原色（这是光的三原色）
- 通过这三种颜色的浓度来表示出不同的颜色
- 语法：rgb（红色的浓度，绿色的浓度，蓝色的浓度）;
- 颜色的浓度需要一个0~255之间的值，255表示最大，0表示没有
- 浓度也可以采用百分数来设置，0%~100%，
- 使用百分数也会直接转换为0~255之间的值
- 也可以使用十六进制的RGB值来表示颜色，原理和上面的0~255一样
- 但是是使用十六进制数字来代替，使用三组两位的十六进制数组来表示一个颜色
- 第一组：红色 00~ff
- 第二组：绿色 00~ff
- 第三组：蓝色 00~ff
- 语法：#红色绿色蓝色
- 十六进制：
- 0 12 3 4 5 6 7 8 9 A B C D E F
- 00~FF表示浓度（00最小，FF最大）
- 红色：#ff0000
- 像这种两位两位重复的颜色，可以简写
- 比如：ff0000 = f00
- 在我们css中，可以直接使用颜色的单词来表示不同的颜色
<style type="text/css">
.box1{
width:100px;
height:100px;
background-color:#0ff;
}
</style>
<body>
<div class="box1"></div>
</body>5、字体
- color：设置字体颜色
- color:red;
- size：设置字体大小
- 浏览器中一般默认的文字大小都是16px
- font-size设置的并不是文字本身的大小，
- 在页面中每个文字都是处在一个看不见的框中
- 我们设置的font-size实际上是设置框格的高度，并不是字体大小
- 一般情况下文字都要比这个格要小一些，但有时也会比它大
- 根据字体的不同，显示效果也不同
- font-size:30px;
- font-family：指定文字的字体
- 当采用某种字体时，如果浏览器支持则使用该字体
- 如果浏览器不支持，则显示默认字体
- 该样式可以同时指定多个字体，多个字体使用，号分开
- 当采用多个字体时，浏览器会优先使用前边的字体，
- 如果前边的无法采用就往下接着采用
- 实在不行就返回默认字体
- font-family:华文彩云，微软雅黑，华文隶书;
- 浏览器使用的字体默认就是计算机中的字体，如果计算机中有，则使用，如果没有就不用
- 在开发中，如果字体太奇怪用的少，尽量不要使用
- 如果中间有空格的，要用""链接起来，表示他们是一个整体
- 如：font-family:"maric mt";
- 字体的分类：
- p{font-family:arial,微软雅黑,华文彩云,serif;}
-
<style type="text/css"> /*字体的样式*/ .p2{ color:red; font-size:30px; font-family:serif; } </style>
- font-style：可以用来设置文字的斜体
- 可选值：
- normal：默认值，文字正常显示
- italic：文字以斜体显示
- oblique：文字以倾斜的效果显示
- 大部分浏览器都不会对倾斜和斜体做区分，所以italic和oblique的效果相差不大，所以一般不使用oblique
- font-style:italic;
- 可选值：
- font-weight：可以用来设置文本的加粗效果
- 可选值：
- normal：默认值，文字正常显示
- bold：文字加粗显示
- 该样式也可以指定100~900之间的9个值
- 但是由于用户的计算机中往往没有这么多级别的字体，所以往往不能达到我们想要的效果，可能这9个级别之间的差别微乎其微
- font-weight:bold;
- 可选值：
- font-variant：可以设置小型大写字母
- 可选值：
- normal：默认值，文本正常显示
- small-caps：文本以小型大写字母显示
- 小型大写字母：将所有的字母都以大写的形式显示
- 但是小写字母的大写，要比大写字母的大写小一些
- font-variant:small-caps;
- 可选值：
- font 样式：
- 在css样式中，还为我们提供了一个样式叫 font
- 使用该样式可以同时设置字体相关的所有样式
- 可以将字体的样式的值统一写在font样式中
- 不同的值之间使用空格隔开
- 使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求
- 甚至可写可不写，如果不写，则使用默认值
- 但是要求文字的大小和字体必须写
- 而且字体必须是最后一个样式
- 大小必须是倒数第二个样式
- 实际上使用简写属性，性能会比较好
- .p3{font:italic small-caps bold 60px "华文彩云";}
- 在css样式中，还为我们提供了一个样式叫 font
- line-height：字体的行高
- 在CSS样式中，并没有为我们提供一个直接设置行间距的方式
- 我们只能通过设置行高来设置行间距，行高越大行间距越大
- 使用line-height来设置行高
- 行高类似于单线作业本，显示一行一行的
- 线与线之间的距离就是行高
- 网页中的文字实际上也是写在一个单线本上的
- 文字会默认在行高中垂直居中显示
- 行间距= 行高 - 字体大小
- 比如：font-size：20px； line-height：40px，行间距=20px
- 我们只能通过设置行高来设置行间距，行高越大行间距越大
- 通过设置line-height可以间接的调整行高
- 可以接收的值：
- 直接接收一个大小
- 指定一个百分数，则会相对于字体去计算行高
- 可以直接传一个数值，则行高会设置字体大小相应的倍数
- 可以接收的值：
-
<style> .p4{ font-size:20px; /*line-height:200%;*/ line-height:4; } .box{ width:200px; height:200px; background-color:#bfa; /*对于单行文本，可以将我们的行高设置为和父元素的高度一致 这样可以使单行文本在父元素中居中*/ line-height:200px; } .p6{ /*在font中也可以指定行高 在字体大小后面可以添加/行高， 该值可选的，如果不指定则使用默认值*/ line-height:200px; /*由于执行顺序的问题，上面的行高会被下面font里面的行高覆盖掉 虽然没有设置，但是有默认值覆盖了原本的行高 所以注意执行顺序问题*/ font: 30px "华文彩云"; } </style> <body> <p class="p1">我是一个p标签</p> </body>
- 在CSS样式中，并没有为我们提供一个直接设置行间距的方式
- 字体的分类：
- 在网页中将字体分为了5大类
- 1、serif：衬线字体 -- 带勾的
- 2、sans-serif：非衬线字体 -- 横平竖直
- 3、monospace：等宽字体 -- 程序员经常使用，美观简洁
- 4、cursive：草书字体
- 5、fantasy：虚幻字体
- 可以将字体设置为这些大的分类，当设置为大的分类以后
- 浏览器会自动选择指定的字体并应用样式
- 不同浏览器对其理解不同，所以显示出来的兄啊过也不同
- 一般将字体的大分类，指定为font-family中的最后一个字体
- 在网页中将字体分为了5大类
<body>
<p style="font-size:50px; font-family:serif;">
衬线字体:当我看见了，仿若置身于一片星辰qwerqter
</p>
<p style="font-size:50px; font-family:sans-serif;">
非衬线字体:当我看见了，仿若置身于一片星辰dgryrt
</p>
<p style="font-size:50px; font-family:monospace;">
等宽字体字体:当我看见了，仿若置身于一片星辰ertdsfg
</p>
<p style="font-size:50px; font-family:cursive;">
草书字体:当我看见了，仿若置身于一片星辰dfgdsr
</p>
<p style="font-size:50px; font-family:、fantasy;">
虚幻字体:当我看见了，仿若置身于一片星辰rtsdfgsdf
</p>
<!--字体的样式：-->
<p class="p2">你是我的可遇不可求Drunk&Youth;</p>
<p class="p3">令我感动的从来不是游戏本身，而是打游戏的那一群少年;</p>
<!--字体行高 -->
<p class="p4">
地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;
地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;
</p>
<div class="box">
<a href="#">这是一个超链接</a>
</div>
<p class="p6">
地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;
地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;地狱空荡荡，祁醉在人间;
</p>
</body>6、文本样式
- text-decoration可以用来设置文本的修饰：
- 可选值：
- none 默认，定义标准的文本。
- underline 下划线
- overline 上划线
- line-through 删除线
- .p2{text-decoration:underline;}
- a{text-decoration:none;}
- 超链接本身就默认添加下划线
- 超链接的 text-decoration 的默认值为 underline
- 如果需要去除超链接的下划线，需要将text-decoration设置为none
- 可选值：
- letter-spacing：可以指定字符的间距（中英文都可以）
- letter-spacing:10px;
- word-spacing：可以设置单词之间的距离
- 实际上就是设置词与词之间空格的大小
- word-spacing:10px;
- text-align：用于设置文本的额对齐方式
- 可选值：
- left 默认值，文本靠左对齐
- right 文本右对齐
- center 文本居中
- justify 两端对齐，它是通过调整文本之间空格的大小来达到效果
- 可选值：
- text-indent：用来设置首行缩进
- 当给他一个正值时，会自动向右侧缩进指定的像素
- 但是用像素的话就固定了，有时候需要调整字体大小，所以缩进应该随着字体大小变化而变化
- 这个时候就经常用em作为单位了
- 当给他一个负值时，则会向左移动
- 通过这种方式，将不想显示的文字藏起来
- 希望用户看不见，但是搜索引擎可以看见
- text-indent:-2em;
- 当给他一个正值时，会自动向右侧缩进指定的像素
- text-transform：可以用来设置文本的大小写
- 可选值：
- none 默认值，不做任何处理
- capitalize 单词的首字母大写，通过单词的边界（空格）来识别单词
- uppercase 所有的字母都大写
- lowercase 所有的字母都小写
- text-transform:none;
- 可选值：
<body>
<p class="p1">
If I had not met the light, I would have fallen into darkness forever
</p>
<a href="#">超链接</a>
<p class="p2">
If I had not met the light, I would have fallen into darkness forever
</p>
<p class="p3">
如果我未曾见过光明，我将永远沉沦于黑暗。
If I had not met the light, I would have fallen into darkness forever
</p>
<p class="p4">
如果我未曾见过光明，我将永远沉沦于黑暗。
If I had not met the light, I would have fallen into darkness forever
</p>
<p class="p5">
如果我未曾见过光明，我将永远沉沦于黑暗。
If I had not met the light, I would have fallen into darkness forever
</p>
</body>
7696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
