前端 CSS基础理论总结(三)

有序列表

  • 使用ol和li来创建一个有序列表
<ol>
	<li>列表项1</li>    1.列表项1
	<li>列表项2</li>    2.列表项2
	<li>列表项3</li>    3.列表项3
</ol>

无序列表

  • 使用ul和li来创建一个无序列表。

 - <ul> 	
  	<li>列表项1</li>    ●列表项1 	
  	<li>列表项2</li>    ●列表项2 	
  	<li>列表项3</li>    ●列表项3

定义列表

  • 使用dl、dd、dt来创建一个定义列表
<dl>
	<dt>定义项1</dt>     定义项1
	<dd>定义描述1</dd>       定义描述1
	<dt>定义项2</dt>     定义项2
	<dd>定义描述2</dd>       定义描述2
	<dt>定义项3</dt>     定义项3
	<dd>定义描述3</dd>       定义描述3

单位

  • px
    • 如果我们将一个图片放大的话,我们会发现一个图片是有一个一个的小色块构成的,这一个小色块就是一个像素,也就是1px,对于不同的显示器来说一个像素的大小是不同的
  • 百分百
    • 也可以使用一个百分数来表示一个大小,百分比是相对于父元素来说的,如果父元素使用的大小是16px,则100%就是16px,200%就是32px
  • em
    • em和百分比类似,是相对于font-size说的
      • 1em=1font-size

颜色

  • 在CSS中可以直接使用颜色的关键字来代表一种颜色
  • 17中颜色:aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,orange,purple,red,silver,teal,white,yellow
  • 还有147种svg颜色,这里就不一一列举了,但是明显即使这些颜色编程double,也不足以描绘我们世界中所有颜色

十六进制颜色

  • 用的最多的颜色是十六进制符号。一个颜色值,比如:#6600ff实际上包含了三组十六进制的数字
  • 上边的例子种66代表红色的浓度,00代表绿色的浓度,ff代表了蓝色的浓度。最后的颜色是由这些指定浓度的红绿蓝混合而成的。
  • 如果每一组数种的两个数字都相同,就可以把十六进制的数字缩短为只有3个字符,如将#6600ff缩短为#60f

RGB值

  • 也可以使用计算机种常用的RGB值来表示颜色。可以使用0-255的数值,也可以使用0%-100%的百分比数。
    • RGB(100%,0%,0%)
    • RGB(0,255,0)
  • 第一个数表示红色的浓度,第二个数表示绿色浓度,第三个数表示蓝色的浓度

RGBA

  • RGBA表示一个颜色和RGB类似,只不过比RGB多了一个A(alpha)来表示透明度,透明度需要一个0-1的值。0表示完全透明,1表示完全不透明。
    • RGBA(255,100,5,0.5)

文字大小

  • font-size用来指定文字的大小

字体(一)

  • 通过font-family可以指定标签种文字使用的字体。
  • 例如:
    p{font-family:Arial}
    上边这行代码指定了p标签种使用名为arial作为字体
  • 一般来说只有用户计算机种安装了我们指定了字体时,它才会显示,否则这行代码是没有意义的

字体(二)

  • 通过font-family可以同时指定多个字体
  • 例如:
    p{font-family:Arial,Helvetica,sans-serif}
  • 如上实际上指定了三种字体,那么到底使用的是哪个呢?浏览器会优先使用第一个,如果没有找到则使用第二个,以此类推
  • 这里面sans-serif并不是指的具体某个字体。而是一类字体

字体分类

  • 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-variant:small-caps

字体属性的简写

  • font可以一次性同时设置多个字体的样式
  • 语法:font:加粗 斜体 小型大写 大小/行高 字体
  • 这里前边几个加粗、斜体和小型大写的顺序无所谓,也可以不写,但是大小和字体必须写且必须写到后两个

行间距

  • line-height 用于设置行高,行高越大则行间距越大
  • 行间距:line-height -(减法)font-size

大写化

  • text-transform样式用于将元素中的字母全都变成大写
    • 大写:text-transform:uppercase
    • 小写:text-transform:lowercase
    • 首字母大写:text-transform:capitalize
    • 正常:text-transform:none

文本的修饰

  • text-decoration属性,用来给文本添加各种修饰,通过它可以为文本的上方、下方或者种键添加线条
  • 可选值:
    • underline
    • overline
    • line-through
    • none

字母间距和单词间距

  • letter-spacing用来设置字符之间的间距
  • word-spacing用来设置单词之间的间距
  • 这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离,而负数代表减少距离

对齐文本

  • text-align用于设置文本的对齐方式
  • 可选值:
    • left:左对齐
    • right:右对齐
    • justify:两边对齐
    • center:居中对齐

首行缩进

  • text-indent用来设置首行缩进
  • 该样式需要指定一个长度,并且只对第一行生效

猜你喜欢

转载自blog.csdn.net/cc576795555/article/details/85238208