A.今天学了什么
1.css背景
背景颜色:background-color
背景图片:backgorund-image:url(“”)
背景重复:background-repeat
背景吸附:background-attachment:fixed | scroll
背景位置:background-position: x y
(//背景位置有两个参数,第一个参数表示离x轴的距离,y表示离y轴的距离
)
简写background: color image repeat position
background-size: x y;
x表示宽度,y表示高度
background-size:cover;
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;
2 .css文本
color:设置字体的颜色
颜色的名称 - 如: red
颜色是通过CSS最经常的指定:
十六进制值 - 如: #FF0000
一个RGB值 - 如: RGB(255,0,0)
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 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体
p{font-family:Helvetica,Microsoft YaHei}
font-size //字体的大小
font-style:normal | italic //字体样式
font-weight:normal | bold | lighter //字体粗细
line-height //行高
4.css链接
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
*若单独设置几个链接,必须遵守如下规则:
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
5.列表样式
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-style:dotted;
border-right-style:solid;
}
7 表格
border-collapse 属性设置表格的边框被折叠成一个单一的边框
table{border-collapse:collapse} // 边框折叠
/可以在td,th设置这个两个属性
colspan:value //跨越的列
rowspan:value //跨越的行
8 轮廓属性
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
p{outline:1px solid pink}
9 透明
opacity
visibility:hidden|visible
10 css样式的继承
继承:是子元素对父元素的继承
width
如果子元素不设置宽度,默认情况下继承父元素的宽度
height
如果父元素不设置高度,默认情况下父元素继承子元素的高度
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
11 盒子浮动
float :能让盒子并排显示
12 清除浮动
给下面的兄弟元素给clear:both;
给父级加overflow:hidden;
用伪元素,给a父级内容生成
.row:before{
display:table;
content:””
.row:after{
display:table;
content:””
clear:both
13 定位:position
Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative
absolute定位
绝对定位的元素的位置相对于最近的已定位父元素,如果没有已定位的父元素,那么它的位置相对于<html>
都通过left,top,right,bottom移动
z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素
B .今天学到了什么
1.css背景
背景颜色:background-color
背景图片:backgorund-image:url(“”)
背景重复:background-repeat
背景吸附:background-attachment:fixed | scroll
背景位置:background-position: x y
(//背景位置有两个参数,第一个参数表示离x轴的距离,y表示离y轴的距离
)
简写background: color image repeat position
background-size: x y;
x表示宽度,y表示高度
background-size:cover;
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;
2 .css文本
color:设置字体的颜色
颜色的名称 - 如: red
颜色是通过CSS最经常的指定:
十六进制值 - 如: #FF0000
一个RGB值 - 如: RGB(255,0,0)
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 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体
p{font-family:Helvetica,Microsoft YaHei}
font-size //字体的大小
font-style:normal | italic //字体样式
font-weight:normal | bold | lighter //字体粗细
line-height //行高
4.css链接
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
*若单独设置几个链接,必须遵守如下规则:
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
5.列表样式
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-style:dotted;
border-right-style:solid;
}
7 表格
border-collapse 属性设置表格的边框被折叠成一个单一的边框
table{border-collapse:collapse} // 边框折叠
/可以在td,th设置这个两个属性
colspan:value //跨越的列
rowspan:value //跨越的行
8 轮廓属性
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
p{outline:1px solid pink}
9 透明
opacity
visibility:hidden|visible
10 css样式的继承
继承:是子元素对父元素的继承
width
如果子元素不设置宽度,默认情况下继承父元素的宽度
height
如果父元素不设置高度,默认情况下父元素继承子元素的高度
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
11 盒子浮动
float :能让盒子并排显示
12 清除浮动
给下面的兄弟元素给clear:both;
给父级加overflow:hidden;
用伪元素,给a父级内容生成
.row:before{
display:table;
content:””
.row:after{
display:table;
content:””
clear:both
13 定位:position
Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative
absolute定位
绝对定位的元素的位置相对于最近的已定位父元素,如果没有已定位的父元素,那么它的位置相对于<html>
都通过left,top,right,bottom移动
z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素
C 今天没掌握什么
今天全都掌握了