文西马龙:http://blog.csdn.net/wenximalong/
div+css细节
1.初始CSS2.块元素和行内元素
3.CSS核心内容
3.1标准流
3.2盒子模型
3.3浮动
3.4定位
4.CSS综合案例
4.1盒子模型经典案例
4.2仿sohu首页面布局
学习目标
1.掌握CSS的基本用法
2.掌握CSS的四种选择器用法
CSS使用必要性
css使用的基本语法
选择器{
属性1:属性值;
属性2:属性值;
……
}
demo.html
<html>
<head>
<!--css 部分可以单写一个文件,然后引入,也可以直接嵌入到该html文件-->
<link rel="stylesheet" type="text/css" href="demo.css" />
</head>
<body>
<!--span元素通常用于存放小块内容-->
<!--要统一为一个样式,只需修改每个span的class,需要新的样式,只需修改demo.css-->
<span class="s1">栏目一</span><br/>
<span class="s2">栏目二</span><br/>
<span class="s3">栏目三</span><br/>
<span class="s4">栏目四</span><br/>
<span class="s5">栏目五</span>
</body>
</html>
demo.css
/*.s1 用术语 类选择器*/
.s1{
color: green;
font-size: 30px;
text-decoration: underline;
}
.s2{
color: yellow;
font-size: 12px;
}
.s3{
color: blue;
font-style: italic;
}
.s4{
color: green;
font-weight: bold;
}
.s5{
color: #9c3131;
}
案列:把所有的网站的图片,都变成黑白的,这个怎么实现呢
采用滤镜技术 ?
CSS选择器
选择器是css中非常重要的概念。css中有四种不同的常用选择器
1.类选择器,又叫class选择器
2.id选择器
3.html元素选择器
4.通配符选择器
简单的说,选择器就是在css中创建,而在网页页面(html,jsp,php,asp.net)中使用
类选择器
.类选择器名{
属性名:属性值;
}
id选择器
#id选择器名{
}
html选择器
html元素名称{
属性名:属性值;
}
选择器优先级的问题
selector.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="selector.css" />
</head>
<body>
北京你好
<span class="s1">新闻一</span>
<span class="s1">新闻二</span>
<span class="s1">新闻三</span>
<span class="s1">新闻四</span>
<span class="s1">新闻五</span><br/>
<span id="id1">这是一则非常重要的新闻</span>
</body>
</html>
selector.css
/*类选择器*/
.s1{
background-color: pink;
font-weight: bold;
font-size: 16px;
color: black;
}
/*id选择器的使用*/
#id1{
background-color: silver;
font-size: 40px;
color: black;
}
/*html选择器*/
body{
color: orange;
}
韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录