day03

A我今天学到了什么?

1、水平居中如何让内联元素和内联块元素水平居中?

1.1给父级加text-align:center
1.2设置display:block;
margin-right:auto;
margin-left:auto;

2、css基本样式的讲解

2.1css背景
//背景颜色
background-color

//背景图片
backgound-image

//背景重复
background-repeat

//背景位置
background-position:x.y
//背景位置有两个参数,第一个参数表示背景图片离盒子X轴的距离,Y表示图片离盒子Y轴的距离
//参数可以传递left/right/top/bottom/center
简写:background:color image repeat  position
//背景吸附
backgound-attachment:fixed固定的/scroll滚动的
//背景图片大小
background-size:x,y
X表示宽度,Y表示高度
background-size:cover
此时将图像缩放成完全覆盖背景定位区域的最小大小
相当于background-size:100% 100%
2.2css文本
//设置字体的颜色
color
十六进制值-如:#FF000
一个RGB值-如:(255,0,0)
颜色的名称-如:red
body{color:red}
h1{color:#FF000}
h2{color:rgb(255,0,0)}
文本对齐方式
text-align:right/left/center
文本修饰
text-decoration:underline/overline/line-through
文本转换
text-transform:uppercase/lowercase/capitalize
文本缩进
text-indent
2.3css字体
font-family:字体
p{font family:Microsoft Yahei}
//字体大小
font:size

//字体类型
font-type:nomor/italic

//字体粗细
font—width:normal正常的/bold粗的/lighter淡的,xid

行高
line-height

3、css链接

a:link未访问过得链接
a:visited已访问过得链接
a:hover当鼠标放在链接上时
a:active链接被点击的那一刻

若单独设置几个链接,必须遵守以下规则:
a:hover必须跟在link和visited后面
a:active必须跟在hover后面

4、css列表样式(针对url)
list-style:none没有一个
list-style-type:/circle圆圈/square正方形
list-style-image:url(“XXX”)
p{border:1px solid #333}

单独设置个边

p{border-top-style:dotted斑点基因;
border-right-style:solid}

5、表格

border-collapse属性设置表格的边框被折叠成一个单一的边框
collapse折叠
table{border-collapse:collapse}
//可以再td,th设置这两个属性
colspan:value//跨行的列
rowspan:Valle//跨行的行
6、轮廓属性(不怎么用)
轮廓(outline)位于边框边缘的外围,可起到突出元素的作用
p{outline:1px solid pink}
7、透明
opacity透明度
一般取值(0-1)
visibility:可见度
visibility:hidden/事物存在,但是隐藏了
visibility:visible/事物可以看见
visibility:hidden与display:none的区别

###8、样式的继承

是子元素对父元素的继承

8.1width和height
width
//如果子元素不设置宽度,默认为继承父元素的宽度
height
//如果父元素不设置高度,默认父元素继承子元素的高度
8.2css可以继承的属性
文本相关的属性:color,text-decoration,text-transform,text-indent
字体相关的属性:font-family,font-style,font-size,font-weight,line-height
列表相关属性:list-style
表格相关属性:border-collapse
其他属性:cursor,visibility

B我掌握了什么?

1、如何让内联元素和内联块元素居中?
1.1设置display:block
margin-left:auto;
margin-fight:auto:
1.2给父级加text-align:center
2、css背景
background-color
//背景颜色
backgound-image
//背景图片
background-repeat
//背景重复
background-positionbe
//背景位置
可以简写为background:color image  repeat  position
background-size
//背景图片大小
background-size:cover
相当于background-size:100% 100%
3、css文本
color:设置字体的颜色
十六进制值-如:#FF000
一个RGB值-如:(255,0,0)
颜色的名称-如:red
body{color:red}
h1{color:#FF000}
h2{color:rgb(255,0,0)}
文本对齐方式
text-align:right/left/center
4、css字体
font-family字体
p{font family:Microsoft Yahei}
行高
line-height
5、css链接
a:link未访问过得链接
a:visited已访问过得链接
a:hover当鼠标放在链接上时
a:active链接被点击的那一刻
6、样式的继承
是子元素对父元素的继承
width
//如果子元素不设置宽度,默认为继承父元素的宽度
height
//如果父元素不设置高度,默认父元素继承子元素的高度

B今天我掌握了什么?

####1、水平居中如何让内联元素和内联块元素水平居中?

>######1.1给父级加text-align:center
>######1.2设置display:block;
>######margin-right:auto;
>######margin-left:auto;

####2、css基本样式的讲解


>######2.1css背景
//背景颜色
background-color

//背景图片
backgound-image

//背景重复
background-repeat

//背景位置
background-position:x.y
//背景位置有两个参数,第一个参数表示背景图片离盒子X轴的距离,Y表示图片离盒子Y轴的距离
//参数可以传递left/right/top/bottom/center
简写:background:color image repeat  position
//背景吸附
backgound-attachment:fixed固定的/scroll滚动的
//背景图片大小
background-size:x,y
X表示宽度,Y表示高度
background-size:cover
此时将图像缩放成完全覆盖背景定位区域的最小大小
相当于background-size:100% 100%
>#####css文本
//设置字体的颜色
color
十六进制值-如:#FF000
一个RGB值-如:(255,0,0)
颜色的名称-如:red
body{color:red}
h1{color:#FF000}
h2{color:rgb(255,0,0)}
文本对齐方式
text-align:right/left/center
文本修饰
text-decoration:underline/overline/line-through
文本转换
text-transform:uppercase/lowercase/capitalize
文本缩进
text-indent
font-family:字体
p{font family:Microsoft Yahei}
//字体大小
font:size

//字体类型
font-type:nomor/italic

//字体粗细
font—width:normal正常的/bold粗的/lighter淡的,xid

行高
line-height
####3、css链接
a:link未访问过得链接
a:visited已访问过得链接
a:hover当鼠标放在链接上时
a:active链接被点击的那一刻
若单独设置几个链接,必须遵守以下规则:
a:hover必须跟在link和visited后面
a:active必须跟在hover后面
###C今天没有掌握什么
1、css列表样式(针对url)(了解)
list-style:none
list-style-type:circle/square
list-style-image:url(“XXX”)
p{border:1px solid #333}

(1)单独设置个边

p{border-top-style:dotted;
border-right-style:solid}
表格(了解)
border-collapse属性设置表格的边框被折叠成一个单一的边框
table{border-collapse:collapse}
td,th设置这两个属性
colspan:value    //跨行的列
rowspan://跨行的行

你可能感兴趣的:(day03)