day03

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 可见+不可见)

C今日未掌握

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,335评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,895评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,766评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,918评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,042评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,169评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,219评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,976评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,393评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,711评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,876评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,562评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,193评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,903评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,699评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,764评论 2 351

推荐阅读更多精彩内容

  • A我今天学到了什么 一.css基本样式 1.css背景 2.css文本 3.css字体 4.css链接 四个链接状...
    孔子曰_f425阅读 222评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,744评论 1 92
  • A我今天学到了什么? 1、水平居中如何让内联元素和内联块元素水平居中? 1.1给父级加text-align:cen...
    向钱看丷向厚赚阅读 381评论 0 0
  • A今天学到了什么 1、css基本样式 1.1css背景 1.2css文本 1.3css字体 1.4css链接 1....
    flyingfish_c86d阅读 305评论 0 0
  • 饭后和安乔童学习一下,然后就开始各自画画,都是什么花呢?
    Loura明珠阅读 218评论 0 0