简要笔记
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……