css：选择器基础

/* 内嵌式 外联式 行内式 */

/* 选择器{属性名：属性值} */

选择器：

标签选择器 以标签名命名的选择器  

标签名{}

类选择器class

通过类名，找到页面中所有带有这个类名的标签，设置样式  

.类名{}

类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头

一个标签可以有多个类名

id选择器id    

#id{}

通配符选择器*

选中所有元素

*

字体和文本样式

1.1字体大小：

属性名：font-size（谷歌默认字号是16）

取值：数字+px

1.2字体粗细：

属性名：font-weight

取值：关键字：正常normal 加粗bold

      纯数字：正常400   加粗700

不是所有字体都提供了九种粗细，因此部分取值页面无明显效果

1.3字体样式（是否倾斜）

属性名：font-style

取值： 正常normal   倾斜italic

1.4字体系列

属性名：font-family

常见取值：具体字体1，具体字体2，...，字体系列

    具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体

    字体系列：sans-serif（无衬线字体）、serif（衬线字体）、monospace（等宽字体）

 1.5 font复合属性

属性名：font（复合属性）

取值：  font: style weight size/line-height family;

例:     font: italic 700   66px/1.5   宋体;

省略要求：只能省略前两个，如果省略了相当于设置了默认值

注意点：如果需要同时设置单独和连写形式，将单独形式放在列写形式下面

1.6样式的层叠问题

覆盖

2.1文本缩进

属性名：text-indent

取值：数字+px/数字+em（一个em是一个字的大小）

2.2文本水平对齐方式

属性名：text-align

取值：left center right

text-align：center可以使 文本  span标签、a标签  input标签、image标签 这些元素水平居中（父元素中设置）

2.3文本修饰

属性名：text-decoration

取值：underline下划线

    line-through删除线

    overline上划线

    none无装饰线

3.1行高

属性名：line-height

取值：数字+px/倍数

背景相关属性

4.1背景颜色

background-color

background-color：rgb(0,0,0,a);   a为透明度

4.2背景图片

background-image(bgi)

background-image:url('图片路径');

注意点：url中可省略引号

       背景图片默认是在水平和垂直方向平铺的

       背景图片仅仅是指给盒子祈祷装饰效果，类似于背景颜色，是不能撑开盒子的

4.3背景平铺

background-repeat(bgr)

属性值：   repeat       (默认值)水平和垂直方向都平铺

        no-repeat                  不平铺

         repeat-x             沿着水平方向平铺

         repeat-y             沿着垂直方向平铺

4.4背景位置

background-position(bgp)

background-position:水平方向位置 垂直方向位置;

属性值：1.方位名词（最多只能表示九个位置）：水平方向left center right

                                                                               垂直方向top center bottom

        2.数字+px（坐标）：坐标系：原点(0,0) 盒子的左上角

                                                        x轴 水平向右

                                                        y轴 垂直向下

                                          操作：将图片左上角与坐标点重合

注意点：方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直

4.5背景相关属性连写

background:color image repeat position

属性不分顺序，上述为推荐书写顺序

背景图位置 如果是英文单词可以颠倒顺序

背景图位置 如果是数值 不能颠倒顺序

拓展1 颜色常见取值

属性名：

    如：文字颜色：color

        背景颜色：background-color

属性值：    

颜色表示方式                            表示含义                                                          属性值

       关键词                           预定义的颜色名                                              red、green、blue...

   rgb表示法                红绿蓝三原色，每项取值范围：0-255                      rgb（0,233,255）

   rgba表示法        红绿蓝三原色+透明度，透明度取值范围0-1               rgba（0,244,255,0.3）

十六进制表示法        #开头，将数字转换成十六进制表示      #000000，#ff0000  简写#000、#f00

拓展2 标签水平居中方法总结 margin：0 auto

（大盒子）div、p、h

注意点：如果要使上述标签水平居中，直接给当前元素本身设置即可

       margin：0 auto一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度