零基础第一章-Web前端零基础入门

零基础第一章-Web前端零基础入门 扫二维码继续学习

vip

该课程为限制课程
请联系客服

`word-break: break-word`:词内换行。

`word-break: break-all`:词内换行,回车键断行的内容也在一行显示

从上到下量字体大小。一个字体大小就是「1em」,通常,一个空格是一个字体大小的一半(`0.5em`)。

[展开全文]

border 属性语法:

border: borderWidth borderStyle borderColor

borderWidth:边框粗细。

borderStyle:边框样式,实线(solid)、虚线(dashed)和点划线(dotted,不同浏览器显示不一样)。

borderColor:边框颜色。

[展开全文]

3. 外部样式

独立于 HTML 之外的一个 `.css` 文件,该文件样式可以被多个 HTML 页面共用。

 

HTML、CSS 和 JavaScript 对应:结构、样式和行为。

 

[展开全文]

1. HTML:超文本标记语言(HyperText Markup Language)。

标记就是「标签」。

超文本就是不只能显示文本。

2. HTML 不区分大小写。

[展开全文]

Box Model (盒模型)

Box = Width + Padding + Border

[展开全文]
  1. 子元素上下的Margin会渗透给父元素。解决方法:为父元素加入边框作为屏障。
  2. 子元素之间上下的Margin会重叠。解决办法:只设置一个方向的Margin。
  3. 居中。解决方法:auto值。
[展开全文]

Margin (边缘距离)

margin: [Top] [Right] [Bottom] [Left]
margin: [Top] [Left and Right] [Bottom]
margin: [Top and Bottom] [Left and Right]
margin: [All Margin]
[展开全文]

Padding (内填充)

padding: [Top] [Right] [Bottom] [Left];
padding: [Top] [Right and Left] [Bottom];
padding: [Top and Bottom] [Right and Left];
padding: [All Padding];
[展开全文]

Text (文本)

color: [Value];

[Value]

  • [Color Name]
  • [RGBA]
  • [Color Hex]
text-align: [Value];

[Value]

  • center
  • left
  • right
  • justify
text-indent: [Value];

[Value]

  • [Absolute Indent]
    • [px]
  • [Relative Indent]
    • [em]
text-decoration: [Value];

[Value]

  • none
  • overline
  • line-through
  • underline
text-shadow: [Position X] [Position Y] [Color];

 

text-transform: [Value];

[Value]

  • uppercase
  • lowercase
  • capitalize
direction: [Value];

[Value]

  • rtl​
letter-spacing: [Value];

[Value]

  • [Absolute Height] (+/-)
    • [px]
    • [pt]
    • [cm]
  • [Relative Height] (+/-)
    • [%]
    • [em]
word-spacing: [Value];

[Value]

  • [Absolute Height] (+/-)
    • [px]
    • [pt]
    • [cm]
  • [Relative Height] (+/-)
    • [%]
    • [em]
white-space: [Value];

[Value]

  • normal
  • nowrap
word-break: [Value];

[Value]

  • normal
  • break-word
  • break-all
line-height: [Value];

[Value]

  • normal
  • [number] (1.2 Default)
  • [Absolute Height]
    • [px]
    • [pt]
    • [cm]
  • [Relative Height]
    • [%]
    • [em]
  • initial
  • inherit
[展开全文]

Font Property (字体属性)

font: [Font Style] [Font Variant] [Font Weight] [Font Size]/[Line Height] [Font Family];

Proper order is required when set Font property in shorthand format. Font Size/Line Height, Font Family are required.

当使用缩略形式设置Font属性时,需要有恰当的顺序。字体大小/行高,字体类型是必须的属性。

[Font Style]

  • normal
  • italic
  • oblique

[Font Variant]

  • normal
  • small-caps

[Font Weight]

  • normal
  • bold

[Font Size]

  • [Absolute Size]
    • [px]
    • [pt]
    • [cm]
  • [Relative Size]
    • [%]
    • [em]

[Line Height]

  • normal
  • [number] (1.2 Default)
  • [Absolute Height]
    • [px]
    • [pt]
    • [cm]
  • [Relative Height]
    • [%]
    • [em]

[Font Family]

  • [Font Family] [Generic Family]

"Times New Roman", Times, serif

当字体名称中有空格时,字体名称应该用引号包起来,中间隔逗号。

[展开全文]

Measuring Line Height (测量行高)

  1. Font Size 文字大小 (FS)
  2. Height Between Two Line 两行文字间距离 (H2 = H * 2 = H + [ H + 1 ] )
  3. Div Height = FS + H2  容器高
  4. Line Height = Div Height 行高
[展开全文]

Line Height Property (行高属性)

line-height: [Value];

[Value]

  • normal
  • [number] (1.2 Default)
  • [Absolute Height]
    • [px]
    • [pt]
    • [cm]
  • [Relative Height]
    • [%]
    • [em]
  • initial
  • inherit
垂直居中: 行高=容器高
[展开全文]

Background Property(背景属性)

background: [Color] [Image] [Repeat] [Attachment] [Position];

[Color]

  • [Color Name]
  • rgba([Red], [Green], [Blue], [Alpha])
  • #[Color Hex]

[Image]

  • url("[URL]")
  • none

[Repeat]

  • no-repeat
  • repeat-x
  • repeat-y
  • repeat

[Attachment]

  • scroll
  • fixed

[Position]

  • [X]
    • [Coordinate X]
    • [Position Keyword]
      • center
      • left
      • right
  • [Y]
    • [Coordinate Y]
    • [Position Keyword]
      • center
      • top
      • bottom

Background Color Property(背景颜色属性)

background-color: [Value];

[Value]

  • [Color Name]
  • rgba([Red], [Green], [Blue], [Alpha])
  • #[Color Hex]
[展开全文]

Background Image Attachment Property (背景图片滚动属性)

background-attachment:[Value];

[Value]

  • scroll
  • fixed
[展开全文]

Background Image Position Property (背景图片位置属性) 

background-position: [Value];

[Value]

  • [X]
    • [Coordinate X]
    • [Position Keyword]
      • center
      • left
      • right
  • [Y]
    • [Coordinate Y]
    • [Position Keyword]
      • center
      • top
      • bottom
[展开全文]

Background Image Property (背景图片属性) 

background-image: [Value];

[Value]

  • url("[URL]")
  • none 

Background Image Repeat Property (背景图片重复属性) 

background-repeat: [Value];

[Value]

  • no-repeat
  • repeat-x
  • repeat-y
  • repeat
[展开全文]

Shorthand Property (缩略属性)

border: [Width] [Style] [Color];

[Width]

[Style]

  • solid
  • dashed
  • dotted
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

[Color]

  • name (red)
  • HEX (#ff0000)
  • RGB (rgb(255, 0, 0))
    • transparent
[展开全文]

Semi-Complexed Property (半复合属性)

border-[Property]: [Top] [Right] [Bottom] [Left];

[Property]

  • width
  • style
  • color
  • radius

[Top] 

[Right]

[Bottom] 

[Left]

[展开全文]

Individual Property (独立属性)

border-[Location]-[Property]: [Value];

[Location]

  • top
  • right
  • bottom
  • left
  • top-left
  • top-right
  • bottom-left
  • bottom-right

[Property]

  • width
  • style
  • color
  • radius

[Value]

[展开全文]

授课教师

海棠学院金牌讲师-陈学辉

学员动态

catlee 开始学习课时 26-margin的问题
catlee 开始学习课时 25-margin外边距
catlee 开始学习课时 21-文本
catlee 开始学习课时 19-行高