frameset
rows: 行
cols: 列
<div> 默认独占一行 </div>
<span> 不会分行</span>
frameset和bady冲突
--------------------------------------------------------
Css的引入方式
行内样式:
<div>
<h1 style="color: 颜色,font-size:像素大小px"> 标题</h1>
行内样式;
<style>
h1{
color:颜色
font-size像素大小px
}
</style>;
页面内样式,表示所有的h1标签都使用上面定义的方法
外部样式:
单独应以一个.class文件,在HTML中引入CSS文件
引入方法:
<link href="../../css/文件名.css rel="stylesheet"//表示这是引入了一个css文件 type="text/css"/>
//就近选择样式,谁离得近用谁的
---------------------------------------------------------------------------------
CSS的选择器:
单独或分组选择器:
div{
border: 1px solid blue //边框深度1,颜色蓝色
width :40px //宽40
height :45 //高45
}
//在<head>里面定义,定义html可代表所有标签;
ID选择器:
#d1{
border:2px solid red; //border 边框 solid边框线颜色
};
//使用方法<div里面定义一个 id=d1就能使用>
类选择器:
.divClass{
border:2px solid red//边框深度2;边框线颜色红色;
}
//使用方法<div中定义一个名字相同的class字节码>;
重点//放置的位置越往下,权重越高
比如:
<div id= "d1", class="divClass">那么如果属性是颜色的话那么是class类的颜色
伪类和伪元素选择器。这个在网页中也经常见到。
如： a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
定义a标签（超链接）的不同状态用不同的CSS样式显示。
属性选择器:
对带有指定属性的 HTML 元素设置样式。以"[ ]"来定义。
如：[title] {color:red; } 为带有 title 属性的所有元素设置样式
HTML代码：<h2 title="Hello world">Hello world</h2>
CSS的浮动
flont//浮动的意思
在CSS中 可用于板块浮动
派生选择器:
通过依据元素在其位置的上下文关系来定义样式
如：li strong { font-style: italic; font-weight: normal; }
HTML代码：<li><strong>CSS选择器和我相符，所以对我起作用</strong></li>
li string{}==<li><strong>这样就会生效
元素选择器:
最常见的 CSS 选择器，直接以标签名字选择。
如：html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
里面所有的字体默认为黑色,如果是h1标签字体是蓝色h2标签则是银色
包含选择器:
选择作为某元素后代的元素。以空格来表示
如：h1 em {color:red;} 选取h1 元素包含的 em 元素
HTML代码：<h1>This is a <em>important</em> heading</h1>
这里面的话字体颜色显示为:This is a<em>important</em>heading</h1>
子元素选择器:
只选择某个元素的子元素
如：h1 > strong {color:red;} 这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
HTML代码：<h1>这是<strong>非常</strong> <strong>非常</strong> 重要的</h1>
<h1>这是<em>真的 <strong>非常</strong></em> 重要的</h1>
------------------------------------------------------------------------------------------------------------------------------
←left right → none默认值不浮动 inherit//继承的意思,和上一级父元素通用width,其他规则也是如此;
clerar 清除浮动的效果
←left right → 常用both表示左右两侧不允许有浮动元素 inherit 继承上一级元素clerar的值;
如果 6个列 1 2 3 4 5 6
1 2 3向右浮动
4 清除浮动
5 6向左浮动那么不会再向上,只会在4的下面浮动,如果左边如果到头了就会重叠
-------------------------------------------------------------------------------------------------------------------------------
CSS样式
字体属性:font
size 大小
样式 style:oblique偏斜体,italic斜体normal正常
行高:height 单位PX`PD`EM
背景属性:background
颜色:color
图片 image
重复: repeat
滚动: attachment 固定 scroll 滚动
区块属性:Block
边框属性:Border
列表属性:List-style
定位属性:Position
文本属性;
颜色 color
行高 line-height
----------------------------------------------------------------------------------------------------
盒子说明:
Margin(外边距)-清除边框外的区域,外边距是透明的
Border(边框)-围绕在内边距和内容那个外的边框.
Padding(内边距)-清除内容周围的区域,内边距是透明的.
Content(内容)-盒子的内容,显示文本和图像
当指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。.
------------------------------------------------------------------------------------------------------------
CSS中的定位
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
|
|
收藏
淘帖
踩
