day03
2017-08-24 本文已影响0人
孔子曰_f425
A我今天学到了什么
一.css基本样式
1.css背景
背景颜色：background color
背景图片:backgorund-image。
列： <style>
p{background-image:url("img/down.jpg");width: 800px;height: 800px}
</style>
背景重复：background-repeat。
列：<style>
p {
background-image: url("img/down.jpg");width:800px;height:800px;background-repeat:no-repeat}
</style>
背景吸附：background-attachment:fixed | scroll
背景位置：background-position: x y
//背景位置有两个参数,第一个参数表示背景图片离盒子x轴的距离,y表示背景图片离盒子y轴的距离
//参数可以传递left|right|top|bottom|center
简写background: color image repeat position
背景图片大小：background-size: x y;
//x表示宽度，y表示高度
//background-size:cover;
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;
2.css文本
color:设置字体的颜色
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
body {color:red;}
h1 {color:#00ff00;}
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文本缩进
3.css字体
font-family
//font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
p{font-family:Helvetica,Microsoft YaHei}
font-size:字体大小
字体样式：font-style:normal | italic
字体粗细：font-weight:normal | bold | lighter
行高：line-height
4.css链接
四个链接状态：
1.a:link - 正常，未访问过的链接
2.a:visited - 用户已访问过的链接
3.a:hover - 当用户鼠标放在链接上时
4.a:active - 链接被点击的那一刻
*若单独设置几个链接，必须遵守如下规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
5css列表样式(针对ul)
列表样式：无；list-style:none;
目录样式类型：圆|平方 ；list-style-type:circle|square
列表样式图片:list-style-image:url("xxx")
6边框
border-width 边框的宽度
border-style 边框的样式
border-color 边框的颜色
可以简写成
border： width style color
p{border:1px solid #333}
*边框-单独设置各边
p
{border-top:1px solid #ccc:}
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;}
8轮廓属性
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
p{outline:1px solid pink}
visibility:透明度{一般取值(o-1)}； hidden：（事物存在，但是隐藏了） ； visible：（事物可以看见）
visibility:hidden|visible
visibility：hidden 与 display:none的区别
visibility：hidden（事物存在，但是隐藏了）
display:none（事物确确实实不存在了）
overflow：hidden（溢出：隐藏）
二.css样式的继承
继承:是子元素对父元素的继承
1width和height
width
如果子元素不设置宽度，默认情况下继承父元素的宽度
height
如果父元素不设置高度，默认情况下父元素继承子元素的高度
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
B.我今天掌握了什么
一.css基本样式
1.css背景
背景颜色：background color
背景图片:backgorund-image。
列： <style>
p{background-image:url("img/down.jpg");width: 800px;height: 800px}
</style>
背景重复：background-repeat。
列：<style>
p {
background-image: url("img/down.jpg");width:800px;height:800px;background-repeat:no-repeat}
</style>
背景吸附：background-attachment:fixed | scroll
背景位置：background-position: x y
//背景位置有两个参数,第一个参数表示背景图片离盒子x轴的距离,y表示背景图片离盒子y轴的距离
//参数可以传递left|right|top|bottom|center
简写background: color image repeat position
背景图片大小：background-size: x y;
//x表示宽度，y表示高度
//background-size:cover;
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;
2.css文本
color:设置字体的颜色
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
body {color:red;}
h1 {color:#00ff00;}
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文本缩进
3.css字体
font-family
//font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
p{font-family:Helvetica,Microsoft YaHei}
font-size:字体大小
字体样式：font-style:normal | italic
字体粗细：font-weight:normal | bold | lighter
行高：line-height
4.css链接
四个链接状态：
1.a:link - 正常，未访问过的链接
2.a:visited - 用户已访问过的链接
3.a:hover - 当用户鼠标放在链接上时
4.a:active - 链接被点击的那一刻
*若单独设置几个链接，必须遵守如下规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
5css列表样式(针对ul)
列表样式：无；list-style:none;
目录样式类型：圆|平方 ；list-style-type:circle|square
列表样式图片:list-style-image:url("xxx")
6边框
border-width 边框的宽度
border-style 边框的样式
border-color 边框的颜色
可以简写成
border： width style color
p{border:1px solid #333}
*边框-单独设置各边
p
{border-top:1px solid #ccc:}
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;}
8轮廓属性
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
p{outline:1px solid pink}
visibility:透明度{一般取值(o-1)}； hidden：（事物存在，但是隐藏了） ； visible：（事物可以看见）
visibility:hidden|visible
visibility：hidden 与 display:none的区别
visibility：hidden（事物存在，但是隐藏了）
display:none（事物确确实实不存在了）
overflow：hidden（溢出：隐藏）
二.css样式的继承
继承:是子元素对父元素的继承
1width和height
width
如果子元素不设置宽度，默认情况下继承父元素的宽度
height
如果父元素不设置高度，默认情况下父元素继承子元素的高度
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
C.今天没有掌握什么
没有
