A今天学到了什么

1、css基本样式

1.1css背景

背景颜色:background-color

背景图片:backgorund-image

背景重复:background-repeat

背景位置:background-position: x y 
//背景位置有两个参数,第一个参数表示背景图片离盒子x轴的距离,y表示背景图片离盒子y轴的距离
//参数可以传递left|right|top|bottom|center

//css
<style>
div{
 width：500px;
 height:100px;
 background:pink url(images/logo.png) no-repeat   100px 50px;
}
</style>

背景吸附:background-attachment:fixed | scroll

背景图片大小:
background-size: x y;
//x表示宽度，y表示高度
background-size:cover;
//此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;

1.2css文本

color:设置字体的颜色
body {color:red;}
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
h1 {color:#00ff00;}
一个RGB值 - 如: RGB(255,0,0)
h2 {color:rgb(255,0,0);}

text-align：文本对齐方式
text-align: right|left|center

text-decoration：文本修饰
text-decoration: underline|overline|line-through

text-transform：文本转换
text-transform:uppercase|lowercase|capitalize

text-indent：文本缩进

1.3css字体

font-family:字体
p{font-family:Helvetica,Microsoft YaHei}
//font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体

font-size：字体大小

font-style:字体样式
normal | italic

font-weight：字体粗细
normal | bold | lighter

line-height：行高

1.4css链接

这四个链接状态是：

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

*若单独设置几个链接，必须遵守如下规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

1.5css列表样式(针对ul)

list-style:none;

list-style-type:circle|square（空心圆、方块）

list-style-image:url("xxx")

1.6边框

border-width : 边框的宽度

border-style: 边框的样式

border-color :边框的颜色

//以上可以简写成
border： width style color
p{border:1px solid #333 }

//边框-单独设置各边
p
{
    border-top-style:dotted;
    border-right-style:solid;
}

//HTML
<p>
   hello world
</p>
//CSS
p {
    border-top-style: dotted;
    border-right-style: solid;
    border-top-width: 5px;
    border-right-width: 5px;
    border-top-color: red;
    border-right-color: green;
    width: 50px;
    height: 50px;
}

1.7表格(了解)

border-collapse:属性设置表格的边框被折叠成一个单一的边框;
table{border-collapse:collapse}
//可以在td,th设置这个两个属性
colspan:value    //跨越的列
rowspan:value   //跨越的行

例子:

//HTML
制作表格：
<table>
    <tr>
        <th>商城</th>
       <th>电子产品</th>
    </tr>
    <tr>
        <td>天猫商城</td>
       <td>iphone</td>
    </tr>
    <tr>
        <td>京东商城</td>
       <td>小米手机</td>
    </tr>
  </table>

//HTML
跨越的行：
<table>
    <tr>
      <th rowspan="3">商城</th>
      <td>衣服</td>
     <td>电脑</td>
    </tr>
    <tr>
        <td>鞋子</td>
       <td>手机</td>
    </tr>
    <tr>
        <td>裤子</td>
        <td>眼睛</td>
    </tr>
</table>

//HTML
跨越的列：
<table>
    <tr>
        <th colspan="2">商城</th>
    </tr>
    <tr>
        <td>天猫商城</td><td>iphone</td>
    </tr>
    <tr>
        <td>京东商城</td><td>小米手机</td>
    </tr>

//HTML
有间隔的table：
<table>
    <tr>
       <th>商城</th>
       <th>电子产品</th>
    </tr>
    <tr class="one" ></tr>
    <tr>
       <td>TMALL</td>
       <td>iphone</td>
    </tr>
    <tr class="one"></tr>
    <tr>
       <td>JD</td>
       <td>ipad</td>
    </tr>
</table>

//css
   table{
            border-collapse: collapse;
            width:300px;
            text-align: center;
        }
        table,td,th{border:1px solid #333}
        tr{height:50px;}

1.8轮廓属性（不怎么用）

//轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
p{outline:1px solid pink}

1.9透明

opacity:透明度
一般取值(o-1)；

visibility:可见度
visibility：hidden（事物存在，但是隐藏了）
visibility：visible（事物可以看见）

visibility：hidden 与 display:none的区别

visibility：hidden（事物存在，但是隐藏了）
display:none（事物确确实实不存在了）

overflow：hidden（溢出：隐藏）

2、css样式的继承

继承:是子元素对父元素的继承

2.1width和height

width:
//如果子元素不设置宽度，默认情况下继承父元素的宽度

height:
//(特殊)如果父元素不设置高度，默认情况下父元素[继承子元素]的高度

2.2css可以继承的属性

文本相关属性:
color               //文本的颜色
text-align       //文本对齐的方向
text-decoration //文本修饰
text-indent  //文本缩近
text-transform  //文本转换(了解)

字体相关属性:
font-family,font-style,font-size,font-weight,line-height

列表相关属性:
list-style

表格相关属性:
border-collapse

其他属性:
cursor,visibility

B今天掌握了什么

1、css基本样式

1.1css背景

背景颜色:background-color

背景图片:backgorund-image

背景重复:background-repeat

背景位置:background-position: x y 
//背景位置有两个参数,第一个参数表示背景图片离盒子x轴的距离,y表示背景图片离盒子y轴的距离
//参数可以传递left|right|top|bottom|center

//css
<style>
div{
 width：500px;
 height:100px;
 background:pink url(images/logo.png) no-repeat   100px 50px;
}
</style>

背景吸附:background-attachment:fixed | scroll

背景图片大小:
background-size: x y;
//x表示宽度，y表示高度
background-size:cover;
//此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;

1.2css文本

color:设置字体的颜色
body {color:red;}
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
h1 {color:#00ff00;}
一个RGB值 - 如: RGB(255,0,0)
h2 {color:rgb(255,0,0);}

text-align：文本对齐方式
text-align: right|left|center

text-decoration：文本修饰
text-decoration: underline|overline|line-through

text-transform：文本转换
text-transform:uppercase|lowercase|capitalize

text-indent：文本缩进

1.3css字体

font-family:字体
p{font-family:Helvetica,Microsoft YaHei}
//font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体

font-size：字体大小

font-style:字体样式
normal | italic

font-weight：字体粗细
normal | bold | lighter

line-height：行高

1.4css链接

这四个链接状态是：

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

*若单独设置几个链接，必须遵守如下规则：

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

1.5css列表样式(针对ul)

list-style:none;

list-style-type:circle|square（空心圆、方块）

list-style-image:url("xxx")

1.6边框

border-width : 边框的宽度

border-style: 边框的样式

border-color :边框的颜色

//以上可以简写成
border： width style color
p{border:1px solid #333 }

//边框-单独设置各边
p
{
    border-top-style:dotted;
    border-right-style:solid;
}

//HTML
<p>
   hello world
</p>
//CSS
p {
    border-top-style: dotted;
    border-right-style: solid;
    border-top-width: 5px;
    border-right-width: 5px;
    border-top-color: red;
    border-right-color: green;
    width: 50px;
    height: 50px;
}

1.7表格(了解)

border-collapse:属性设置表格的边框被折叠成一个单一的边框;
table{border-collapse:collapse}
//可以在td,th设置这个两个属性
colspan:value    //跨越的列
rowspan:value   //跨越的行

例子:

//HTML
制作表格：
<table>
    <tr>
        <th>商城</th>
       <th>电子产品</th>
    </tr>
    <tr>
        <td>天猫商城</td>
       <td>iphone</td>
    </tr>
    <tr>
        <td>京东商城</td>
       <td>小米手机</td>
    </tr>
  </table>

//HTML
跨越的行：
<table>
    <tr>
      <th rowspan="3">商城</th>
      <td>衣服</td>
     <td>电脑</td>
    </tr>
    <tr>
        <td>鞋子</td>
       <td>手机</td>
    </tr>
    <tr>
        <td>裤子</td>
        <td>眼睛</td>
    </tr>
</table>

//HTML
跨越的列：
<table>
    <tr>
        <th colspan="2">商城</th>
    </tr>
    <tr>
        <td>天猫商城</td><td>iphone</td>
    </tr>
    <tr>
        <td>京东商城</td><td>小米手机</td>
    </tr>

//HTML
有间隔的table：
<table>
    <tr>
       <th>商城</th>
       <th>电子产品</th>
    </tr>
    <tr class="one" ></tr>
    <tr>
       <td>TMALL</td>
       <td>iphone</td>
    </tr>
    <tr class="one"></tr>
    <tr>
       <td>JD</td>
       <td>ipad</td>
    </tr>
</table>

//css
   table{
            border-collapse: collapse;
            width:300px;
            text-align: center;
        }
        table,td,th{border:1px solid #333}
        tr{height:50px;}

1.8轮廓属性（不怎么用）

//轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
p{outline:1px solid pink}

1.9透明

opacity:透明度
一般取值(o-1)；

visibility:可见度
visibility：hidden（事物存在，但是隐藏了）
visibility：visible（事物可以看见）

visibility：hidden 与 display:none的区别

visibility：hidden（事物存在，但是隐藏了）
display:none（事物确确实实不存在了）

overflow：hidden（溢出：隐藏）

2、css样式的继承

继承:是子元素对父元素的继承

2.1width和height

width:
//如果子元素不设置宽度，默认情况下继承父元素的宽度

height:
//(特殊)如果父元素不设置高度，默认情况下父元素[继承子元素]的高度

2.2css可以继承的属性

文本相关属性:
color               //文本的颜色
text-align       //文本对齐的方向
text-decoration //文本修饰
text-indent  //文本缩近
text-transform  //文本转换(了解)

字体相关属性:
font-family,font-style,font-size,font-weight,line-height

列表相关属性:
list-style

表格相关属性:
border-collapse

其他属性:
cursor,visibility

C今天没有掌握什么

全部掌握了