css
1.css 概述
css的作用:实现统一的定义页面元素的外观
css(cascading style sheets)级联/层叠样式表
1.实现了内容和表现的分离
2.提高了代码的可重用性和可维护性
2.css的使用方式:
-------------------------
内联方式表:
(把样式定义在元素里面,可重用性可维护性不好)
<元素 style="样式1:值;样式2:值;....">
例如:<h1 style="color:red;background-color:gray;" > xxx </h1>
---------------------
内部样式表:
head里面:
选择器{
样式声明；
}
例如:
<style>
p{
color:blue;
font-size:20pt;
}
</style>
------------------------------
外部样式表:
新建文件xxx.css 定义样式
link:为当前页面引入多种文件
<link type="text/css" rel="stylesheet" href="xxx.css" />
--------------------------------------------------------------------
总结语法:
内联样式: 声明:<元素 style="样式1:值;样式2:值;....">
内部/外部样式:
选择器{样式声明；}
-------------------
css注释:/* */ <style> 用css注释,不用html注释</style>
---------
外部样式表真正实现了 1.实现了内容和表现的分离 2.提高了代码的可重用性和可维护性 建议使用
---------------------------
优先级:就近优先,不用取并集
内联(最高)>(内部=外部)(以最后定义的为准)
/*************************************************************************/
3.选择器的定义:
样式定义一个名称,便于元素使用它
a.元素选择器:
以html中元素的名称定义(问题 :同一个元素细分做不到)
b.类选择器
(跨元素随便使用)(自定义定义是时前面加个点)
.mystyle{
}
引用: 例如:<div class="mystyle"> </div>
c.分类选择器
(只能这个元素才能用的样式,同一种元素作细分)
例如: input.txt{
border:1px solid red;
}
input.btn{
border:2px dotted blue;
}
引用: <input class="txt" type="text" />
<input class="btn" type="submit" value="提交"/>
d.元素id选择器
(只能某个元素特有--唯一性 id是唯一的)
#pageTitle{
}
引用:例子:<h6 id="pageTitle"> </h6>
e.分组选择器
(追加样式,或则,几个选择器需要相同样式)
例子: .mystyle,#pageTitle{
border:1px solid black;
}
f.派生选择器(使用元素的层次位置定义选择器)
例子: div a {color:green}
引用:例子:<div> <a herf="#"> xxx </a></div>
g.伪类选择器
(定义某元素在不同状态下的状态)
:link------超级链接没有访问过
:active----激活
:focus-----获得焦点
:hover-----悬浮,鼠标移入
:visited---超级连接访问过
例子: a:hover{font-size:100pt;}
/*********************************************************************************/
4.各种样式:
(1).单位
%:百分比
in:英寸
cm:厘米
mm:毫米
pt:磅(1pt等于1／72英寸)(绝对单位)
px:像素(计算机上的一个点)(相对单位)
em:1em当前字体尺寸,2em两倍于当前字体尺寸
(2).颜色
RGB(,,) #ffffff(白色) #000000(黑色)
(3).尺寸属性
width,height
处理溢出overflow
overflow:visible/hidden/scroll/auto;
(4).边框属性
简写方式:
border:width style color;
border:1px solid black;
border:2px dotted blue;
单边定义:
border-left/right/top/bottom:width style color;
(5).框模型box Model
定义了元素框处理元素内容,内边距,边框,外边距的方式
(width,height),padding,border,margin
(width和height指内容区域的宽度和高度)
(增加内边距,边框,外边距不会影响内容区域的尺寸)
(但是会增加元素框的总尺寸)
(6).内边距:和内容元素之间的距离
padding:10px;一个值代表所有
padding:10px 20px;两个值(上 下)
padding:10px 20px 30px 40px; 四个值(顺时针,上右下左)
(7).外边距:与下一个元素之间的空间量
margin:10px auto;居中
border/padding/margin-top/right/bottom/left:value;
------------------------------
---------------------------------------------------------
5.背景
背景颜色 :background-color:颜色;
背景图片:background-image:url(a.jpg); url函数
背景图片显示模式:background-repeat:repeat/no-repeat/repeat-x/repeat-y;
(平铺 /不平铺 /x水平铺 /y垂直铺 )(做渐变的效果)
背景图片的位置:background-position:5px 10px;(left top)
:50% 50%;
----------
6.文本
字体颜色:color:
字体大小:font-size:
文本的水平对齐:text-align:
字型:font-family:
粗题:font-weight:normal/bold;
下划线:text-decoration:none/underline;
行高 :line-height:40px;(经常用于实现垂直居中)
鼠标:cursor:default/pointer/help/...
------------
7.表格样式: 表格所特有的属性
垂直对齐:vertical-align:top/middle/bottom;
边框合并:border-collapse:separate/collapse;
边框边距:bordr-spacing:value;
-----------
例子:
.tab1{
border:1px solid #AEDEF2;
border-collapse: collapse;
height:150px;
width:100%;
text-align:center;/*ie认这种居中*/
}
.td1{
border:1px solid #AEDEF2;
background:ghostwhite;
font-size:12px;
font-family: 黑体;
color: #65625d;
}
.td2{
border:1px solid #AEDEF2;
background:#DAF0F1;
font-size:12px;
font-family: 黑体;
color: #65625d;
}
8.浮动：做横着的导航栏
元素脱离原有的布局，漂浮起来
将元素所排除在普通流之外
将元素放置在包含可框的左边或右边
(放不下的时候放在下一行)
float:none/left/right;
清除其它浮动对本属性带来的影响:
clear:none/left/right/both;
-----------
9.显示方式:
设置元素的显示方式
块级元素和(行内元素:weigth/height无效)
可以使用display样式修改元素类型;
display:none/block/inline;
(不显示/块级/行内)
---------
10.列表样式:
设置列表项的标识:
list-style-type:none/disc/circle;
list-style-image:url();
-------------------------
11.定位:
普通定位:块级和行内(默认方式 :流模式 一个层上)
实现多个层:
方式一:float(居左或居右)
方式二:position:static/relative/absolute/fixed (灵活的定位)
(static:元素没有定位,出现在因该出现的位置
relative:用定位属性可以相对原来的位置移动这个元素
absolute:元素脱离文档，可以用定位属性准确的定位
)
-----------------
相对定位:元素仍保持其未定位前的形状
原本所占的空间仍保留
元素框相对于它原来的位置偏移某个距离
绝对定位:将元素的内容从普通流中完全移出
并使用偏移属性来固定该元素的位置
－ 相对于最近已经定过位的祖先元素(设置过position为普通流以外的其它模式)
－ 如果没有定过位的祖先元素，按相对于最初的包含块偏移
----------------
定位属性:
偏移属性top/bottom/left/right:value;
堆叠属性:z-index:value;
-------------
相对定位:
例如:style="position:relative;top:-20px;left:-30px"
绝对定位:
例如:style="position:absolute;top:-20px;left:-30px";
--------------------------------------------------------------------
12.内容溢出和光标类型
设置内容溢出时的处理:
overflow:visible/hidden/scroll/auto;
设置光标类型:
cursor:pointer/crosshair/text/wait/help;
overflow:scroll;
overflow-x:hidden;
13.半透明颜色
opacity:0.5; css标准)*(0-1)
filter:alpha(opacity=50); ie(0-100)
背景透明，字体不透明:
RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
实例:
p
{
background-color:rgba(255,0,0,0.5);
}
--------------------------------------------------------------------
各个选择器的，优先级
!important 改变优先级别
1.两种不同的样式
2.用!important改变优先级别
----------------------------------
扫一扫
2247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
