1 CSS:cascading stylesheet,级联(层叠)样式表
数据和表现分离,统一的样式控制
W3C 定义了CSS:统一使用CSS 的语法来定义所有元素的外观
没有使用CSS之前:将每个样式使用属性的方式来定义,不能统一控制,不能实现数据和表现的分离
2 CSS 的基础语法
用于定义样式
样式属性的名称:值;样式属性的名称:值;...
color:red;font-size:20pt;
用来定义样式选择器
选择器 {样式定义}
3 CSS 的使用方式:
内联:将样式定义在元素的 style 属性中
没有分离;没有重用,不好维护
内部样式表:将样式定义在页面的 head 元素里的 style 元素里
使用选择器;分离;仅限于当前页面的重用
外部样式表:样式定义在单独的文件(后缀为 css)里
页面引入样式表文件
课堂练习:
定义一个html文件,分别使用三种 CSS 方式定义
某些元素的外观
4 CSS 优先级别
大多数样式可以继承,如果重复,以就近优先
<p>aa<span>span text</span>bbb</p>
默认样式
内部或者外部样式表:就近,取决于先后顺序
内联样式
5 选择器的声明:将样式定义灵活的运用于页面元素
元素(名称)选择器:以元素的名称作为选择器的名称
必须合法的html 标记的名称
同一类标记实现样式定义;不能实现跨类别的,不能实现同一种元素中的细分
类选择器:
.className {样式}
<元素 class="className" >
分类选择器:同一种元素中细分
元素的名称.className {样式}
<元素 class="">
元素 ID 选择器:将样式局限于页面上某一个元素使用
#元素id值 {样式}
<元素 id="">
群组选择器:对于多个选择器实现统一的定义
p,h1.first,#td1 {样式}
派生选择器:和元素的包含层次相关,以元素的顺序定义
p span {样式}
td.header a {color:red;}
td.left a {}
td.right a {}
<table>
<tr>
<td colspan="2" class="header">
<a>login</a>
<a>register</a>
<a>login</a>
<a>register</a>
<a>login</a>
<a>register</a>
</td>
</tr>
</table>
伪类:元素有多种状态,每种状态定义样式
a:link:没有被访问过
a:hover:鼠标悬停,可用于其他元素
a:active:点下
a:visited:访问过的
input:hover
6 样式属性
尺寸的单位: px(像素) pt(磅) cm mm in %
颜色的单位:单词 #FFFFFF
7 尺寸(面积)的属性
width
height
8 边框的属性
综合定义 border:width style color;
单样式定义
border-width:1px;
border-style:solid;
border-color:red;
单边框定义:
border-left/right/top/bottom:1px solid red;
9 显示属性
display:修改html元素原有的显示效果
none:不显示,不占用页面原有的空间
常和js一起实现页面的动态效果
inline:行内
block:块
html 元素分为两类:
块级元素(独占一行):div/p/hn/table/ul/ol
行内元素(共处一行):span/a/img/input,设置高和宽无用
10 定位属性
position:html文档中的元素默认按照流的方式布局
可以设置为static以外的其他值,脱离了原有的流布局模式
static:默认的流模式
relative:相对定位,偏移量相对于原位置而言
absolute:绝对定位,偏移量相对于父元素的边框而言
偏移属性:位置
top/bottom/left/right:
堆叠顺序:层数
z-index
11 文本属性:设置文本内容的样式
color
font-size
font-weight:粗体显示
font-family:字体的名称
text-decoration:none/underline
text-align:left/center/right
12 背景属性:设置元素的背景
background-color:
background-image:url(a.jpg);
background-repeat:repeat/repeat-x/repeat-y/no-repeat;
常用于实现特殊的背景效果,比如渐变色
background-position:value1 value2;
常用于实现在背景图像上的偏移
background-attachment:附着方式
scroll/fixed
类似于水印的效果
13 边距属性
box 模型
margin:外边距
margin-left/top/right/bottom
padding:内边距
padding-left/top/right/bottom
padding:10px;
简写的办法(精确的设置每个方向的边距):
padding:10px 30px 50px 5px;
top right bottom left
14 浮动属性:需要将多个块级元素位于同一行显示
float:left/right
元素脱离原有的流布局,浮动的停靠
可能会对后续元素的布局带来影响
clear:left/right/both
清除附近浮动元素带来的影响
15 列表的样式
list-style-type:none;
first.html
<html>
<head>
<link type="text/css" href="MyStyle.css" rel="stylesheet">
<style>
h2{color:green;font-size:10pt;}
p{color:blue;font-size:30pt;}
</style>
</head>
<body>
<h3 style="color:red;">
aaaa
<span style="color:green;">span text</span>
bbb
</h3>
<a href="a.html">Click me</a>
<h2>h2 text</h2>
<p>p text</p>
<h1 style="color:red;font-size:20pt;">1号标题</h1>
<span style="color:red;font-size:20pt;">span wenbe</span>
</body>
</html>
MyStyle.css
/*只能包含样式定义*/
/*元素选择器
a {
color:yellow;
font-size:20pt; }*/
/*样式类*/
.s1 {
color:green;
font-size:5pt; }
/*分类*/
p.first {
color:red; }
p.second {
color:yellow; }
/*元素ID*/
#pageTitle
{
color:orange;
font-size:40pt;
}
/*群组选择器对于多个元素:定义边框*/
p,h1,#pageTitle,.s1
{
border:1px solid gray;
}
/*派生选择器*/
h3 span
{
border:1px solid black;
}
/*用伪类定义链接的不同状态下的样式*/
a:link {color:green;}
a:hover {color:blue;font-size:20pt;}
h4:hover {background-color:gray;}
Selector.html
<html>
<head>
<title>CSS 中样式选择器</title>
<link type="text/css" href="MyStyle.css" rel="stylesheet">
</head>
<body>
<!--伪类-->
<a href="firstss.html">click me</a>
<h4>4 标题文本</h4>
<!--不同的元素可以使用相同的样式-->
<h2 class="s1">h2 text</h2>
<p class="s1">p text</p>
<!--同一种元素细分-->
<p class="first">段落1:红色</p>
<p class="second">段落2:蓝色</p>
<h2 class="second">无效应用</h2>
<!--元素 id 方式-->
<span id="pageTitle">我的购物车</span>
<h3>hh<span>hh</span>hh</h3>
<span>aaa</span>
</body>
</html>
StylrProperty.html
<html>
<head>
<title>CSS 中样式的属性</title>
<link type="text/css" href="StyleProperty.css" rel="stylesheet">
</head>
<body style="background-image:url(Spring_bg.jpg);background-attachment:fixed;">
<ul>
<li class="menu">
aaaa
<ul>
<li>aaa1</li>
<li>aaa2</li>
</ul>
</li>
<li class="menu">
bbbb
<ul>
<li>bbbb1</li>
<li>bbbb2</li>
</ul>
</li>
</ul>
<div style="clear:left;"></div>
<!--浮动属性-->
<div style="float:left;">111</div>
<div style="float:left;">222</div>
<!--边距属性-->
<div style="clear:both;">
<div style="width:100px;height:100px;margin-top:10px;margin-left:20px;padding-left:20px;padding-top:5px;">
<div style="width:50px;height:50px;">dd</div>
</div>
</div>
<!--背景属性-->
<div id="divBack"></div>
<!--文本属性-->
<a id="myLink" href="a.html">click me</a>
<p style="font-weight:bold;text-align:right;">一些文本</p>
<!--相对定位-->
<div>
<span>span 1</span>
<span>span 2</span>
<span style="position:relative;top:50px;left:30px;">span 3</span>
</div>
<!--定位属性:绝对定位-->
<div style="background-color:silver;">div 1</div>
<div style="position:absolute;top:200px;left:300px;background-color:gray;z-index:5;">div 2</div>
<div style="position:absolute;top:500px;left:600px;background-color:blue;z-index:3;">div 3</div>
<div id="div1">
分区元素:划分元素,实现页面的布局
</div>
<!--display属性-->
aa<span style="display:none;">span text</span>aa
<br>前面的文本
<a id="link1" href="selector.html">超级链接</a>后面的文本
<form>
<input class="btn" type="button" value="一个按钮">
</form>
</body>
</html>
StyleProperty.css
y#div1
{
width:50%;
height:100px;
border-top:1px solid red;
border-right:2px dashed blue;
border-bottom:3px dotted green;
border-left:4px solid orange;
}
input.btn {
border:1px solid silver;}
input.btn:hover {
border-right:1px solid black;
border-bottom:1px solid black;}
/*****/
#link1 {
width:100px;
height:50px;
border:1px solid black;
display:block;}
div {
width:200px;
height:200px;
border:1px solid red;}
span {
border:1px solid green;}
#myLink:link {
text-decoration:none;}
#myLink:hover {
text-decoration:underline;}
#divBack {
background-image:url(clock.png);
background-repeat:no-repeat;
background-position:30px 40px;
}
li.menu
{
float:left;
}
li
{
list-style-type:none;
}
扫一扫
2628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
