A今日所学
一、CSS基本样式
1.CSS背景
background-color : #f5f5f5|rgb(0,0,0)|rgba(256,0,128,0.5)|deeppink
background-image : url("images/xxx.jpg")
background-repeat : no-repeat|repeat|inherit
background-attachment : scroll|fixed (scroll图片在画布上可被滚动至看不见,fixed图片被固定于屏幕某个position,即使滚动,图片不相对于屏幕不移动)
background-position : top|right|bottom|left|...px 图片在父类空间中的位置(输入像素代表距x,y轴N像素)
background-size : ...px|cover cover即填充(图片撑满父类空间)
简写为background属性时顺序不可变,其中size不可缩写,参数为像素时与position冲突:
background : color image repeat attachment position
2.CSS文本
color : #f5f5f5|rgb(0,0,0)|rgba(256,0,128,0.5)|deeppink
text-align : right|left|center
text-decoration : underline|overline|line-through
text-indent : ...em(em是中文字单位,1em代表一个中文字占用的空间)
text-transform : capitalize|uppercase|lowercase 首字母大写(以空格区分为单词,对字母有效)|全大写|全小写
3.CSS字体
font-family : 叶根友毛笔行书2.0版 (该名字参数不是系统FONTS文件夹中名字,而是word之类文档中选择字体时可见的名字)
font-size : ...px
font-style : normal|italic
font-weight : normal|bold|lighter
4.CSS链接
a:link : 未访问过的A标签(该网址未进入过)
a:visited : 已访问过的A标签
a:hover : 鼠标悬停于A标签上时
a:active : 鼠标正点下去的A标签
属于伪类选择器
单独设置以上属性时,需注意设置顺序:
hover需在link,visited之后;
active需在hover之后;
5.CSS列表样式(正对UL,LI)
list-style : none
list-style-type : circle|square|... ...
list-style-image : url("")
6.边框
border-width : ...px
border-style : solid...
border-color : #f5f5f5|rgb(0,0,0)|rgba(256,0,128,0.5)|deeppink
简写:border : 5px solid #123456;
7.表格
border-collapse : collapse 边框折叠(使两条边框挨着时合并为一条边框)(一般作为table属性)
colspan : 跨列(td属性)
rowspan : 跨行(tr属性)
8.轮廓(轮廓空间上在边框外围,且,不占空间,不占空间,不占空间)
outline-width : ...px
outline-style : solid...
outline-color : #f5f5f5|rgb(0,0,0)|rgba(256,0,128,0.5)|deeppink
简写:outline: 5px solid #123456;
二、CSS继承
1.特殊继承(继承关系特殊)
关于width和height的继承:
元素只会继承父元素的width,同时会继承子元素的高度
元素只会继承父元素的width,同时会继承子元素的高度
元素只会继承父元素的width,同时会继承子元素的高度
关于父元素继承子元素的height:
子元素float时,父元素无法继承该子元素的height;
子元素position设置为absolute时,父元素无法继承该子元素的height;
但是如果父元素内含多个子元素,父元素可以正常继承其他子元素的height;
关于子元素继承父元素的width:
子元素float时,子元素无法继承其父元素的width;
子元素postion设置为absolute时,子元素无法继承其父元素的width;
综上,如果父子元素希望分别相互继承高宽,则子元素不能设置为float或absolute的位置属性
2.一般继承(子元素继承父元素)
文本属性:color,text-align,text-decoration,text-transform,text-indent
字体属性:line-height,font-size,font-family,font-style,font-weight
列表属性:list-style
表格属性:border-collapse
其他属性:cursor,visibility(cursor为鼠标图标属性,鼠标悬停在拥有此属性的标签上时会改变至相应图片;visibility 可见+不可见)
B今日已掌握
一、CSS基本样式
1.CSS背景
background-color : #f5f5f5|rgb(0,0,0)|rgba(256,0,128,0.5)|deeppink
background-image : url("images/xxx.jpg")
background-repeat : no-repeat|repeat|inherit
background-attachment : scroll|fixed (scroll图片在画布上可被滚动至看不见,fixed图片被固定于屏幕某个position,即使滚动,图片不相对于屏幕不移动)
background-position : top|right|bottom|left|...px 图片在父类空间中的位置(输入像素代表距x,y轴N像素)
background-size : ...px|cover cover即填充(图片撑满父类空间)
简写为background属性时顺序不可变,其中size不可缩写,参数为像素时与position冲突:
background : color image repeat attachment position
2.CSS文本
color : #f5f5f5|rgb(0,0,0)|rgba(256,0,128,0.5)|deeppink
text-align : right|left|center
text-decoration : underline|overline|line-through
text-indent : ...em(em是中文字单位,1em代表一个中文字占用的空间)
text-transform : capitalize|uppercase|lowercase 首字母大写(以空格区分为单词,对字母有效)|全大写|全小写
3.CSS字体
font-family : 叶根友毛笔行书2.0版 (该名字参数不是系统FONTS文件夹中名字,而是word之类文档中选择字体时可见的名字)
font-size : ...px
font-style : normal|italic
font-weight : normal|bold|lighter
4.CSS链接
a:link : 未访问过的A标签(该网址未进入过)
a:visited : 已访问过的A标签
a:hover : 鼠标悬停于A标签上时
a:active : 鼠标正点下去的A标签
属于伪类选择器
单独设置以上属性时,需注意设置顺序:
hover需在link,visited之后;
active需在hover之后;
5.CSS列表样式(正对UL,LI)
list-style : none
list-style-type : circle|square|... ...
list-style-image : url("")
6.边框
border-width : ...px
border-style : solid...
border-color : #f5f5f5|rgb(0,0,0)|rgba(256,0,128,0.5)|deeppink
简写:border : 5px solid #123456;
7.表格
border-collapse : collapse 边框折叠(使两条边框挨着时合并为一条边框)(一般作为table属性)
colspan : 跨列(td属性)
rowspan : 跨行(tr属性)
8.轮廓(轮廓空间上在边框外围,且,不占空间,不占空间,不占空间)
outline-width : ...px
outline-style : solid...
outline-color : #f5f5f5|rgb(0,0,0)|rgba(256,0,128,0.5)|deeppink
简写:outline: 5px solid #123456;
二、CSS继承
1.特殊继承(继承关系特殊)
关于width和height的继承:
元素只会继承父元素的width,同时会继承子元素的高度
元素只会继承父元素的width,同时会继承子元素的高度
元素只会继承父元素的width,同时会继承子元素的高度
关于父元素继承子元素的height:
子元素float时,父元素无法继承该子元素的height;
子元素position设置为absolute时,父元素无法继承该子元素的height;
但是如果父元素内含多个子元素,父元素可以正常继承其他子元素的height;
关于子元素继承父元素的width:
子元素float时,子元素无法继承其父元素的width;
子元素postion设置为absolute时,子元素无法继承其父元素的width;
综上,如果父子元素希望分别相互继承高宽,则子元素不能设置为float或absolute的位置属性
2.一般继承(子元素继承父元素)
文本属性:color,text-align,text-decoration,text-transform,text-indent
字体属性:line-height,font-size,font-family,font-style,font-weight
列表属性:list-style
表格属性:border-collapse
其他属性:cursor,visibility(cursor为鼠标图标属性,鼠标悬停在拥有此属性的标签上时会改变至相应图片;visibility 可见+不可见)