2019-12-12 前端第四天!!

颜色浓度:0-255,%0-%100

红黄蓝简称:red green blue rgb

十六进制 00-ff

字体大小:font-size用来指定文字大小

通过font-family可以指定标签中文字使用 的字体,通过font-family可以同时指定多个字体。

字体分类:serif(衬线字体)

sans-serif(非衬线字体)

monospace(等宽字体)

cursive(草书字体)

fantasy(虚幻字体)

font-style用来指定文本的斜体。

–指定斜体:font-style:italic

–指定非斜体:font-style:normal

font-weight用来指定文本的粗体。

–指定粗体:font-weight:bold

–指定非粗体:font-weight:normal

小型大写字母:font-variant属性可以将字母类型设置为小 型大写。在该样式中,字母看起来像是稍微缩小了尺寸的大写字母。

字体属性的简写:font可以一次性同时设置多个字体的样式。

语法:

– font:加粗 斜体 小型大写 大小/行高 字体

这里前边几个加粗、斜体和小型大写的顺

序无所谓,也可以不写,但是大小和字体 必须写且必须写到后两个。

行间距:line-height用于设置行高,行高越大则行 间距越大。

行间距 = line-height – font-size

大写化:–大写:text-transform:uppercase

–小写:text-tansform:lowercase

–首字母大写:text-transform:capitalize

–正常:text-transform:none

文本修饰:underline 上划线

overline 下划线

line-through 中划线

none 默认,没线 原始网页

字母间距和单词间距:

letter-spacing用来设置字符之间的间距

word-spacing用来设置单词之间的间距

对齐文本:

text-align用于设置文本的对齐方式。

可选值:

–left:左对齐

–right:右对齐

–justify:两边对齐

–center:居中对齐

首行缩进:

text-indent用来设置首行缩进。

该样式需要指定一个长度,并且只对第一 行生效。

盒子模型:

一个盒子我们会分成几个部分:

–内容区(content)

–内边距(padding)

–边框(border)

–外边距(margin)

盒子的大小由内容区、内边距、边框决定。

内容区:

内容区指的是盒子中放置内容的区域,也就是元素

中的文本内容,子元素都是存在于内容区中的。

如果没有为元素设置内边距和边框,则内容区大小

默认和盒子大小是一致的。

通过width和height两个属性可以设置内容区的大 小。

width和height属性只适用于块元素。

内边距:

内边距指的就是元素内容区与边框以内的空间。

默认情况下width和height不包含padding的大小。

使用padding属性来设置元素的内边距。

边框:

可以在元素周围创建边框,边框是元素可见框的最外部。

可以使用border属性来设置盒子的边框:

–border:1pxred solid;

–上边的样式分别指定了边框的宽度、颜色和样式。

也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。

和padding一样,默认width和height并包括边框的宽度。

边框的样式:

边框可以设置多种样式:

–none(没有边框)

–dotted(点线)

–dashed(虚线)

–solid(实线)

–double(双线)

–groove(槽线)

–ridge(脊线)

–inset(凹边)

–outset(凸边)

外边距:

外边距是元素边框与周围元素相距的空间。

使用margin属性可以设置外边距。

用法和padding类似,同样也提供了四个方向的  margin-top/right/bottom/left。

当将左右外边距设置为auto时,浏览器会将左右外

边距设置为相等,所以这行代码margin:0 auto可

以使元素居中。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天学习的知识点: 1、/*设置字体颜色,使用color来设置文字的颜色*/ color: red; /*设置文...
    您的名称已被使用阅读 193评论 0 0
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,104评论 0 1
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,067评论 1 4
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,119评论 0 0
  • CSS 指层叠样式表(Cascading Style Sheets),是一种用来为结构化文档(如 HTML 文档或...
    神齐阅读 2,148评论 0 14