- 什么是css语法?
首先CSS 规则由两个主要的部分构成:一个是选择器,另一个是声明。
举例如下:
#p —— /*css选择器——选择器通常是您需要改变样式的 HTML 元素。*/
{
color: #cfcfcf;/*声明——每条声明由一个属性和一个值组成。
属性是你希望设置的样式属性。每个属性都有一个值。*/
}
- 列举常见的css选择器?
我把我们所熟知的css选择器简单的分成四类:标签选择器、类选择器、id选择器和通用选择器。
(1)标签选择器
一个完整的html页面由许多不同的标签组成,e.g. div、p,而标签选择器,则是决定哪些标签采用相应的CSS样式。
a{ height:200px;width:200px;background:red;}
(2)类选择器
用符号“.”是页面中某些标签具有相同的样式
.div{height:200px;width:200px;background:red;}
(3)id选择器
用符号“#”对某个定义后的标签进行描述
#div1{height:200px;width:200px;background:red;}
(4)通用选择器
用符号“*”,对整个网页中所有HTML标签进行样式定义,这种功能类似“标签选择器”,覆盖的对象更加广泛
*{ margin:0;padding:0;}
- background 属性如何简写?
e.g.
background:url(.jif/.pnf格式的背景图片链接)
red(关键字)/#cfcfcf(16进制)
no-repeat(不平铺)/normal
fixed(固定)/scroll(可滚动)
0px 100px(位置,也可用百分数及关键字表示)
- 文本的属性有哪些?请写出 font 的复合式写法?
行高:line-height:10px;
字体:font-family:"此处输入可识别的字体格式";
文字大小:font-size:5px;
文字加粗:font-weight:bold(加粗)/normal(正常);
文字形态:font-style:italic(文字倾斜)/normal(正常);
首行缩进:text-indent:2px;
文本对齐:text-align:left(左对齐)/center(居中)/right(右对齐);
文本修饰:text-decoration:underline(下划线)/line-through(删除线)/over-line(上划线)/none(无);
字母间距:letter-spacing:10px;
font的叠加:```
font: bold italic 5px/10px "宋体";
注:其中必须要设置字体大小和字体!
- text-indent 有什么作用?
起首行缩进的作用
e.g.`text-indent:2em;`
- 超链接 a 标签的作用有哪些?
1.跳转页面
e.g. ` <a href="http://www.baidu.com"></a>`
2.下载压缩包
e.g. ` <a href="压缩包链接"></a>`
3.“锚点”
e.g. `<a href="www.souhu.com#souhu-search" >搜狐</a>`
直接跳转到搜狐的id上
- a标签默认样式是什么?
a标签的默认样式有下划线,即
` <a text-decoration:underline> </a>`
- 什么是盒模型?盒模型包括什么?
在网页中,一个元素的是由四部分组成的:内容(conten)、边框(border)、外边距(margin)、内边距(padding),这四部分组成了盒模型。
示例图如下:
![114eae2d5c8[1].jpg](http://upload-images.jianshu.io/upload_images/3536462-86fb19a1d8232119.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- padding和margin的区别?
padding为内填充/内边距,是内容与边框的距离。margin为外填充/外边距,是边框与其他元素的距离。padding纵向不可取负数,margin纵向可以取负数。margin:0 auto 是使边框在可视区域居中,而padding:0 auto是使content相对于边框居中。
- 什么是 margin 叠加?什么是 margin 传递?
margin叠加是指,有两个元素的margin重叠在了一起,但由于规则重叠部分的图像只能显示较大值的margin
父级元素没有设置margin,子级元素设置了margin,则父级元素显示子级元素的margin,即子级元素的margin传递给了父级元素
- 列举几种常见的语义化标签?
语义化标签就是尽量使用有相对应的结构的含义的Html的标签,常见的有
<header>元素描述了文档的头部区域
<nav>标签定义导航链接的部分。
<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<article> 标签定义独立的内容。
<aside> 标签定义页面主区域内容之外的内容(比如侧边栏)。
<figure>标签规定独立的流内容(图像、图表、照片、代码等等)。
<footer> 元素描述了文档的底部区域.
- 常见的块元素和内嵌元素有哪些?简要说一下它们的区别?
常见块元素
<div>画格子</div>
<header>页眉</header>
<nav>导航</nav>
<section>划分页面板块</section>
<footer>页脚</footer>
<article>article</article>
<aside>article的附属</aside>
<ul>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
</ol>
<dl>
<dt>定义列表的项目</dt>
<dd>dt的展开描述</dd>
</dl>
<h1>标题</h1>
<p>段落</p>
常见内嵌元素
<span></span>
<em></em>
<a href="#">链接</a>
区别1: 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素:
<div><h1></h1><p></p></div> —— 对
<a href=”#”><span></span></a> —— 对
<span><div></div></span> —— 错
区别2:块级元素不能放在p标签里面:
<p><ol><li></li></ol></p> —— 错
<p><div></div></p> —— 错
区别3:块级元素可独占一行,内嵌元素可以在一行显示
区别4:块级元素支持所有样式,内嵌元素不支持宽高,对上下的margin和padding等样式支持也有问题
区别5:块级元素在不设置宽度的时候,宽度撑满整行,内嵌元素宽度由内容撑开
区别6:块级元素换行无效,内嵌元素还行会被解析
按照惯例,总结我还是贴图吧【...笑】
![1.png](http://upload-images.jianshu.io/upload_images/3536462-be2607ea605064ae.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![
![3.png](http://upload-images.jianshu.io/upload_images/3536462-2d8ec6c2f2486f23.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](http://upload-images.jianshu.io/upload_images/3536462-23352f65129ea6dd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![4.png](http://upload-images.jianshu.io/upload_images/3536462-fa6745354a35b560.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![5.png](http://upload-images.jianshu.io/upload_images/3536462-3257e5370d62f84c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![6.png](http://upload-images.jianshu.io/upload_images/3536462-5a5aad514d00620f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![7.png](http://upload-images.jianshu.io/upload_images/3536462-690c331f60c747b4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![8.png](http://upload-images.jianshu.io/upload_images/3536462-e2de7547bfe44312.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![9.png](http://upload-images.jianshu.io/upload_images/3536462-4c24c4fe5ac81339.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
好啦,总结完毕!撒花*★,°*:.☆( ̄▽ ̄)/$:*.°★* 。