慕课网

精品课程初识HTML(5)+CSS(3)

初识HTML(5)+CSS(3)

最热最新

慕粉0011103641

什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

查看全部

0 采集收起来源：我要独占一行 - 块级元素
2021-08-26
慕粉0011103641

长度值
长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
2、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
下面注意一个特殊情况：
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px} span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
3、百分比
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

查看全部

0 采集收起来源：长度值
2021-08-26
慕粉0011103641

如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现，如下面代码：
h1{
letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>
注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
单词间距设置：
如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。如下代码：
h1{
word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>

查看全部

1 采集收起来源：男女授受不亲 - 使用letter/word-spacing增加或减少字符间的空白
2021-08-26
果果橙

CSS代码语法
css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：
选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p{font-size:12px;color:red;}

注意：
1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：
p{
font-size:12px;
color:red;
}

查看全部

0 采集收起来源：瞧瞧css的庐山真面目吧 - CSS代码语法
2021-08-25
果果橙

CSS样式的优势
为什么使用css样式来设置网页的外观样式呢？右边编辑器是一段文字，我们想把“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短语的文本颜色设置为红色，这时就可以通过设置样式来设置，而且只需要编写一条css样式语句。
第一步：把这三个短语用<span></span>括起来。（见右边代码编辑器15行）
第二步：写入下列代码：（见右边代码编辑器8-10行）
span{ color:red; }

查看全部

0 采集收起来源：为什么是css呢? - CSS样式的优势
2021-08-25
果果橙

认识CSS样式
如下列代码：
p{
font-size:12px;
color:red;
font-weight:bold;
}
根据需要，前缀可以改成其他需要的前缀
使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

查看全部

0 采集收起来源：给html打扮一下 - 认识CSS样式
2021-08-25
weixin_慕村9481460

<span>标签，这个标签是没有语义的，它的作用就是为了设置单独的样式用的
语法：
<span>文本</span>

查看全部

0 采集收起来源：diy一个标签吧 - 使用<span>标签自定义文字样式
2021-08-24
weixin_慕村9481460

<a href="#">向报名顾问咨询</a></p>
产生的效果“向报名顾问咨询”的可点击字样
<a> 标签的 href 属性用于指定超链接目标的 URL。
html中的注释快捷键为Ctrl+/

查看全部

0 采集收起来源：解释不等于掩饰- html文件注释
2021-08-24
weixin_慕村9481460

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>了不起的盖茨比</title>
</head>
<body>

<h1>了不起的盖茨比</h1>

<p></p>

</body>
</html>

查看全部

0 采集收起来源：你就是馋人家的身子 - 认识body标签
2021-08-24
weixin_慕村9481460

下面这些标签可用在 head 部分：
1、head标签为双标签，有尾标签，<head></head>。
2、head标签表示头部标签,通常用来嵌套meta、title、style等标签。
3、<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
4、<meta charset="UTF-8">设置当前文件字符编码
5、style标签：双标签中设置当前文件样式
6、<title>标签的内容“hello world”会在浏览器中的标题栏上显示出来

查看全部

0 采集收起来源：小哥,做头么? - 认识head标签
2021-08-24
weixin_慕莱坞6065377

head内的信息不显示用户无法看到

查看全部

0 采集收起来源：听说有新版本了? - html5文档结构
2021-08-24
慕仰2390403

给文本装饰一下 - 使用text-decoration添加文本修饰
技术点的解释：
1、text-decoration可以设置添加到文本的修饰。
2、text-decoration默认值为none, 定义标准的文本。
3、text-decoration的值为underline为定义文本下的一条线。
4、text-decoration的值为overline为定义文本上的一条线。
5、text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。

查看全部

0 采集收起来源：给文本装饰一下 - 使用text-decoration添加文本修饰
2021-08-23
慕仰2390403

长度值
长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
2、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
下面注意一个特殊情况：
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px} span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
3、百分比
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
任务
本小节没有任务，请在右侧代码编辑器中测试一下本小节的两个例子代码。

查看全部

0 采集收起来源：长度值
2021-08-23
慕仰2390403

换个排列方式 - 使用text-align设置文本对齐方式
想为块状元素中的文本、图片设置居中样式吗？可以使用text-align样式代码，如下代码可实现文本居中显示。(那么什么是块状元素呢？在后面的12-1、12-2小节中会讲到。)
h1{ text-align:center; } <h1>了不起的盖茨比</h1>
同样可以设置居左：
h1{ text-align:left; } <h1>了不起的盖茨比</h1>
还可以设置居右：
h1{ text-align:right; } <h1>了不起的盖茨比</h1>

查看全部

0 采集收起来源：换个排列方式 - 使用text-align设置文本对齐方式
2021-08-23
慕仰2390403

男女授受不亲 - 使用letter/word-spacing增加或减少字符间的空白
中文字间隔、字母间隔设置：
如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现，如下面代码：
h1{ letter-spacing:50px; } ... <h1>了不起的盖茨比</h1>
注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
单词间距设置：
如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。如下代码：
h1{ word-spacing:50px; } ... <h1>welcome to imooc!</h1>

查看全部

0 采集收起来源：男女授受不亲 - 使用letter/word-spacing增加或减少字符间的空白
2021-08-23
慕仰2390403

太挤啦,撑开一点 - 使用line-height为文字设置行间间距
这一小节我们来学习一下另一个在段落排版中起重要作用的行间距（行高）属性（line-height），如下代码实现设置段落行间距为1.5倍。
p{line-height:1.5em;} <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

查看全部

0 采集收起来源：太挤啦,撑开一点 - 使用line-height为文字设置行间间距
2021-08-23

首页上一页 195 196 197 198 199 200 201 下一页尾页

0/150

提交

取消

开始学习

课程须知: 没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。

老师告诉你能学到什么？: 本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识，可以利用HTML(5)、CSS(3)样式技术制作出简单页面。