div+css css选择器

来源：互联网发布：余华兄弟读后感知乎编辑：程序博客网时间：2024/05/29 16:31

学习目标
1.掌握CSS的基本用法
2.掌握CSS的四种选择器用法

CSS使用必要性

css使用的基本语法
选择器{
属性1:属性值;
属性2:属性值;
……
}

demo.html

[html] view plaincopy
<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

[html] view plaincopy
/*.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] view plaincopy
<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

[html] view plaincopy
/*类选择器*/  
.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;  
}  

0 0