CSS(选择器):
1、概述:级联样式表
样式表：修饰网页内容语法的集合
级联：关联(两个及以上事物间的关系)
网页的内容和修饰网页内容的css语法
理念：将网页和样式分离，这样重复的样式只需定义一次即可
作用：修饰网页内容的外观(文本、背景、列表、定位)
关系：Html ，网页内容
css，网页外观、样式、、、
2、基本语法：
1>三种样式表：行级、内嵌、外部
①行内样式表：< p style=" ">
style属性：描述css语法，只能作用于当前标签；
color：颜色 font-size：字体大小(单位：像素单位(px))
②内嵌样式表：(练习时使用较多)
(代码中出现的所有习题大小,类型和颜色均可自定义)
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--在此标签中编写css语法 -->
<style type="text/css">
p{
color: bisque;
font-size: 26px;
}
</style>
</head>
<body>
我一脚踏空<br />
我就要飞起来了
</body>
</html>
③外部样式表：css中创建css文件
<body>
p{
color="red";
}
</body>
在html文中的head中，导入外部样式表，用link标签
(引进一个样式表)
3、css选择器：
1>标签选择器 ：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color: #D2691E;
font-size: 25px;
}
</style>
</head>
<body>
<p>我一脚踏空<br />
我就要飞起来了
</p>
<b>我想抬头暖阳春草</b>
</body>
</html>
2>类选择器：(使用最广泛的选择器)
<head>
.p1{
color="";
}
.p2{
color="";
}
</head>
<body>
<!-- <p class="需要定义的类的名称">文本内容<br /></p1> -->
<p class="p1">我一脚踏空<br /></p>
<p class="p2">我就要飞起来了</p>
<p>我向上是迷茫</p>
</body>
3>id选择器
<head>
<meta charset="utf-8">
<title></title>
<style>
#p{
color: #6495ED;
font-size: 27px;
}
</style>
</head>
<body>
<p id="p">我一脚踏空<br /></p1>
<p id="p1">我就要飞起来了</p>
</body>
4>选择器的组合:用于将公共样式抽取
<head>
<style>
.p1,.p2,#p0,h1{
font-size="18px";
}
</style>
</head>
5>通用选择器：匹配网页上所有标签，通配选择器，id选择器的优先级高于统配选择器
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 用 “ * ”来表示全选 */
*{
color: #6495ED;
font-family: 隶书;
}
</style>
</head>
<body>
<p class="p1">我想抬头暖阳春草</p>
<p id="p">你给我简单拥抱</p>
<p>你说一二三转身</p>
</body>
选择器的优先级：id选择器>类选择器 > 标签选择器 > 通用选择器
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 */
p{
color: #008000;
}
/* 类选择器*/
.p1{
color: #008000;
}
.p2{
color: #00FFFF;
}
#p0{
color: red;
}
/* 选择器组合 */
.p1,.p2,#p0,h1{
font-size: 18px;
}
/* 通配选择器:匹配网页上所有的标签 */
{
color: orange;
font-family: 隶书;/*高优先级选择器不会覆盖掉低优先中特有的样式*/
}
</style>
6>样式的继承：子标签选择器，找指定父级下，指定的儿子级别标签
<head>
ul1 li{
color="";
}
</head>
<body>
<ul class="ul1">
<li>列表1</li>
<li>列表2</li>
</ul>
<!-- 连同ul嵌套都会改变，继承父级的样式 -->
</body>
7>后代选择器：找指定祖先下的后代标签
<head>
<style type="text/css">
p b{
color: #FF0000;
}
</style>
</head>
<body>
<p>
<b>p的儿子</b>
<s>
<b>p的孙子</b>
</s>
</p>
<s>p的相邻兄弟</s>\
</body>
8>相邻选择器：指定的相邻标签
<head>
<style>
p+b{
color="";
}
</style>
</head>
<body>
<!-- 只有和p标签相邻的那一个b标签才会被定义 -->
<p>
<b>或许有一天，我能给你温暖</b>
</p>
<b>像我这样孤独的人</b><br />
<b>见证少年心事如野草向荣</b>
</body>
9>指定兄弟标签：
<head>
<style>
p~b{
color="";
}
</style>
</head>
<body>
<!-- 只定义了 p标签 的 兄弟b标签 -->
<p>
<b>十七岁那年搁浅我一生的心动</b>
</p>
<b>经年之后我拥有一切自由</b><br />
<b>梧桐下，老街口是我和某某</b>
</body>
2602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
