IT新手入门,零基础学IT,转行做IT,IT行业的职位选择,你我一同探讨!

IT新手入门网给你介绍IT行业的职位有哪些,让你转行做IT不发愁,IT入门有捷径

当前位置: 主页 > 技能提升 > PHP开发 > html5基础及css介绍(第二天)

html5基础及css介绍(第二天)

时间:2017-01-18 08:22来源:原创 作者:恪己 点击:
一、HTML5 1.有序列表、无序列表、定义列表 有序列表(Ordered List) ol type=1|a|A|i|I start=起始编号 li.../li ... /ol 无序列表(Unordered List) ul type=disc|square|circle li.../li ... /ol 定义列表 dl dt.../dt dd..
一、HTML5学习
1.有序列表、无序列表、定义列表
有序列表(Ordered List)
<ol type="1|a|A|i|I" start="起始编号">
  <li>...</li>
  ...
</ol>
无序列表(Unordered List)
<ul type="disc|square|circle">
  <li>...</li>
  ...
</ol>
定义列表
<dl>
<dt>...</dt>
<dd>...</dd>
...
</dl>
建议:
A.开发时尽量将相关的内容置于一个容器内;
B.开发时必须通过CSS样式去掉有序列表/无序列表默认的标志;
2.链接
2.1 链接的标记
<a href="目标文档URL" target="窗口形式">...</a>
窗口形式:
_self:在自身窗口打开(默认)
_blank:在新窗口打开
_parent:在父窗口打开
_top:在顶窗口打开
framename:在指定的frame/iframe中打开
二、CSS3
1.什么是CSS?
CSS(Cascading Style Sheets),层叠样式表
CSS的最新版本为CSS3
2.CSS有什么用?
CSS可以快速维护页面元素(如文本、图像、链接等)的表现(如字体、字号、颜色、背景、边框等)。
3.CSS的应用方式 -- 内部样式
<style type="text/css">
  selector{
   attribute[属性]:value[值];
   attribute:value;
   ...
  }
  ...
</style>
4.css中的选择器(selector)
4.1 类型选择器(Type Selector) --- Element
    说明:类型选择器将自动应用给指定的HTML元素。
4.2 ID选择器[Identifier(标识符)] --- #id
    说明:
    A.ID选择器必须手动应用给文档中唯一的HTML元素;
    B.手动为HTML元素添加 id="ID" 属性;
       HTML5文档的合法性验证
       http://validator.w3.org
    C.目前实际开发过程中,ID属性主要被JavaScript或jQuery引用;
4.3 类选择器  --- .class
    说明:
    A.类选择器可手动应用给任何的HTML元素;
    B.手动为HTML元素添加 class="class" 属性;
    C.多个类名称之间以空格分隔;
4.4 后代选择器 --- 选择器 选择器 ...
    A.选择器之间至少为父子关系;
    B.建议选择器关系不要超过三层;
5.文本样式
color
描述:设置文本颜色
语法:color:value;
font-size
描述:设置文本字号
语法:font-size:value;
建议:标题字号:24px ~ 36px;正文字号:12px ~ 16px
font-family
描述:设置文本字体
语法:font-family:value,value,...;
text-align
描述:设置文本的水平对齐方式
语法:text-align:left|center|right;
line-height
描述:设置行高
语法:line-height:value;
建议:行高一般设置为1.5em ~ 2em
text-indent
描述:设置首行缩进,可以为负值
语法:text-indent:value;
建议:首行缩进设置为2em
font-weight
描述:设置文本的加粗
语法:font-weight:normal|bold;
font
描述:设置文本样式
语法:font:字号/行高 字体,...;
6.列表样式
list-style-type
描述:设置列表标志的类型
语法:list-style-type:none;
list-style-image
描述:设置列表的标志图像
语法:list-style-image:url(图像URL);
list-style-position
描述:设置列表标志的显示位置
语法:list-style-position:inside|outside;
list-style
描述:设置列表的样式
语法:list-style:type url(图像URL) position;
说明:开发时关于列表的样式,一般定置如下
ul,ol{
list-style:none;
}
7.背景样式
background-color
描述:设置背景颜色
语法:background-color:value;
background-image
描述:设置背景图像
语法:background-image:url(图像URL);
background-repeat
描述:设置背景图像的重复方式
语法:background-repeat:repeat|no-repeat|repeat-x|repeat-y;
background-position
描述:设置背景图像的位置
语法:background-position:x y;
x的取值有:left|center|right|value
y的取值有:top|center|bottom|value
8.布局样式
width
描述:设置对象的宽度
语法:width:value;
height
描述:设置对象的高度
语法:height:value;

     

------分隔线----------------------------
栏目列表
推荐内容