2-1div、span、ul、ol、li 标记及css的调用方式

来源：互联网发布：抗韩中年人淘宝店网址编辑：程序博客网时间：2024/05/18 01:52

知识点：

一、 div 、span、 ul、 ol、 li 标记

二、css概述

三、css的调用方式

四、css的选择器

五、css中具体的样式

六、 demo 当当网页

一、 div、span、ul、ol、li 标记

常用的web2.0思想中的标记

1、div

注意：div独占一行

2、span

3、ul、ol 一组

<ul type="square 正方形 circle圆圈 disc实心点"> 无序列表

<li>今天天气不错</li>

<li>明天天气也不错</li>

<li>后天天气仍然不错</li>

</ul>

<ol type="1 a i I"> 有序列表

<li>今天天气不错</li>

<li>明天天气也不错</li>

<li>后天天气仍然不错</li>

</ol>

二 css概述

1>什么是css

css层叠样式表替代属性的不用写在标记中

实现表现与结构分离, 便于管理，使页面整洁

2->web2.0

table 架构页面

web2.0 div+css架构页面****

html5 css3 在web2.0思想上添加了一些内容

三 css的调用方式

1》css格式

{样式名称: 样式值；样式名称: 样式值；样式名称: 样式值；样式名称: 样式值；............}

2》html页面中如何调用css 表现和结构分离

A标记上直接使用style属性来调用样式

<标记 style="样式名称：样式值;样式名称：样式值;样式名称：样式值;样式名称：样式值;.......">

style属性所有标记都有

B html页面中的内嵌样式

                          </head>
                                <style type="text/css">
                                </style>
                           <body>

C 外部调用样式

index.html----->index.css 样式文件

</head>之前

四、css选择器在页面中找到元素

1、使用选择器的格式

选择器{样式名称：样式值;样式名称：样式值;样式名称：样式值;样式名称：样式值;...............}

2、css中的六种选择器

1》通配选择器选择页面上的所有元素

*{ }

2》标记选择器

标记名称{ } 具有相同标记名称的元素

3》 class 选择器选中具有相同class 属性的元素

.className{ } 选择同类的不同名的元素

4》 id选择器

#id{ } 选择具有相同id的元素

5》群组选择器:

#id, .className ,标记名称............{ }

6》派生选择器

父选择器子选择器

五、css中的具体样式

1》 boder width height

border: 粗细 solid(实线) 颜色元素边框

width: 像素值

height: 像素值

2》布局属性

padding：上右下左内边距注意：padding会改变元素的内外宽度

padding-top: 像素

padding-right:像素

padding-bottom：像素

padding-left：像素

注意：padding : val; 表示上右下左都是五十。以上和左为主的位置。

margin：外边距上右下左注意：margin不会改变外边元素的大小的

margin-top:像素

margin-right:像素

margin-bottom:像素

margin-left:像素

margin: 50px; 以上边和左边为主

margin: auto 水平居中****

float: left，right 浮动元素的。独占一行的特性消除掉（div具有独占一行的特性）

clear: both；消除前后元素浮动所带来的影响的

display: none 或block 控制显示隐藏元素的

3》背景属性：

background-color: 背景色

background-image:url(img/1.png); 背景图：如果背景图的宽高小于元素的宽高背景图横向和纵向平铺

background-repeat: no-repeat不平铺 repeat-x 横向平铺 repeat-y 纵向平铺

background-position: x(正向右负向左), y(正向下负向上): 调整背景图的位置

background: color image repeat 附着方式位置

4》字体属性：

font-size: 像素值：大小

color：颜色

font-style: normal italic斜体

font-weight: 100------900 900==bold 字体的粗细

font-family: 文本书法体

text-align : left center right 水平位置

line-height: 行高

font： style weight size line-height famliy

5》边框属性：

border：1px solid #ff0000;

单独指定哪个位置的边框：

border-top: 粗细线体颜色

border-right:粗细线体颜色

border-bottom: 粗细线体颜色

border-left: 粗细线体颜色

6》列表

list-style:none;//消除列表前面的小黑点

list-style-image:url(img/1.png); 列表中的标识，可以是图片。

7》其他的常用样式

text-decoration:文本修饰线 line-through underline

四种状态：超链接样式伪类

刷新状态：link{}-->不太支持 a #id .className{样式}

鼠标移动上去的状态：hover{}

鼠标单击的状态 :active{}

单击过后的状态 :visited{}

阅读全文

0 0