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

2017-01-18  本文已影响0人  浅夏若凉

简要笔记

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……


上一篇 下一篇

猜你喜欢

热点阅读