颜色 字体 行距 文本修饰 文本对齐 (盒子))

颜色的调配:

Red green Blue rgd(r,g,b) ; 0-255 0%-100%

十六进制00-ff 等于没有

ff0000   等于红色

f00     等于红色(简写)

三个值最大的就是白色

都是零是黑色


字体:

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:small-caps   设置小型大写字母

font:bold italic small-caps 60px "微软雅黑"

(可以把所有的字体型号写在一起,用空格隔开,   但是字号和字体必须写,字体和字号必须写在后边,最后一个是字体倒数第二个是字号,)(没有就是默认值)

行间距

line-height      用来设置行高,高度越大间距越大

行间距 = line-height   -  font-size   (行间距  =  行高  -  字号)

line-height: 2;

font - size: 20px;

垂直居中= 行高  =  盒子高度



文本的修饰:

text-decoration:可选值

underline  下划线

overline     上滑线

line-through   删除线(中间线)

none         没有(可以去掉下划线)


字母和单词的间距

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

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


对齐文本:

text-align:  设置对齐方式

left   左对齐

right   右对齐

justify  两边对齐

center    居中对齐


行首缩进:

text-indent  用来设置首航缩进(只用于第一行)

font-size: 40px

text-indent: 2em(缩进的格式   用em作为单位)

text-indent: -111px(负的就是把文件隐藏)

(em和字体大小相同,所以用em作为单位)


                                         盒子

盒子模型(一个盒子我们分为几个部分):

内容区(content)

内边距(padding)

边框(border)

外边框(margin)

盒子的大小有内容区,内边框,边框组成:

width     height  只是内容区的宽和高

border-width: 10px 20px 30px 40px

设置盒子间距  (顺时针执行)(3个是上,左右,下)(2个是上下,左右)

border-color:加上颜色(顺时针执行)(3个是上,左右,下)(2个是上下,左右)

border-style: solid dotted dashed double;

(上面:实线,点线,虚线,双线)

边框的样式:

none   (没有边框)

dotted   (点线)

dashed    (虚线)

solid     (实线)

double     (双线)

groove     (槽线)

ridge       (脊线)

inset      (凹线)

outset      (凸线)


内边距:

内边距就是内容区和边框之间的距离

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

使用padding来设置元素的内边框

例子:

padding:10px 20px 30px 40px  (这样的设置元素会从上,右,下,左  顺时针执行)

在CSS中还提供了padding-top   padding-riht   padding-right

padding-bottom分别用来指定四个方向的内边距

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

推荐阅读更多精彩内容