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

来源：互联网发布：java做场景设计的优点编辑：程序博客网时间：2024/05/18 20:52

文西马龙：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文档整理_目录