大一上学期前端HTML和CSS总结第一部分

比较乱

• 用link引入：<link rel="stylesheet" href="css路径"/>
• <img id="img " src="图片地址" width="200px" height="200px"/>
• border-style: dotted solid double dashed;//上边框是点状，左边框是虚线，下边框是双线，右边框是实线
• font-style 字体风格 font-weight 字体粗细 font-size 字体大小 font-family 字体样式 color 字体颜色 text-shadow 阴影颜色 line-height 字体行高 letter-spacing 字间距
• 文本修饰:text-align:left/right/center
• 背景样式:background-color:yellow;background-image:url(url)none;
• 框架样式:边界留白-margin-top margin-bottom margin-left margin-right 边界补白 padding-top padding-bottom padding-right padding-left 边框颜色 border-color

第二张的笔记

• 什么是css语法？
• css是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。css语法由三部分构成:选择器，属性和值。
• 选择器通常是你希望定义的HTML元素或标签
• 属性是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明

列举常见的css选择器？

• id选择器：同一页面不能重名，样式表内的标识是#

• 类(class)选择器：同一页面可以重名。样式表内的标识是：calss：同一元素可以有不同的名字，用空格隔开。代码如下<p calss="box box2">div2</div>class同时有两个类型：box box2

• 类型(标签)选择器：在style内直接设置如:div{…} p{…}

• 包含(后代)选择器：在style内设置如#box p{...}

• 群组选择器：在style内设置如：div,span{...}

• 通配符 *：代表所有的标签
  background属性怎么简写？

• background:url(img/img.gif) no-repeat #ccc fixed 100px 100px;顺序随意调换，但background-position中的x,y属于一个整体两者之间不能换位，中间不能有其他属性
  文本的属性有哪些？请写成font的复合式写法？

• font-size：字体大小

• font-weight：文字是否加粗 bold：加粗normal：正常

• line-height：行高（每行文字的高度，文字上下居中）

• font-style：文字样式 italic斜体 normal正常

• font-family：“宋体”；改变字体

• font（复合样式）：顺序不能改 font:font-weight font-style font-size font-familyfont中两个必写项：font：font-size font-family
  text-indent有什么作用？
  text-indent：首行缩进(1em=一个字体大小)
  超链接a标签的作用有哪些？、
  a标签：<a href="网页地址">网页名</a> <a href="页面地址">跳转页面

• < a href=“压缩包地址”>下载

• <a href=“id”–直接跳转到id所在位置（锚点）
  a标签的默认样式是什么？

• a标签：<a href="网页地址“>网页名</a>

• a标签默认带有下划线，显示颜色为蓝色，被访问过后超链接变紫色。要清除链接样式一般可以设置：a{text-docoration:none;color:#colorname;}
  什么是盒模型？盒模型包括什么？
  网页设计中常听的属性名：内容（content）填充（padding）边框（border）边界（margin）css盒子模式都具备这些属性
  padding和margin的区别？

• padding：内填充（padding在元素的边框以里，内容以外，padding同样显示元素的背景）

• margin：外边框（margin元素的边框以外，不显示元素背景）
  什么是margin叠加？什么是margin传递？
  margin叠加：相邻两个元素的上下margin是叠加在一起的（当垂直外边框相遇时，它们将叠加，叠加的高度取较大的。）
  margin传递：子元素的上下margin会传递给父级
  列举几种常见的语义化标签用来整体布局

• section：版块，用于划分页面上的不同区域，或者划分文章里的不同节。

• nav：导航（包含链接的一个列表）

• header：页面头部或者板块（section）头部

• footer：页面底部或者板块（section）底部

• article：可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可以互动的页面模块挂件等

• aside：元素标签可以包含与当前页面或者主要内容相关的引用，侧边栏，广告。nav元素组，以及其他类似的有别于主要内容的部分

• em：强调一个词或一段话 。倾斜

• strong：加粗

• img：图片 ![ ](图片路径）
  常见的块元素和内嵌元素有哪些？

• 块元素的代表

  ：有自己独立占据一行。支持所有的样式。不设宽度的时候，宽度撑满整行块标签。

块标签

<div>块</div>
<section>划分页面板块</section>
<header>头部</header>
<footer>底部</footer>
<nav>导航</nav>
<article></article>
<aside>article的附属</aside>
<ul>
	<li>无序列表</li>
	<li>无序列表</li>
</ul>

<ol>
	<li>有序列表</li>
	<li>有序列表</li>
</ol>

<dl>
	<dt>定义列表项目</dt>
	<dd>dt的展开描述</dd>
</dl>

<h1>标签</h1>
<p>段落</p>
	

内嵌元素

内嵌元素代表：可以在一行显示。不支持宽度，对上下的padding和margin等的样式支持也有问题。宽度由内容撑开。代码换行会被解析出来（宋体的情况下，空格占字体大小的一半）
内嵌元素

<span></span>
<strong></strong>
<em></em>
<a href="#">链接</a>