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

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

2015-06-17 21:46 711 查看


CSS 的基本语法：

选择器{

属性1：属性值；
属性2：属性值；
...

}


例：

a.html
<html>
<head>
<!--引入CSS,外联-->
<link rel="stylesheet" type="text/css" href="my.css">
</head>

<body>
<!--span元素通常用于存放小块内容-->
<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>
<!--内链CSS-->
<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 中常用的选择器：

类选择器(class 选择器)：

基本结构：
.类选择器{
属性名：属性值；
...
}


id 选择器：

基本结构：
#id{
属性名：属性值；
...
}


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;
}




4. 通配符选择器：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航