1 css概述
作用:实现统一的定义页面元素的外观
css(cascading style shtte):级联(层叠)样式表
注释:/**/
2 使用方式
内联样式:只能解决某个元素的样式--可重用和可维护度差<元素style="样式1:值;样式2:值;..."
<h1style="color:red;background-color:gray;">h1text:字体颜色和背景色(内联方式)</h1>
<h1>另外一个h1</h1>
内部样式表
a. 在head里添加style标记
选择器{样式声明:}
例如:<style>
p{
color:blue;font-size:20pt;
}
</style>
<body><p>ptext</p></body>
外部样式表:实现真正的数据(页面)和表现(样式)分离,实现可 内容与表现分离的提高--建议使用
a.新建一个css文件,定义样式
b.html页面的head里link引入
<linktype="text/css"rel="stylesheet"href="style.css">
3 语法
内联样式:声明;
内部或者外部样式:
选择器{样式声明;}
注释/**/
4 优先级别,就近优先,不同取并集,相同重复按照优先级
默认外观(由浏览器)
内联(最高),高于内部或者外部
内部和外部,以最后一次定义的为准
5 选择器的定义:样式定义一个名称,便于元素使用它
a 元素选择器:以html中元素的名称定义
div{
border:1pxsolid black; margin:0px auto; padding:0px;
}
b 类选择器
<p class=”aa’>jsdfs</p>
.aa{
}
c 分类选择器:同一种元素里作细分
input.txt{border:1px solid red;}
input.btn{border:1px dottedrgb(27,42,152);}
c ID选择器
#tool{
width:100%;height:61px;
}
e 分组选择器
#header,#footer{
width:960px;
}
f 派生选择器:使用元素的层次位置作为选择
div a{color:green;}
g 伪类选择器:定义某元素在不同状态下的样式
a:hover{font-size:15pt;}
h2:hover{border:3px solidyellow;}
:link--超级连接没有被点过
:active--激活
:focus--获得焦点
:hover--悬浮
:visited--超级连接访问过
6 各种样式
6.1 单位
尺寸的单位
颜色的单位
尺寸相关的属性:width/height/overflow
6.2 边框
margin:外边距
padding:内边距
padding:10px--所有边距
padding:10px 20px--两个值,第一个上下
padding:10px 20px 30px 40px--上右下左
margin:10px auto;
统一设置各边(简写):border:width style color
6.3 背景
background-color:颜色;
background-image:url(a.jpg);
background-repeat:repeat/no-repeate/repeat-x/repeat-y;
background-position:5px 10px;
6.4 文本
字体颜色 color
字体大小 font-size
文本的水平对齐 text-align
字形 font-family
粗体 font-weight:normal/bold;
下划线 text-decoration:none/underline;
行高 line-height
6.5 表格:表格特有的属性
表格边框合并 border-collapse:separate/collapse;
vertical-align:top/middle/bottom;
6.6 浮动:元素脱离原有的布局,浮起来,停靠在包含框的左侧或者右侧
float:none/left/right;
clear:none/left/right/both;清除浮动的影响
6.7 display:设置元素的显示方式
块级元素和行内元素:行内元素而言,width/height无效,大小自适应
html中的元素本质的定义:或者为行内或者为块级
可以使用display样式属性修改其元素类型:
display:none/block/inline;
6.8 列表样式(列表所特有)
list-style-type:none/disc/...;设置列表项的标识
6.9 定位
默认情况下,定位方式:流模式---一个层上
修改方式,实现多个层
方式一:float(居左或者居右)
方式二:position(灵活的定位)
position:static/relative/absolute/fixed;
相对定位:position的值为relative,然后使用偏移属性和堆叠属性设置具体的位置--相对于原有的位置发生偏移,常用于定位的位置与操作相关时
绝对定位:
偏移属性:left/top/bottom/right
堆叠属性:z-index:value;
技巧一:为某个元素定义两种样式,用于不同的情形
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
<bodystyle="background-color:rgb(256,229,220)">
<h1style="color:rgb(42,79,24);background-color:gray;font-size:21pt;">(内联方式)</h1>
<h1>没有加内联方式的h1</h1>
<pclass="newstyle">类选择器和分组选择器</p><p>没有样式的P</p>
<h3>外部样式</h3>
<inputclass="txt" type="text"/>//分类选择器
<inputclass="btn" type="reset"/>//分类选择器
<h2>定义了伪类选择器</h2>
<h6id="pageTitle">id选择器和分组选择器</h6>
<ahref="#">定义了伪类选择器</a>
<div>
<ahref="#">伪类 div派生选择器</a><br><a href="#">伪类 div派生选择器</a><br>
<a href="#">伪类 div派生选择器</a><br><ahref="#">伪类 div派生选择器</a><br>
</div>
<h2style="color:rgb(255,0,0)">之前定义的h2样式中颜色被红色替代且定义了伪类选择器</h2>
<h2style="color:rgb(0,255,0)">之前定义的h2样式中颜色被绿色替代且定义了伪类选择器</h2>
<h2style="color:rgb(0,0,255)">之前定义的h2样式中颜色被蓝色替代且定义了伪类选择器</h2>
<divstyle="width:170px;height:270px;border:1px solidblue;overflow:auto">将此处文本内容写入前边定义的方框中,文本长度比较长如果不定义overflow的话,内容会超过所定义的方框,定义的话就会产生滚动条,防止内容超出所定义的边框</div>
css样式
h3{ color:green;font-size:20pt; }
.newstyle{ font-size:30pt;color:red;}
/*分类选择器:同一种元素里做细分*/
input.txt{border:1px solid red;}
input.btn{border:1px dottedrgb(27,42,152);}
#pageTitle{font-size:30pt;color:purple;}
.newstyle,#pageTitle{border:1pxsolid black;}
div a{color:green;}
a:hover{font-size:15pt;}
h2:hover{border:3px solidyellow;}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%