一、CSS选择器
1、标签选择器
语法格式:
直接指定标签给定样式,比如p标签、h1~h6标题标签等等,下面是部分标签选择器的展示:
<style type="text/css">
p {
text-align: center;
color: red;
font-size: 18px;
}
h1 {
color: aqua;
text-align: center;
}
</style>
</head>
<body>
<h1>标题一的样式</h1>
<p>段落样式</p>
</body>
效果图:
2、类名选择器(class引用)
语法格式:
语法小技巧:
- 长名称或词组可以使用中横线来为选择器命名
- 不建议使用_来命名css选择器
- 不要使用纯数字、中文等命名,尽量使用英文字母表示
举例说明:
效果展示:
3、多类名选择器
语法格式:
就是在class属性中写多个类名,必须用空格分开
举例说明:
<style type="text/css">
.info {
text-align: center;
font-size: 18px;
}
.head {
color: pink;
font-style: italic;
}
</style>
效果展示:
4、ID选择器(用id引用css样式)
语法格式:
举例说明:
效果展示:
5、通配符选择器
使用*定义,表示选取所有页面的元素,不需要调用
举例说明:
<style type="text/css">
* {
text-align: center;
font-size: 18px;
color: green;
}
</style>
</head>
<body>
<p>测试通配符选择器</p>
<h1>我来了,来测试这个通配符啦!</h1>
</body>
**效果图:
**
二、css的用法
(1)行内样式表()
直接写在标签内,用style属性值引用,
举例:
<p style="color:red"></p>
(2)内部样式表
在head中定义,语法格式:
举例:
<style type="text/css">
p{color:red;}
</style>
(3)外部样式表
将样式单独存于一个文件,通过引用该文件进行样式的设置
引入代码的语法:也是在head中写入
<link rel="stylesheet" href="css文件路径">
总结
在日常开发中,我们最常用的是内部样式表和外部样式表针对样式复杂,且内容较多的我们最好是选择通过外部样式表去设定我们的内容样式,而针对内容不多的可采用内部样式表。