第009讲 初识css 类选择器 id选择器 html选择器

第009讲 初识css 类选择器 id选择器 html选择器_第1张图片


CSS 的基本语法:

选择器{

属性1:属性值;
属性2:属性值;
...

}

例:

a.html
<html>
<head>

<link rel="stylesheet" type="text/css" href="my.css">
head>

<body>

<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>
my.css
/* .s1 用术语叫 类选择器 */
.s1{
    color:green;
    font-size:30px;
}

.s2{
    color:yellow;
    front-size:12px;
}

.s3{
    color:blue;
    font-style:italic;
}

.s4{
    color:green;
    font-weight:bold;
}

.s5{
    color:#9c3131;
}

滤镜技术:

<html>
<head>

    <style type="text/css">
    --变灰-->
        a:link img{
            filter:gray;
        }
    --悬停-->
        a:hover img{
            filter:""
        }
    style>
head>

<body>
<a href="3"><img src="a.jpg"/>a>
body>
html>

CSS 中常用的选择器:

  1. 类选择器(class 选择器):
基本结构:
 .类选择器{
    属性名:属性值;
    ...
 }
  1. id 选择器:
基本结构:
 #id{
    属性名:属性值;
    ...
}
  1. html元素选择器:
基本结构:
 某html元素{
     属性名:属性值;
     ...
 }
b.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="b.css">
head>

<body>
上海欢迎你!<br/>
<span class="s1">新闻一span>
<span class="s1">新闻二span>
<span class="s1">新闻三span>
<span class="s1">新闻四span>
<span class="s1">新闻五span><br/><br/>

<span id="id1">这是一则非常重要的新闻span>

body>
html>
b.css
.s1{
    background-color:pink;
    font-weight:bold;
    font-size:16px;
}

/* id 选择器的使用*/

#id1{
    background-color:gray;
    font-size:40px;
    color:black;
}

body{
    color:orange;
}

第009讲 初识css 类选择器 id选择器 html选择器_第2张图片
4. 通配符选择器:

你可能感兴趣的:(第009讲 初识css 类选择器 id选择器 html选择器)