HTML 和CSS 语言

HTML即超文本语言

1、基本标签

<hn>   n的取值范围是1~6;从大到小,用来表示标题

<p>  段落标签,包裹的内容被换行,并且上下内容之间有一行空白 div 标签里面不能包含 div标签

<b> <strong> 加粗标签

<strike> 为文字加上一条中线

<em> 文字变成斜体

<sup>和<sub> 上角标和下角标

<br> 换行

<hr> 水平线

<div><span>   换行标签

2、图形标签

<img>

src: 要显示图片的路径

alt:图片没有加载成功的提示

title:鼠标悬浮时的提示信息

width:图片的宽

height:图片的高(宽高的两个属性只用一个自动等比缩放。)

3、超链接标签(锚标签)

<a></a>

其属性有:

href:要链接的资源路径   格式如下:href=‘http://www.baidu.com"

traget:_blank; 在新的窗口打开超链接,框架名称:在指定框架中打开连接内容

name:定义一个页面的标签

4、列表标签:

<ul>无序列表<ul>

<ol>有序列表<ol>

<d1>定义列表</d1><dt>列表标题</dt><dd>列表项</dd>

5 、表格标签

<table></table>

其属性有:

border:表格边框

cellpadding:内边距

cellspacing:内边距

width:像素
   <tr>:table row 

  <th> 标题

    <td> 表格数据

6、表单标签

<from></from>

表单的标签中包含很多的其他标签

例如  <input  type=''> 有很多的标签

如 text(文本) submit(提交)

 

CSS ,层叠样式表,用来控制网页数据的表现,可以是网页的表现与数据内容分离,

CSS的引入

 行内式,对单个标签的style属性进行设定,用的很少,不推荐使用

嵌入式

 将CSS的样式集中写在网页的<head></head>标签的<style></style> 标签中   好像目前都是这么用的

导入式

导入css文件,将一个独立的CSS文件导入HTML文件中,用的也不多

连接式

使用link href=’mystyle.css"  这个和导入式的思路一样,但是他加载网页时的是时候,会判断css样式,不是显示出原始的HTML网页,在加载css样式,用户体验好,推荐使用

 

CSS选择器

1、什么是选择器

选择器 指明了{} 中我们定义的样式的作用对象,也就是“样式”作用网页中的那些元素

2、选择器的分类?

* 通用元素选择器,匹配任何元素 

E 标签选择器,匹配所有的使用的E的标签元素

.info和E.info   class 类选择器,匹配所有的calss属性中包含info的元素,

组合选择器

 多元素选择器:同时匹配多个元素,元素之间使用逗号分隔。div,p

后台元素元素选择器: 匹配所有属于 A元素后代的C元素,A和C之间用空格分隔  A B

子元素选择器;匹配A元素的所有子元素B   A>B

属性选择器

E[ATT]:匹配所有具有att属性的e元素,不考虑他的值

E[ATT=ALL] 匹配所有att属性的等于val的元素

E[att~=all] 匹配所有att属性具有多个空格分隔的值、其中一个值等于‘val’的元素

E[att|=val]匹配所有att属性具有多个连字符分隔的值,其中一个值一val开头的E元素

p:before  在每个<p>元素的内容之前插入内容。

p:after    在每个<p>元素的内容之后插入内容

伪类选择器(专用于控制链接的显示效果)

a:link  未点击时的效果

a:hover    鼠标放置页面啦,产生视觉效果

a:visited (已访问过的链接状态) 用于阅读文章,能清楚的判断已经访问过的链接

a:active(在链接上按下鼠标的状态)用于表现鼠标按下时的链接激活的状态

1、颜色属性

2、字体属性

3、背景属性 (如果给body上加入背景的属性,要给body上加上一个height 和一个width)

4、文本属性

  font-size:10px 自动大小

  text-align:center :横向排列

  line-height 200px  文本行高 文字高度加文字上下空白区域的高度 50%;基于字体大小的百分 这个设置如何和class的模型一样的话,文字会跑到中间

5、边框属性

6、列表属性

7、display属性

dispay :none 为隐藏标签

inline 将块级标签转换为内联标签

block 会将内联标签转换为块级标签

position :fixed 表示已经元素飘起来,并固定在页面的某个位置。最厉害的,没人能管他
z-index:表示层数的优先级,越大,表示约在外层显示
position:relative 元素框偏移某个距离,他原本所占的空间仍然保留 相对定位
position:absolute 元素框从文档流中飘起来,然后移动某个位置,位置是相对于父级标签的。 要配合relative使用
如果父级标签没有relatve,就跟fix一样的
漂浮的方式有好多种,不一定float,个人感觉灵活运用了 relative和absolute 效果会更好
要有分层和盒子的概念
overflow: auto :上下有滚动条
overflow: hidden 隐藏
overflow: scroll; 上下左右有滚动条
overflow: inherit; 继续往下冲
overflow: hidden; 隐藏
transparent 透明色
background: rgba(0,0,0,.4) 透明色 opacity: 0.6; 透明度 60%
display:inline 转换成内联标签 所有的高度、宽度的样式失效,margin也失效
display:inline-block 内联标签,但是也有块级标签的有点
block 对于margin-top 等于赋值,允许继续往上走

.a1:hover 表示鼠标移动到a1的标签时,a1标签里面的内容发生了变化
.a1:hover .a2 表示鼠标移动到a1时,a2是a1的子标签,然后内容也放生了变化

top 距离也可以写百分比

posted on 2016-08-07 19:11  05_小翼  阅读(237)  评论(0编辑  收藏  举报

导航