您的位置：首页 > Web前端 > CSS

韩顺平_php从入门到精通_视频教程_第11讲_初识css_类选择器_id选择器_html选择器_学习笔记_源代码图解_PPT文档整理

2012-11-13 11:00 1316 查看

文西马龙：http://blog.csdn.net/wenximalong/

div+css细节

1.初始CSS

2.块元素和行内元素

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文档整理_目录

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航