css表格透明色,day03 css基本样式 + 表格table + 轮廓 + 透明 + 样式的继承

1.css基本样式

1.1 css背景

背景颜色 : background-color : red ; | #FF0000(十六进制) | RGB(255,0,0)

背景图片 : background-image: url("image/icon1.png");

背景重复 : background-repeat : no-repeat | repeat-x | repeat-y

( 不重复 | x方向重复 | y方向重复 )

背景吸附 : background-attachment : fixed | scroll ( 固定 | 从上到下移动 )

背景位置 : background-position: 10px 20px; | center top | 50% 50%

两个参数,第一个参数表示离x轴的距离,y表示离y轴的距离

简写 : background: color image repeat position

图片大小 : background-size: 50px 50px; | 100% 100% | cover (遮盖 同 100% 100%)

1.2 css文本

字体颜色 : color: red; | #FF0000(十六进制) | RGB(255,0,0)

对齐方式 : text-align : right ; | left | center

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

( 下划线 | 上划线 | 删除线 | 没有 )

文本转换 : text-transform : uppercase | lowercase | capitalize ( 大写 | 小写 | 首字母大写 )

文本缩进 : text-indent : 20px ; | 2em

1.3 css字体

后备字体库 : body { font-family : Helvetica , Microsoft YaHei , 宋体 , 黑体 }

字体大小 : font-size : 16px ; (默认16px)

字体样式 : font-style : normal | italic | oblique ( 无样式 | 斜字体 | 大倾斜 )

字体粗细 : font-weight : normal | bold | bolder | lighter | 100~900

( 无加粗 | 加粗 | 更粗 | 细字体 | 范围粗细 400 等同于 normal 700 等同于 bold )

字体行高 : line-height : 50px ;

1.4 css链接

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

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

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

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

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

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

a:active 必须跟在 a:hover后面

1.5 css列表样式 (不排序列表 ul li)

list-style : none ; 无小圆点

list-style-type : circle | square ; 小圆点形式

list-style-image : url("xxx") ; 可换成图标

1.6 css边框

border-width 边框的宽度

border-style 边框的样式

border-color 边框的颜色

可以简写成 : border： width style color ;

p { border : 1px solid #333 }

单独设置各边 : p { border-top:1px solid #ccc; }

1.7 css表格

表格跨行 :

商城	帽子	衣服
	帽子	衣服
	帽子	衣服

表格跨列 :

商城
衣服	鞋子	帽子
衣服	鞋子	帽子

table,th,td { border: 1px solid red; } 设置表格边框

table { border-collapse : collapse }

( 属性设置表格的边框被折叠成一个单一的边框 )

1.8 css轮廓

p { outline :1px solid pink }

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

1.9 css透明 (opacity)

opacity:0~1;

2.0 css隐藏/显示

visibility : hidden | visible ( 隐藏 | 显示 )

2.样式的继承

2.1 width和height

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

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

2.2 css可以继承的属性

文本相关属性 : 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 (鼠标样式 , 可见)