div与span
div、span标签它们仅仅是用来封装数据,而不做任何的样式效果的设置
什么是div
div就是html一个普通标签,进行区域划分。特性:独自占一行,独自不能实现复杂的效果。需要结合css样式进行渲染。
div通常是块级元素
什么是span
也是一个html普通标签,特性:共处一行。用来对行内元素进行美化
css样式
css使用的基本语法:
<标签名 style="样式名1 : 样式值1；样式名2 : 样式值2；…" ></标签名>
1、 color 设置字体颜色
2、font-size 设置字体的大小
3、border 设置边框 border:border-width border-style border-color; 分别用来修饰边框的粗细,边框的样式,边框的颜色。
css与html结合的方式
方式一:使用html标签的style属性(行内)
<div style="color: yellow; font-size: 100px; border: 1px solid red;">
我是div
</div>
方式二:在head标签使用style标签设置(内部)
<head>
<style type=”text/css”>
标签名称 ｛
样式名1：样式值1；
样式名2：样式值2；
｝
</style>
</head>
方式三：在head标签中的style标签使用@import(了解)
<style type="text/css">
@import url("css文件的地址");
</style>
方式四:在head标签中使用link标签引入css文件(比较常用)
<link rel="stylesheet" type="text/css" href="css文件路径" />
注意:rel="seylesheet"不能省略
css选择器
标签名选择器
作用在当前页面的所有该名称标签上
标签名称｛
css代码;
｝ID选择器
作用在某一个特定的标签上
#选择器的名称 ｛
css代码；
｝<标签名 id=” 选择器的名称” />
注意:页面的id值不能重复
class选择器
作用在一组标签上
.选择器的名称 ｛
css代码；
｝<标签名 class=”xxxx” />
组合选择器
选择器1, 选择器2... {
css代码
}关联选择器
标签名 后代标签名 ｛
css代码；
｝这中方式可以使用class选择器同样实现,但是关联选择器更加强调的是通过父亲查找孩子
属性选择器(了解)
选择器名[属性名="属性值"] {
css样式；
}css常用样式
- border:设置边框的样式
- 格式:宽度 样式 颜色
- 例如: style=”border:1px solid #f00” , 1像素实边红色
width、height
display 转换
对块标签与行内元素的转换(块标签可以设置高度和宽度,行内元素不行)
选择器 {display : 属性值 }
常用的属性值：
inline：此元素将显示为行内元素（行内元素默认的display属性值）
block：此元素将显为块元素（块元素默认的display属性值）
none：此元素将被隐藏，不显示，也不占用页面空间。line-height 行高
在父元素内设置一个text-align 属性来规定元素中文本的对齐方式
| 值 | 描述 |
|---|---|
| left | 文本排列到左边.默认值 |
| right | 把文本排到右边 |
| center | 把文本排列到中间 |
- 背景:background-color, background- image
背景平铺方式 background-repeat
- no-repeat:不平铺
- repeat- x: 横向平铺
- repeat-y:纵向平铺
布局:float、clear(了解)
边框(盒子模型)
盒子模型有哪几部分组成
元素的内容(高度、宽度)、内边距(padding)、边框(border)和外边距(margin)组成盒子模型大小受那些部分影响?
盒子模型的大小受元素的内容(高度、宽度)、内边距（padding）、边框（border）的影响，不受外边距的影响
196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
