css可以使用在html,jsp,php,asp,net网页页面
css可以单独写一个文件,也可以直接嵌入到html文件
css嵌入到html的方法:
<head>
<style type="text/css">
..............
</type>
</head>
css常用的四种选择器
1.类选择器,也叫class选择器
基本语法:
.类选择器{
属性名：属性值；
.......
}
引用方法：
<元素 class="类选择器"></元素>
2.id选择器
基本语法：
#id选择器{
属性名：属性值；
.......
}
引用方法：
<元素 id="id选择器 "></元素>
3.html元素选择器
某个html元素{
属性名：属性值；
.......
}
自动引用
另外对于一种html元素还可以进行分类,用法如下
某个html元素.class1{
属性名：属性值；
.......
}
某个html元素.class2{
属性名：属性值；
.......
}
4.通配符选择器
如果希望所有的元素都符合某一种样式,可以使用通配符选择器，该选择器可以使用到所有的 html元素,但是其优先级最低。
基本语法:
*{
属性名：属性值;
......
}
扩展：父子选择器
基本语法:
父选择器 子元素{
属性名：属性值;
......
}
/*父子选择器*/
#id1 span{
color:red;
font-style:italic;
}
注意：
1.父子选择器可以有多级(建议实际开发中不要超过三层)
2.父子选择器有严格的层级关系
案例：
selector.html
<head>
<title>css选择器</title>
<link rel="stylesheet" type="text/css" href="selector.css">
</head>
<body>
中国您好！<br/><br/>
<!--span元素通常用于存放小块内容-->
<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>一则</span>大新闻</span><br/>
<p class="p1">元素选择器分类</p><br>
<p class="p2">元素选择器分类</p>
</body>
</html>
selector.css
/*类选择器的使用*/
.s1{
background-color:pink;
font-weight:900;
color:black;
}
/*id选择器的使用*/
#id1{
background-color:silver;
font-size:50px;
color:black;
}
/*html元素选择器的使用*/
body{
color:orange;
}
p.p1{
color:red;
font-size:20;
}
p.p2{
color:blue;
font-size:30;
}
/*通配符选择器的使用*/
*{
margin-top:40px;
margin-left:0px;
}
效果图：
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
