0基础学习网页结构编程

目录

一、长度单位

二、颜色单位

三、字体样式

四、字体的分类

五、其他的字体样式

六、行间距 

七、文本相关样式

---

一、长度单位

1：像素 px
就是电脑屏幕上的一个个发光的小点，我们眼睛是看不出来，像是是我们pc端最常用的一个单位，它是一个固定单位

2、百分比%
是父元素宽高的百分比，是一个相对单位，一般情况下，做流式布局比较多

3、em
也是一个相对单位，相对于当前元素的字体大小来计算最终大小，
也就是1em=1个font-size。如果当前的元素没有设置字体大小，
那么会继承到html默认的字体大小，是16px

4、rem
也是一个相对单位，相对于根标签html的字体大小来计算最终大小，
也就是1个rem=1个html的font-size

二、颜色单位

1、在css可以直接使用颜色的单词来表示不同的颜色
red，green，yellow，blank等
缺点:颜色单词太多了，不好描述

2、使用RGB值来表示不同的颜色
rgb（红色，绿色，蓝色）
颜色的值0-255
直接用电脑或者插件可以直接吸取颜色的比值，

3、RGBA
rgba（红色，绿色，蓝色，alpha）
alpha：透明度数值(0~1) 0是透明，1是不透明

4、使用十六进制的rgb来表示颜色，原理和rgb一样
语法：#ff0000

5、HSL、HSLA
（H-色相  0-360，s-饱和度  0-100%， L-亮度 0-100%）

三、字体样式

1、color  设置字体颜色
2、font-size  设置字体大小
3、font-family 指定文字的字体
4、@font-face{
font-family：'  '；起的名字
src：url（）；    引入的路径
}
注意：要写在文字标签外面

四、字体的分类

在网页中将字体分成5大类:

serif   [ 'serif](衬线字体)
sans-terif (非衬线字体)
monospace(等宽字体）
ocursive  ['ka:siv]草书字体)
fantasy  [ ' fantes ]站(虚幻字体)
可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式.
一般会将字体的大分类，指定为font-family中的最后一个字体,用来兜底

五、其他的字体样式

1、设置文字斜体   font-style： ；
可选值：
normal  文字正常显示（默认值）
italic    文字倾斜  （比较常用）
oblique  文字倾斜

2、设置文字的加粗   font-weight： ；
可选值：
normal    默认值  文字正常显示
bold        文字加粗
bolder     文字加粗
100-900  之间的数字

3、设置小型大写字母 font-variant：；
可选值：
small-caps  

font简写（font：；）
可以统一设置文字相关的一些样式
注意：
①必须要有字体大小和文字字体
②字体大小必须在倒数第二位
字体必须要在倒数第一位

六、行间距 

1、行高（line-height）  文字占有的实际高度
行高=上间距+文字高度+下间距
如果要设置行与行之间的距离，可以通过设置行高来实现
line-height样式名
可选值：
（1）可以直接写大小，如px，em，rem，%
（2）可以写倍数，1，2，3.....  ，是当前字体大小的倍数
（3）可以写百分比，100%，200%.....

2、单行文本！！在父元素中垂直居中
只需要设置行高和父元素高度一致即可实现

3、font中也可以指定行高
font：30px/行高值  字体类型；

七、文本相关样式

1、text-transform   可以用来设置文本的大小写
可选值：
none  正常显示，默认值
uppercase  字母大写
lowercase   字母小写
capitalize  单词首字母大写

2、text-decoration  可以用来设置文本的修饰
可选值：
none  正常显示，默认值
underline   添加下划线
overline     添加上划线
line-through    文本删除线

3、 letter-spacing    可以指定字符间距

4:、word-spacing   可以设置单词之间的距离

5、text-align      用于设置文本的对齐方式
可选值：
left        文本左对齐，默认值  
right     文本右对齐   
center   文本居中对齐
注意：设置文本的对齐方式，必须要给文本一定的空间，如果是行内元素的话，它的大小宽度是被内容撑开的，就无法设置

6、text一indent  设置首行缩进
常用的长度单位：2em

7、设置单行文本省略号的固定写法（顺序随意）
      white-space: ;     设置网页如何处理空白，设置换不换行
      overflow：   设置多余内容裁剪掉

8、text-overflow    文本溢出包含元素时发生的事情，多余的设置成省略号
可选值：ellipsis 省略号

9、text-shadow：..px ..px ..px color；  设置文本阴影
4个参数，参数之间以空格隔开
①阴影的水平位移距离，正值向右，负值想左 （必填）
②阴影的垂直位移距离，正值向下，负值向上   （必填）
③模糊半径  （选填，默认是0px）
④阴影颜色    （选填，默认是字体的颜色）

10、box-shadow    盒阴影
4个参数跟text-shadow一样
唯一不同的是默认阴影颜色是黑色

11、vertical-align   设置元素垂直对齐的方式
作用：
①设置图文的对齐方式
可选值：
baseline    基线对齐  （默认值），以x的最下方为准
top            文本靠上
bottom     文本靠下
middle      居中对齐

②解决图像三像素问题
图片三像素：引入图片后，图片与图片之间会有三像素的空白，正常情况下空白需要去除
处理方法：
方法一  
vertical-align    （除了baseline都能用）

方法二
设置其父元素的font-size为0px   （有局限性，区域里纯图片）

方法三
设置图片为块元素

方法四
使图片脱离文档流，设置它浮动或者绝对定位皆可