CSS （常用样式） 笔记05

一.字体相关

1.color:设置字体颜色

2.font复合属性:

①font-size 设置字体大小

②font-weight 设置字体粗细

③font-style 设置字体风格 e.g italic斜体 normal正常

3.文本：

①text-decoration 设置文本下划线（通常使用none值来消除超链接a的下划线）

②text-align 规定文本水平对齐方式（left向左，center居中，right靠右）

③line-height 设置行距

二. 背景相关

1.background复合属性

①background-color 设置颜色

②background-image: url("路径")设置背景为图片

（图片: object-fit:cover ;控制图片不变形）

【注：如果同时设置背景颜色和背景图片，背景图片会覆盖背景颜色】

③background-repeat 设置图片平铺 repeat平铺 no-repeat不平铺  repeat-x 只横向平铺  repeat-y纵向平铺

④background-size 控制背景图片大小 cover 表示铺满

⑤background-position 设置图片位置  e.g center居中

⑥background-attachment: fixed 设置图片内容不随滑动而变动

div{
    width:500px;
    height:1000px;
    font-weight:100px;
    font-style:italic;
    text-decoration: none;  
     /* 下划线无 */
    text-align: left;
    line-height: normal;  
    background-attachment: fixed; 
    /* 图片背景固定 */
    background-image:url(002.jpg) ;
    /* 导入图片背景 */
    background-size: cover;
    object-fit:cover;
   /* 全铺 */
    cursor: pointer;
   /* 防止图片变形 */
}

三.  颜色相关

1.用颜色名表示 ：e.g red,blue,green;(表示范围小)

2.#+六位十六进制的数据表示颜色： #000000~#ffffff (两位一体分别表示红绿蓝三原色)

（即：每个颜色取值范围为：0~255）

【注：当表示#aabbcc等两位一体相同时，可简写为#abc】

3.rgb(red,green,blue)  取值范围为 ：0~255  e.g rgb(20,40,50)

{特殊使用：【ctrl】+【alt】+【a】进入提取色块，按【c】提取色块}

4.rgba(red,green,blue,alpha)   alpha取值范围0~1，表示透明度（单代表颜色的透明度）

5.opacity 透明度 取值范围0~1 （表示背景的透明度，包括字体等）

6.background: linear-gradient(方向，颜色，颜色) 背景渐变

【注：background: linear-gradient(方向，颜色，颜色,transparent) 表示逐渐融入环境】

四. 其他样式

1. 列表 

li{
    list-style: none;
    /* 去除列表格式 */
}

2.border边框

 border-radius: 0 px; /* 取0无圆角 */
/* 指定边跨圆角的半径,半径越大,圆角程度越大 */

[注:以左上角开始顺时针旋转,可以结合上下左右单独对某一个角使用,e.g border-top-left-radius]

3. 阴影

①盒子阴影

boxshadow: 0px 0px 0px #000000; 
/* (水平位置,垂直位置,模糊度,阴影颜色) */

②文字阴影:text-shadow（类同盒子阴影）

③鼠标样式

div{
 cursor:pointer；
/* 箭头变小手 */ 
}