day04

1.CSS基本样式

1.1css背景

背景颜色:background-color
背景图片:backgorund-image
背景重复:background-repeat
背景位置:background-position: x y
background-size属性指定背景图片大小
background-size: x y;x表示宽度，y表示高度

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

背景吸附:background-attachment:fixed | scroll
//背景位置有两个参数,第一个参数表示离x轴的距离,y表示离y轴的距离

简写background: color image repeat position；

1.2CSS文本

text-align文本对齐方式
text-align: right|left|center
text-decoration文本修饰
text-decoration: underline|overline|line-through
text-indent文本缩进
text-transform文本转换
text-transform:uppercase（大写字母）|lowercase（小写字母）|capitalize（首字母大写开头）

1.3css字体

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
p{font-family:Helvetica,Microsoft YaHei}
font-size
font-style:normal | italic（斜体）
font-weight:normal | bold（厚重） | lighter

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:1px solid #ccc;}

1.7表格

border-collapse 属性设置表格的边框被折叠成一个单一的边框

table{border-collapse:collapse}

//可以在td,th设置这个两个属性

colspan:value    //跨越的列
rowspan:value   //跨越的行

1.8轮廓属性（不怎么用）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

p{outline:1px solid pink}

1.9透明

opacity
visibility:hidden和display:none的区别
display:none不为被隐藏的对象保留其物理空间，
即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visibility:hidden使对象在网页上不可见，
但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

2.css样式的继承

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

2.1width和height

width
如果子元素不设置宽度，默认情况下继承父元素的宽度
Height(特殊)
如果父元素不设置高度，默认情况下父元素继承子元素的高度

2.2css可以继承的属性

(内联标签不能设置文本相关属性)
文本相关属性:color,text-align,text-decoration,text-transform,text-indent
字体相关属性:font-family,font-style,font-size,font-weight,line-height
列表相关属性:list-style
表格相关属性:border-collapse
其他属性:cursor,visibility