html表格线条透明,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 (鼠标样式 , 可见)