HTML第二天

HTML-day02

回顾:

HTML结构

常用标签 比如<form>, input , a

标签:行级,块级,行内块

 

一.页面布局

1.div 盒子模型,固定翼页面布局的一块区域范围

<div></div>,块级标签

与table表格布局:整齐,规则,需要行和列,布局死板

 

2.css

1)内联样式,行内样式

写在标签内,通过style属性定义样式

<div style="width: 1000px; height: 500px; background: blue">
</div>

2)内部样式

写在<style></style>标签中,<style>标签中定义样式

需要样式选择器,选择body中的标签

样式选择器类型

A.  通配符选择器:定义页面中的所以标签:

*表示所有标签

*{ 样式:属性值}

EG: /*css 注释*/
/*通配符:一般清除页面中margin和padding的值*/
*{ color: blue;  margin: 0;  padding: 0; font-family:宋体; }

B. 标签选择器:通过标签来定义所有此标签的样式

 标签{属性:值}

/*标签*/
ul{  width:1000px;  height:50px; background-color: white;}
li{ font-family: 微软雅黑}

C. 类选择器:通过class定义类名,通过类名来定义样式

<标签 class=”类名”></class>

.类名{ 属性名:值}

Eg:

    <li class="c1">类选择器</li>

      /*类*/
   .c1{ color: green;}

D. id 选择器:通过id属性定义 id名,通过id名定义样式

id前缀是#

<标签 id=”名字”>

#id 名字{属性:值}

Id选择器的名字是唯一的,不能重复

Eg:

 <li id="d1" class="c1 c2">类选择器组合使用</li>

/*id*/
    #d1{ color: fuchsia;}

E.分组选择器:同时定义多个选择器

选择器1,选择器2,选择器3{ 属性:值}

注意:通过逗号分隔选择器

#id1,#id2,.c1{ 样式}

/*分组*/
    .c2,#d1{  border:1px dashed greenyellow;}

注意:样式重复优先级:通配符<标签<类<id<内联

F.派生选择器 :指派标签中,需要定义的标签的样式

父级标签 标签{ 属性:值}

Div li{}

/*派生 : 指派定义div 中的 p标签的样式*/
    div p{  width:100px;  height:100px;  border:1px solid green;}

G.伪类选择器:定义样式的效果

样式效果:hover 鼠标悬停,focus获取鼠标焦点

选择器:效果{ 样式}

比如hover

#d1:hover{}—当鼠标悬停到#d1标签上,定义#d1的样式

Eg

#d1:hover{ font-size: 88px;}

注意

/*当鼠标悬停到div标签上时,定义的是div标签中的#input标签*/
    div:hover #inp{  width:200px;  height:100px;}

3)优先级

样式重复,需要考虑优先级问题

注意:样式重复,优先级:通配符<标签<类<id<内联

派内选择器:

父级选择器 子类选择器(样式)

<style>
    #d1 a{ font-size: 30px;}
    /*使用派生选择器,优先级,要注意添加父级选择器,不然没有优先级效果*/
    #d1 .ca{ font-size: 50px;}
    #d1 #da{ font-size: 80px;}
</style>

<div id="d1">
    <aid="da" class="ca" href="javascript:;">超链接</a>
</div>

 

3.外部样式

写在css样式文件中,在html文件中通过link标签引入

1.  创建css文件

 

2.  通过link标签引入css文件

<link href="css02.css" type="text/css" rel="stylesheet">

href:引入文件的路径

type:引入文件的类型

rel:引入文件与本文件的关系

stylesheet:级联样式表

text/css:文本样式类型

 

3. 在css样式文件中通过选择器定义样式

<link href="../html01/image.png" rel="icon">

icon:关系是标题小图片

 

二.     盒子模型设置

1. padding

在本区域中,设置内容与标签的距离

  距离边框的方向:top,bottom,left,right

    1)padding-方向:距离;    padding-left:30px;

    2)padding:值1;   内边距距离四个方向是值1的距离

      padding:值1 值2; 上下方向是值1,左右方向是值2

      padding:值1 值2 值3;上方向是值1,左右方向是值  2,下方向是值3

    padding:值1 值2 值3 值4  四个方向,上右下左

  注意:使用内边距padding,标签范围会变大,注意页面布局

 

2. margin

外边距:标签以外的距离,本标签与其它标签的距离

       距离边框的方向:top,bottom,left,right

设置方式:与padding类似

1)  margin-方向

2)  margin:值

margin: auto; 让块级标签居中

auto:自适应

 

 

 

 

 

 

 

三,定位

Position:标签的位置属性

属性值:static(默认) , relative , absolute , fixed

1.  static(默认):默认定位,静态定位,系统自动生成

2.relative;相对定位:相对于标签原位置的左上角进行定位

与定位的方向:top , bottom , left . right 结合使用

相对于标签原位置的左上角进行定位

保留标签原位置

 

3.absolute;  绝对定位

     (1)默认:以页面body的左上角

     (2)当 父标签 的position不是static时,以父标签进行定位

     (3)不保留原位置

 

4.fixed 固定定位,确认定位(小广告)

(1)以整个页面整体进行定位

(2)不会随着滚动条滚动发生位置变化,固定在页面中

(3)不保留位置

 

 

 

四,隐藏,溢出

隐藏:display(不保留位置的异常) 和 visibility(保留位置的隐藏)

display:none 隐藏 / block 显现

visibility:hidden 隐藏/visible 显现

 

溢出:overflow;标签中的内容超出了标签范围默认是可见

Overflow

overflow: hidden/visible/scroll; 溢出的内容隐藏/显现/以滚动条方式查看

 

层级:z-index

处理标签显示,覆盖优先级

z-index的值越大,层级越高

z-index:正整数

 

五.其他常用属性设置

1.边框

border:颜色大小样式

边框是占用px位置空间的

border:1px solid red

solid:实线   dashed:虚线

border-radius:大小值;设置标签中边框四个角的弧度,圆角

border-top-left-radius: 设置左上角的弧度

border-bottom-right-radius: 设置右下角的弧度

2.  轮廓

与边框是一致的 , 区别:轮廓不占用空间,边框占用空间

Outline : 1px solidred

与边框是一直,区别:轮廓不占用空间,边框占用空间

 

总结:

Css级联样式表

常用属性设置