标签：parent   logo   小技巧   rgb   view   code   路径   删除线   enter   

一.CSS字体属性

1.字体样式

 p {
    font-family: “字体1",“字体2";
 }

2.字体大小

p {
    font-site: 20px;
}

单位：px（像素）

3.字体粗细

p {
    font-weight: 属性值;
}

属性值：

4.文字样式

font-style: 样式;

样式：

5.复合属性的写法

p {
 /* font：font-style font-weight font-site/line-height font-family；*/

font： italic 700 20px ‘‘宋体；
}

注:
1.使用字体复合属性的时候，顺序不能颠倒。
2.至少要有font-size和font-family

二.文本属性

1.文本颜色

div {
color: 颜色；
}

颜色的三种表现形式

/*预定义颜色值*/
color: red;
/*16进制  最常用*/
color: #FF0000
/*RGB*/
color: rgb(255,255,255)或者rgb(100%,0%,0%）

2.文本对齐

div {
    text-align: 对齐方式；
}

对齐方式：

4.装饰文本

div {
    text-decoration: 装饰方式
}

装饰方式

5.首行缩进

p { 
    text-indenx: 缩进；
}

单位
px 像素
em 相对单位，相对于当前元素（font-size）1字的大小，如果没有设置当前元素没有设置大小，则会按照父元素的1个文字大小。

6.行高

p { 
    line-height: 行高
}

行高 =上间距 + 文本高度 + 下间距

小技巧——让单行文本水平居中对齐

设置行高等于盒子高度

不负代码，不负卿
    

三.背景

通过css背景属性可以设置元素背景颜色，背景图片，背景平铺，背景像素固定等。

1.背景颜色

background-color: 颜色值；
/* 默认为transparent （透明) */

2.背景图片

实际开发中常用于logo或者一些装饰性的小图片或者超大的背景图片。

background-image: url(路径);

3.背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

注意点：
1.默认 : repeat(平铺）
2.可以同时设置背景颜色和背景图片

4.背景位置

background-position: x y;

注释：
x和y分别代表x坐标和y坐标，可以使用方位名词或者精确单位。
方位词（position)

top | center | bottom | left | center | right    

注意点 ：

1.如果左右两个是方位名词，则两个词前后顺序可以颠倒。如：left top 和 top left 效果一样

2.如果只是指定了一样方位词，另一个默认居中对齐。

/*此时X轴是靠右对齐，则Y轴默认居中，反之亦然*/
background-position: right;

精确词

X轴往右边增大，Y轴往下增大

background-position：20px 40px;

注意点 ：

1.精确词第一个是X轴第二个是Y，不能颠倒
2.如果只有一个精确值，那么一定是X轴,则Y轴默认居中
混合单位
混合单位第一个必须是X轴第二是Y轴

5.背景固定（背景附着）

background-attachment: scroll | fixed

注释：
scroll :背景图片随着对象内容滚动
fixed : 背景固定,不会随着页面内容而滚动

6.背景属性复合写法

使用复合写法没有特定的顺序，一般习惯约定顺序为：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

7.背景颜色半透明

background: rgba(0,0,0,0.1);

注释：
最后一个参数是alpha透明的,取值0~1之间。

CSS之常用选择器篇

标签：parent   logo   小技巧   rgb   view   code   路径   删除线   enter   

原文地址：https://www.cnblogs.com/lc-snail/p/13060435.html