day02

A：今天学的内容

一、标签的分类

1、块标签（div、p、h1~h6、ul、li、dl、dt、dd）

特点：1.独占一行。 2.可以设置宽高。

2、内联标签（a、span、i、em、syrong）

特点：1.并排显示。 2.不可以设置宽高。 3.不可以设置margin-top、margin-bottom

3、内联块（img、input、button）

特点：1.并排显示。 2.可以设置宽高。

二、水平居中

1、块元素的居中（margin-left: auto; margin-right:auto;）

margin-left: auto; margin-right:auto;只针对块元素。
如果要给内联和内联块居中，
（display: block;）块元素
（display: inline;）内联元素
（display: inline-block;）内联块元素

2、内联和内联块的居中（text-align: center;）

针对内联和内联块有效，只能添加给父级或祖父级，但父级或祖父级必须是块元素。

三、选择器的分类

1、元素选择器（例如：p{ }）

2、class选择器（例如：.one{}）

3、id选择器（例如：#two）

以上三种的优先排序（元素选择器

例如：

4、伪类选择器

1.针对块元素（鼠标经过）

2.针对内联块（鼠标点击）

5、分组选择器（用逗号隔开）

6、后代选择器（“>”、“空格”）

7、兄弟选择器（“+”、“~”）（必须是兄弟关系）

8、属性选择器（p[class=“”]{}）

9、伪元素

四、css的基本样式

1、背景

①颜色，（background-color：red;）
②图片，（background-image：url（“”））（url是资源定位）
③吸附，（background-attachment：fixed / scroll ）（固定 / 拖动是默认）
④重复，（background-repeat：no-repeat / repeat-x / repeat-y）
⑤位置，（background-position : x y）
⑥大小，（background-size：100% 100%）
（background-size：cover 背景比图片大的情况下使用）
【简写 background：color image no-repeat x y】

2、文本

①颜色，（color：red / #333 / rgb(255,0,0)）
②文本对齐，（text-align：right / left / center）
③文本修饰，（text-decoration：underline / overline / line-through）（下划线，上划线，删除线）
④文本转换，（text-transfrom：uppercase / lowercase / capitalize）（大写，小写，首字母大写）
⑤文本缩进，（text-inden：20px；）

3、字体

①字体类型，（font-family：）
②字体大小，（font-size：）
③字体样式，（font-style：normal / italic）（正常，斜体）
④字体粗细，（font-weight：normal / bold / lighter）（正常，粗体，细）

4、链接

①a：link（未被访问时）
②a：visited（被访问时）
③a：hover（鼠标放在上面时）
④a：active（鼠标点击时）
【注：必须按照依次顺序】

5、css样式列表（针对ul）

①样式（list-style：none）消除
②类型（list-style-type：circle / square）(切换成圆形 / 正方形)
③图片（list-style-image：url（“ ”））切换成图片

6、边框

①宽度（border-width）
②样式（border-style）
③颜色（border-color）
【简写：border：width style color】
【单独设置各边：border-top-style：dotted（虚线）/ solid（实线）】

7、table表格

①列（colspan：“数字”）所跨的列
②行（rowspan：“数字”）所跨的行
③间隙（加）间隙的表格


    
        京东 iphone
    
    
    
        天猫 小米手机