具体些页面的顺序
1、先写html，搞定页面内容
2、写css文件来控制样式
Css
入门案例：
/*.s1 用术语 类选择器*/
.s1{
color:blue;
font-size:30px;
font-style:italic;
text-decoration:underline;
}
.s2{
color:yellow;
font-size:12px;
}
.s3{
color:blue;
font-style:italic;
}
.s4{
color:green;
font-weight:bold;
}
.s5{
color:#9C3131;
}
屏幕取色的软件 /*FastStone Capture*/
写软件：ZendStudio
Css中常用的四种选择器
1 类选择器（class选择器）
基本使用
类选择器{
属性名：属性值；
}
2 id选择器
基本使用
#id选择器{
属性名：属性值；
}
3 html元素选择器
某个html元素{
属性名：属性值；
}
4 通配符选择器
/*通配符选择器*/
*{
/*margin-top:0px;
margin-left:50px;*/
margin:0px 50px 40px 1px;
/*margin 可以写一个值（上右下左即是顺时针旋转） 如果是两个值（上下，左右）如果是三个值（上 左右 下）*/
margin:0px;
padding:0px;
}
☞该选择器可以用到所有的html元素，但是其优先级最低
*{
属性名：属性值；
}
案例：
/*html选择器*/
a:link{
color:black;
text-decoration:none;
font-size:24px;
}
a:hover{
text-decoration:underline;
font-size:40px;
color:green;
}
a:visited{
color:red;
}
/*对同一种html分类*/
p.cls1{
color:blue;
font-size:30px;
}
p.cls2{
color:red;
font-size:20px;
}
☞ 四个选择器优先级：
Id选择器 > class 选择器 > html选择器 > 通配符选择器
选择器的细节问题：
1、父子选择器使用
代码：
/*父子选择器*/
#id1 span{
color:red;
font-style:italic;
}
#id1 span span{
color:green;
}
总结：
父子选择器可以有多级（但是在实际开发中不要超过3级）
父子选择器有严格的层级关系
父子选择器不局限于什么类型的选择器
比如：
.s1 #id span
Div #id span
一个元素可以同时有id选择器和class选择器
案例：
<span class = "s1" id = "newspecial">新闻一</span><br>
一个元素最多有一个id选择器，但是可以有多个类选择器
使用方法如下：
<元素 class = “ 类选择器1 类选择器2”>
例：
<span class = "s1 clas">新闻二</span><br>
/*给新闻二再写一个class选择器*/
.clas{
font-size:italic;
text-decoration:underline;
color:blue;
}
特别注意：当两个类选择器发生冲突了，则以写在css文件中的后面那个类选择器为准！
4、我们可以把某个css文件中的选择器共有的部分，独立出来写一份 比如
5说明：css文件本身也会被浏览器下载到本地，才能显示正确
行内元素和块元素
快速入门案例
从案例可以看出：行内元素它只占能显示自己内容的宽度，而且他不会占据整行
块元素它不管自己的内容有多少，会占据整行，而且会换行显示
常见的行内元素有：<a> <span> <input type = “xxx”>
常见的块元素有：<div> <p>
<html>
<head><link rel = "stylesheet" type = "text/css" href = "element.css">
</head>
<body>
<span class = "s1">span1</span>
<span class = "s1">span2</span>
<input type ="text" name = "username"/>
<div class = "s2">div1</div>
<div class = "s2">div2</div>
<input type ="text" name = "username"/>
</body>
</html>
行内元素和块元素可以转换
使用
Display inline 表示使用行内元素方式显示
Display block 表示使用块元素方式显示
css文件之间的相互引用
标准流和非标准流
Css中的盒子模型
盒子模型的经典案例：
Html代码：
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>盒子模型案例</title>
<link rel = "stylesheet" type = "text/css" href = "box1.css"/>
</head>
<body>
<div class = "div1">
<img src = "mm.jpg"/>
</div>
</body>
</html>
Css文件：
body{
border:1px solid red;/* 1px 表示边框的宽度 solid 表示实线*/
width:600px;
height:500px;
/*如果让body自动居中*/
margin :0 auto;/*第一个用于上下 第二个用于左右；auto表示自动居中*/
}
/*盒子模型的概念：margin padding border */
.div1{
width:50px;
height:52px;
border:1px solid blue;
/* margin-top:5px;
margin-left:5px;*/
margin:5px 0px 0px 5px;
/* padding-top:35px;*/
}
.div1 img{
width:40px;
height:40px;
margin-top:5px;
margin-left:5px;
}
盒子模型的综合案例2
Html文件：
<html>
<head>
<link rel= "stylesheet" type = "text/css" href = "box2.css">
</head>
<body>
<!--div在布局起到一个控制整个内容显示的位置-->
<div class = "div1">
<!--ul在布局中作用是可以控制显示内容多少-->
<ul class = "faceul">
<li>
<img src ="mm.jpg"/>
</li>
<li>
<img src ="mm.jpg"/>
</li>
<li>
<img src ="mm.jpg"/>
</li>
<li>
<img src ="mm.jpg"/>
</li>
<li>
<img src ="mm.jpg"/>
</li>
<li>
<img src ="mm.jpg"/>
</li>
<li>
<img src ="mm.jpg"/>
</li>
<li>
<img src ="mm.jpg"/>
</li>
<li>
<img src ="mm.jpg"/>
</li>
<li>
<img src ="mm.jpg"/>
</li>
<li>
<img src ="mm.jpg"/>
</li>
<li>
<img src ="mm.jpg"/>
</li>
</ul>
</div>
</body>
</html>
Css文件：
.div1{
width:500px;
height:300px;
border:1px solid gray;
}
.faceul{
width:300px;
height:250px;
border:1px solid red;
padding-left:5px;
margin-left:10px;
}
.faceul li{
list-style-type:none;
float:left;/*左浮动*/
width:50px;
height:52px;
border:1px solid red;
margin-left:5px;
margin-top:5px;
}
.faceul img{
margin-left:5px;
margin-top:5px;
width:40px;
height:40px;
}
☞ 我们在网页设计中，常用的<!DOCTYPE>有两种
1、HTML Transitional DTD
2、XHTML Transitional DTD
扫一扫
798
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
