近日学习笔记

一， 文字

文字字体

font-family
简写 ff（谷歌浏览器默认微软雅黑）

文字大小

font-size
简写为fs 需要加单位 我们常用的单位为px（谷歌浏览器默认为16px）

文字粗细

font-weight
简写为fw 我们默认不加粗为normal 加粗为bold
同时我们也可以用数字取代英文 我们的取值为100-900（只能取整百）
这时 我们常用的 不加粗为400 加粗为700 变细为200

文字风格样式

font-style
不倾斜为 font-style：normal
倾斜为font-style:italic

文字颜色

color
颜色的取值可以为以下三种
1 预定义的英文 如 red black等等
2 十六进制 必须用#号 比如#2b333e代表青灰色
3 rgb(颜色值1，颜色值2，颜色值3) ---- ，rgb表示红绿蓝( rgb(red, green, blue))，取值为0-255的数字（黑色（0,0,0），白色rgb(255,255,255))；

行高

line-height
简写lh
1 行高用于设置两行文本之间的距离，也是一行文本的高度；
2 设置行高时 谨记加单位 不加单位设置的大小即是文字的倍数 比如 line-height:30px 30像素行高
如果是 line-height:30则设为文字大小的30倍
3 行高等于盒子高度时 内容垂直居中

文本对齐

text-align
简写ta
取值为left center right
默认为left 当设置文本水平居中 则取值center(同样适用于图片)

文本缩进

text-indent
单位设置可以是px也可以是em(当前设置的文字的大小)我们常用2em

文字线条

texe-decoration
简写为td 取值有无（none） 下划线（underline） 上划线（overline） 删除线（line-through）

综合写法

font: 是否倾斜（font-style）是否加粗（font-weight）文字大小/行高（font-size/line-height）字体（font-family）

二，复合选择器

简介

由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）；

后代选择器

html结构中的嵌套关系 如ul和li的关系
基本语法
选择器1（嵌套选择器2的标签） 选择器2（被选择器1嵌套或存在后代关系{css样式}

子代选择器

只能选择子元素不能选择子元素嵌套的其他元素
基本语法
选择器1（父级选择器）>选择器2（子级选择器）{css样式}

交集选择器

主要用于更加精准的选择元素 以及提升权重的选择权重

相当于即又关系 基本语法
选择器1 选择器2 {css样式}

并集选择器

主要用于同时选择多组标签 设置相同的样式 即集体声明某一些标签的共有样式
基本语法
选择器1，选择器2{css样式}

伪类选择器

所有html标签都可以设置为伪类 ，我们只需要英文的 ：将选择器和伪类状态连接就可以了
基本语法
选择器：伪类状态（css样式）下面介绍几个常见的伪类选择器
1 hover 指的是鼠标移到该标签上的时候显示的图样
2 link 指的是鼠标未访问时显示的模样
3 visited 指的是鼠标点击访问后显示的图样
4 active 指的是鼠标选定的时候显示的图样

小注：如果这四个属性都书写 必须按l-v-h-a的顺序

focus伪类选择器
用于选取表单元素焦点，一般input表单或者文本域textarea才可以获取该焦点

案例如下
 <style>
        input:focus {
            background: springgreen;
        }

        textarea:focus {
            background-color: thistle;
        }
    </style>

    <input type="text">
    <textarea cols="30" rows="10"></textarea>

占位符颜色的更改

这其实也是个伪类 更改占位符的颜色方法如下 必须双冒号

input::placeholder{
color:red
}

三， 背景属性

背景颜色

background-color
简称bgc 用于设置元素的背景颜色

背景图片

background-image
简写bgi
用来设置元素的背景图片 需要配合url（./图片路径）

背景的平铺

background-repeat
简写bgr
我们插入背景图片的默认是平铺的，如果不想平铺 则需要取值 no-repeat 设置背景图不平铺
如果我们想要单独设置水平或者垂直平铺则：

background-repeat:repeat-x;(水平方向平铺)
background-repeat:repeat-y;(垂直方向平铺)

背景位置设置

background-position
简写为bgp 用于设置背景图在元素中的位置 默认在左上角

当取值为方位名词

 /* 左下角 */
 background-position: left bottom;
 /* 左上角 */
 background-position: left top;
 /* 右下角 */
 background-position: right bottom;
 /* 右上角 */
 background-position: right top;

 /* 顶部和底部水平居中  */
 background-position: center top;
 background-position: center bottom;
 /* 左侧和右侧垂直居中 */
 background-position: left center;
 background-position: right center;

 /* 水平垂直居中 */
 background-position: center center;
 /* 简写 */
 background-position: center;

取值为实际像素
取值为两个实际像素 让背景图在我们预定好的位置显示；
如果只取值一个 那么表示这个值表示左右的水平位置，垂直方向的位置默认居中显示；

取值为百分比
取值为百分比时 取值按父级盒子的宽高计算，
如果只取值一个 那么该值表示左右的水平位置，垂直默认居中显示

背景图片滚动

background-attachment
简写为bga 设置背景图片是否跟随内容滚动
默认取值为scroll滚动
如果想设置不滚动 则为fixed

背景尺寸设置

background-size
简写为bgs 主要用于设置背景图片的尺寸大小

常用取值为cover
定义为背景图等比缩放 铺满整个盒子。
但是需要注意的是，该属性取值如果背景图和盒子比例不一样。可能会导致背景图过大超出盒子显示不全。

取值为contain时
背景图会等比例缩放，直到背景图的宽或者高和盒子的宽高一致。
需要注意的是 如果该属性取值的背景图片和盒子比例不一样，可能会导致背景图不会完全铺满盒子

取值为实际像素的大小
主要用于 设置背景图大小固定 例如苏宁易购的移动端小图标

背景属性综合写法

背景属性综合写法没有文字的综合写法的书写顺序，没用属性的也可以省略不写
属性和属性之间用空格隔开
background： 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
我们可以吧背景的尺寸设置给综合写法 用/隔开链接就可以了， 但是必须有 bgp值
哪怕是0也要书写。
但是我们建议分开写 这样不容易出错。

背景颜色透明rgba

在css中我们可以设置背景颜色的透明度。
即在rgb中末尾添加alpha（透明程度）
alpha取值为0-1 0表示彻底透明 1表示不透明 之间的数字（如 . 5 .6）等表示透明的程度。
rgba只能设置背景颜色透明 不会影响实际内容

盒子透明opacity

取值也是 0-1 0表示彻底透明 1表示不透明 之间的数字（如 . 5 .6）等表示透明的程度。
但是需要注意的是 用opacity设置透明 内容也会透明