One:Html基础与Css基础

HTML的总体结构

文件类型 <HTML></HTML>(放在档案的开头与结尾)

三个文档级元素:

文件主题<TITLE></TITLE>(必须放在「文头」区块内)

文头<HEAD></HEAD> (描述性资料,像是「主题」)

文体 <BODY></BODY> (文件本体)。

一、添加HTML文档正文:

1,标题可以用<h1--h6>表示;

2,<p>标签可以定义一个段落;

3,<blockquote>定义引用文本;

4,定义序列ol有序列表,ul无序列表,di自定义

5,定义预编译文本<pre>

6,定义分区块文本<div>

7,跨越多个字符<span>

8,特殊字符&nbsp(空格),&lt(左<括号或者小于),&gt(右>括号或大于),

&copy(版权符号c),&reg(已注册符号R),&amp(and符号&),&#151,(长破折号)。

9,<a>标签超链接,<a>标签路径后#(名字)就跳转到#。

10,<img>图片

11,表格状数据<table><tr><td>

12,<ifame>嵌入网页内容,width,height框架的宽和高,frameBorder区域边框宽度选择0或1。

13,输入控件:

input该元素使用type属性ding

select和option二者组合使用,创建一个下拉表。

textarea创建一个多行输入文本框。

1),文本框:<input>元素的<size>和<maxlength>来控制长度和最大字符数

2),口令输入框: password字符显示为星号

3),复选框和单选框:checked默认选中,checkbox复选,radio单选。name相同可以多选一效果。

4),隐藏字段:hidden。

5),文件上传控制:file。

6),下拉列表:<select>元素多个<option元素>

7),提交和重置按钮:submit提交,reset清楚。

8),命令按钮:button.

9),fleldset和legend元素:细边框的盒子

CSS基础

盒模型

1, width,height宽和高

2, margin外边距

3, 表框border

4, 内边距padding

5, 浮动元素 float属性

6, 清楚浮动影响 clear

定位

通过position属性

1, 静态定位(staic) 

2,相对定位(relativa)  

3,绝对定位(absolute) 

4, 固定定位(fixed)

1、CSS属性单位: 
(1)常用的长度单位有哪些?分别用在哪里? 
绝对长度:cm,mm,pt  
相对长度:px(边框),em(文本内容,边距),ex 


(2)常用的颜色单位的表示方式有哪些? 
百分比:rgb(50%,0,0) 
0-255之间的数值表示:rgb(0,0,255) 
十六进制数字:#ff00ff 
简化十六进制数字:#fff 
颜色的英文名称:white 
  
2、举例设置元素内容的字体 
(1)举例设置字体名称 
(2)举例设置倾斜程序 
(3)举例设置字体的变体 
(4)举例设置字体的字重 
(5)举例设置字体的大小 
font: italic small-caps bold 2em 宋体;  


3、设置元素内容的文本属性 
(1)举例设置文本首行缩进 
   text-indent:2em; 


(2)举例设置文本对齐方式 
   text-align:left | right | center; 


(3)举例设置文本修饰方式 
   text-decoration:underline; 


(4)举例设置行高 
   line-height:1.5em; 


(5)举例设置字间距 
   letter-spacing:2em; 


(6)举例设置词间距 
   word-spacing:0.5em; 


(7)举例空白显示形式 P56 
   white-space:pre; 


4、设置元素的字体颜色及背景 
(1)举例设置字体颜色  
color:red; 


(2)举例设置一个背景图片,样式为不平铺(x轴方向平铺)、定位于左上角 
background:blue url(img/bg.jpg) no-repeat left top; 


5、用嵌入CSS样式的方式来设置树型目录 
样式表部分:navi.css 
ul li { 
   list-style-image:url(img/file.jpg); 
   border-right:1px solid gray; 



head中的部分: 
<link rel="stylesheet" type="text/css" href="css/tree.css" /> 


body中的部分: 
<p> 
  <img src="fileDiv.jpg"> 
  <a href="#">产品介绍</a> 
</p> 
<ul> 
  <li><a href="#">产品1</a></li> 
  <li><a href="#">产品2</a></li> 
  <li><a href="#">产品3</a></li> 
</ul> 


6、盒模型包括哪些部分? 
border,margin,padding,width,height. 
这些属性可以以三种方式来设置值。 
四个属性值时,代表: 上    右   下  左 
三个属性值时,代表: 上    左右 下 
二个属性值时,代表: 上下  左右 
一个属性值时,代表: 所有方向 


外边距margin:围绕在元素边框之外的可选区域。 
内边距padding:文本内容到边框之间的可选区域。 


<span>等文本类型的内嵌元素,设置顶部和底部外边距不会影响行高, 
而设置左、右外边距将会导致内嵌元素的第一个字符之前以及最后一个字符之后保留一定数量空间。 


边框border的样式有哪些? 
border-style:none; 
border-style:dotted;//小圆点 
border-style:solid;//直线 
border-style:double;//双直线 
border-style:dashed;//虚线 


7、元素浮动属性: 
float:left;   //向左浮动 
float:right;  //向右浮动 
float:none;   //不浮动 


清除浮动: 
clear:none;  //允许元素的两边都可以有浮动 
clear:left;  //不允许左边有浮动元素 
clear:right; //不允许右边有浮动元素 
clear:both;  //两边都不允许有浮动元素 


8、定位类型position 
position:absolute;   
//绝对定位:相对于最近的已定位祖先元素,若没有,则相对于最初包含块。 
position:relative;  
//相对定位:相对是父级或相邻的元素。 
//原始空间会保留下来。 


9、指定裁剪区域 
position:absolute; 
clip:rect(top right bottom left); 


top:从上到下裁去top的长度。 
left:从左到右裁去left的长度。 


right:从左到右裁出right的长度。 
bottom:从上到下裁出bottom的长度。 


10、设置元素的可见性 
(1)写出display:none;与visibility:hidden;区别,与共同点? 
共同点:都可以不显示指定的元素。 
区别:前者不保留原有的显示空间,后者保留原有的显示空间。 


(2)如何将块级元素转化为字符级元素? 
display:inline; 


(3)如何将字符级元素转化为块级元素? 
display:block; 


11、处理溢出 
position:absolute; 
overflow:visible;  //溢出区域可见 
overflow:hidden;   //溢出区域不可见 
overflow:scroll;   //溢出区域出现滚动条 


12、z-index:8; 
值越大,显示的位置越靠前 


13、优先级 
内联式>嵌入式>外部样式>用户浏览器方式 
内联样式>id选择器>类选择器>元素选择器/伪元素选择器>通配符选择器 

转载于:https://my.oschina.net/u/1040734/blog/127871

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值