17-18日作业(问答题+总结)

简要笔记

background 背景        

background-color 背景颜色                          

background-image 背景图片 url(图片路径)      

background-image 背景图片 url(图片径)    

background-repeat 背景平铺                                  

repeat 平铺                                                            

no-repeat 不平铺                                          

repeat-x 水平平铺                                                

repeat-y 垂直平铺                                          

background-position 背景图定位          关键字

X:   left   图的左侧和元素的左侧对齐   center 图的中间和元素的中间对齐   right 图的右侧和元素的右侧对齐 ;Y:    top   图的顶部和顶部的左侧对齐  center 图的中间和元素的中间对齐  bottom  图的底部和元素的底部对齐

具体值:X:正值从左向右移动,负值从右向左移动;Y:正值从下向上移动,负值从上向下移动                                                

1.什么是css语法?

       CSS就是层叠样式表。CSS 语法由三部分构成:选择器、属性和值。selector {property: value}选择器 (selector) 通常是我们希望定义的HTML 元素或标签,属性 (property)是可以改变的属性,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration)。

2.列举常见的css选择器?

一、标签选择器:顾名思议,标签选择器是直接将HTML标签作为选择器,可以是p、h1、dl、strong等HTML标签。如:

a { color: red; }

ul { margin-left: 0; }

标签选择器。使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比*高。

二、id选择器:我们通常给页面元素定义id。如:

#container {

width: 960px;

margin: auto;

}

id是我们最常用的css选择器之一。id选择器的优势是精准,高优先级(优先级基数为100,远高于class的10), 作为javascript脚本钩子的不二选择,同样缺点也很明显优先级过高,重用性差。

三、类(class)选择器:在CSS里用一个点开头表示类别选择器定义,如:

.error {

color: red;

}

这是一个class(类)选择器。class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。

四、群组选择器:当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。如:

p,td,li{

line-height:20px;

color:#c00;

}

#mainp,#siderspan{

color:#000;

line-height:26px;

}

.www_52css_com,#mainpspan{

color:#f60;

}

.text1h1,#siderh3,.art_titleh2{

font-weight:100;

}

使用组群选择器,将会大大的减化CSS代码,将具有多个相同属性的元素,合并群组进行选择,定义同样的CSS属性,这大大的提高了编码效率与CSS文件体积。

五、后代选择器:后代选择器也叫派生选择器。可以使用后代选择器给一个元素里的子元素定义样式,如:

li a {

text-decoration: none;

}

这也是我们最常用的一种选择器——后代选择器。用于选取X元素下子元素Y,要留意的点是,这种方式的选择器将选取其下所有匹配的子元素,无视层级,所以有 的情况是不宜使用的,比如上述的代码去掉li下的所有a的下划线,但li里面还有个ul,我不希望ul下的li的a去掉下划线。使用此后代选择器的时候要 考虑是否希望某样式对所有子孙元素都起作用。这种后代选择器还有个作用,就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。

六、相邻选择器         如:

ul + p {

color: red;

}

相邻选择器,上述代码中就会匹配在ul后面的第一个p,将段落内的文字颜色设置为红色。(只匹配第一个元素)

七、子选择器       如:

div#container > ul {

border: 1px solid black;

}

      子选择器。与后代选择器X Y不同的是,子选择器只对X下的直接子级Y起作用。在上面的css和html例子中,div#container>ul仅对container中最近一级的ul起作用。

      八、相邻选择器           如:

      ul ~ p {

      color: red;

      }

      相邻选择器,与前面提到的X+Y不同的是,X~Y匹配与X相同级别的所有Y元素,而X+Y只匹配第一个。

      3.background属性如何简写?

      例如:.class{  background:   url(img.png)      no-repeat    scroll   color    repeT-x   repeat-y  

      }

      4.文本的属性有哪些?请写出font的复合式写法?

      文本对齐属性(text-align)      left (居左)    right (居右)    center (居中)    justify (两端对齐)

      文本修饰属性(text-decoration)   none (无)  underline (下划线)  overline (上划线)    line-through (当中划线)

      文本缩进属性(text-indent)    length(长度,可以用绝对单位(cm,mm,in,pt,pc)或者相对单位(em,ex,px))percentage (百分比,相当于父对象宽度的百分比)

      font复合式写法顺序:

      font-style(使用斜体、倾斜或正常字体)

      font-variant(设置小型大写字母的字体显示文本)

      font-weight(设置文本的粗细)

      font-size/line-height(设置字体的尺寸和行高)

      font-family(规定元素的字体系列)

      5.text-indent有什么作用?

      表示文本块中首行文本的缩进。允许使用负值。如果使用负值,那么首行会被缩进到左边。

      6.超链接a标签的作用有哪些?

      <a>标签,即超链接标签,它可以实现从一个网页到另一个网页的跳转,或者从页面的一个位置跳到另一个位置,也可以从一个网站跳到另一个网站。

      7.a标签默然样式是什么?

      a   表示所有状态下的连接 如 .mycls a{color:red}

      ① a:link:未访问链接 ,如 .mycls a:link {color:blue}

      ② a:visited:已访问链接 ,如 .mycls a:visited{color:blue}

      ③ a:active:激活时(链接获得焦点时)链接的颜色 ,如 .mycls a:active{color:blue}

      ④ a:hover:鼠标移到链接上时 ,如 .mycls a:hover {color:blue}

      一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。

      前三者分别对应body元素的link、vlink、alink这三个属性。

      四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能设置有无下划线(总是有的)。

      8.什么是盒模型?盒模型包括什么?

      盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

      盒模型:外边距(margin)、边框(border)、内边距(padding)、内容(content)四个属性内容(content)就是盒子里装的东西;而填充(padding)就是怕盒子里装的东西;边框(border)就是盒子本身了。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(div嵌套),填充只有宽度属性,可以理解为生活中盒子每个HTML标记都可看作一个盒子。

      9.padding和margin的区别?

      在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。

      margin和padding的区别用图表示为

      10.什么是margin叠加?什么是margin传递?

      叠加:在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为重合,并且因而所结合成的外边距称为折叠外边距

      传递:父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。

      11.列举几种常见的语义化标签?

      <header></header>     <nav></nav>      <article></article>     <h1></h1>    <h2></h2>

      12.常见的块元素和内嵌元素有哪些?简要说一下它们的区别?

      块级元素 一般用来搭建网站架构、布局、承载内容……像这些大体力活都属于块级元素的,它包括以下这些标签:div、ul、li、dl、dt、dd、h1~h6、p、

      内嵌元素 一般用在网站内容之中的某些细节或部位,用以“强调、区分样式、上标、下标、锚点”等等,下面这些标签都属于内嵌元素:a、span、img、sub(下标)、sup(上标)、strong(加粗)、em(倾斜)、s、i、u……


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

      推荐阅读更多精彩内容

      • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
        _Yfling阅读 13,725评论 1 92
      • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
        程序员poetry阅读 16,510评论 32 459
      • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
        Simon_s阅读 2,219评论 0 8
      • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
        PYLON阅读 3,192评论 0 5
      • 上午在方庄的宣教课,下午看了个电影后进行了销售培训(洗脑) 感觉外记越来越有感觉了,也没有那么难了,自己也变得外向了好多
        小刘碎碎念阅读 249评论 0 0