一、 选择器
1、类选择器:class
1)一个选择符能有不同的class,因而允许同一个选择符具有不同的样式
总结:
①p.comment{}表示:如果一个p标签的class是"comment",就将该p标签的样式设为{}中所描述的样式。
②即"."和class相对应。
③<pre></pre>标签可以保留内容的格式(如换行和缩进)。
2)不同的标签通过类选择器同时定义成一样的样式
总结:
①class选择器可以指定某一类(多个标签)的装修风格。
2、id选择器
总结:
①"#code1"表示找到一个标签其id是"code",则把该标签的样式设置为#code1{}的样式。
②在style标签中看到"#"则说明这是一个id选择器。id与"#"相搭配,class与"."相搭配。
③class和id的区别:两个标签的class可以一样,但是id通常情况下不能取一样的值,即一个标签的id在整个html文档中是独一无二的。
④id可以与JavaScript结合在一起使用,由于id是独一无二的,使用document.getElementById("code1")获得当前文档对象中id为"code1"的那个标签对象的引用。
3、多标签选择
1)例1
①h1,p{}表示将html文档中的h1和p标签都设置为{}中的样式。
②","相当于"与"的关系。
2)例2
①p a{}表示将p标签内部的a标签设置为{}中的样式。
②" "(空格)表示从属关系。
二、装饰超链接的伪类选择符
1、对链接的修饰
1)a:link未访问时的状态
2)a:visited访问过后的状态
3)a:active鼠标点中不放时的状态
4)a:hover鼠标划过时的状态
5)例子
①设置伪类的顺序一定要是:a:link->a:visited->a:hover->a:active
②在实际开发中经常只设置两种:a、a:hover
如下:
1、类选择器:class
1)一个选择符能有不同的class,因而允许同一个选择符具有不同的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p.code{ font-size: 16px; color: red; }
p.comment{ font-size: 10px; color: green; }
</style>
</head>
<body>
<p class="comment" >//第一个Java程序</p>
<pre>
<p class="code" >
public class Hello {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</p>
</pre>
</body>
</html>
总结:
①p.comment{}表示:如果一个p标签的class是"comment",就将该p标签的样式设为{}中所描述的样式。
②即"."和class相对应。
③<pre></pre>标签可以保留内容的格式(如换行和缩进)。
2)不同的标签通过类选择器同时定义成一样的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.code{ font-size: 16px; color: red; }
</style>
</head>
<body>
<h1 class="code" >//第一个Java程序</h1>
<pre>
<p class="code" >
public class Hello {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</p>
</pre>
</body>
</html>
总结:
①class选择器可以指定某一类(多个标签)的装修风格。
2、id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#code1{ font-size: 16px; color: red; }
#code2{ font-size: 16px; color: blue; }
</style>
</head>
<body>
<h1 id="code1" >//第一个Java程序</h1>
<pre>
<p id="code2" >
public class Hello {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</p>
</pre>
</body>
</html>
总结:
①"#code1"表示找到一个标签其id是"code",则把该标签的样式设置为#code1{}的样式。
②在style标签中看到"#"则说明这是一个id选择器。id与"#"相搭配,class与"."相搭配。
③class和id的区别:两个标签的class可以一样,但是id通常情况下不能取一样的值,即一个标签的id在整个html文档中是独一无二的。
④id可以与JavaScript结合在一起使用,由于id是独一无二的,使用document.getElementById("code1")获得当前文档对象中id为"code1"的那个标签对象的引用。
3、多标签选择
1)例1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1,p{ font-size: 16px; color: red; }
</style>
</head>
<body>
<h1>//第一个Javac程序</h1>
<pre>
<p>
public class Hello {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</p>
</pre>
</body>
</html>
总结:
①h1,p{}表示将html文档中的h1和p标签都设置为{}中的样式。
②","相当于"与"的关系。
2)例2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p a{ font-size: 16px; color: red; }
</style>
</head>
<body>
<p>
<a>Hello</a>
</p>
<p>World</p>
</body>
</html>
总结:
①p a{}表示将p标签内部的a标签设置为{}中的样式。
②" "(空格)表示从属关系。
二、装饰超链接的伪类选择符
1、对链接的修饰
1)a:link未访问时的状态
2)a:visited访问过后的状态
3)a:active鼠标点中不放时的状态
4)a:hover鼠标划过时的状态
5)例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{color: blue; text-decoration: none; }
a:visited{ color: blueviolet; text-decoration: none;}
a:hover{ color: blue; text-decoration: underline; }
a:active{ color: red; text-decoration: none; }
</style>
</head>
<body>
<a href="01.html">我就是用来说明问题的链接</a>
</body>
</html>
总结:
①设置伪类的顺序一定要是:a:link->a:visited->a:hover->a:active
②在实际开发中经常只设置两种:a、a:hover
如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{color: gray; text-decoration: none; }
a:hover{ color: blue; text-decoration: underline; }
</style>
</head>
<body>
<a href="01.html">我就是用来说明问题的链接</a>
</body>
</html>