了解Web前端3-CSS层叠样式表
CSS样式层叠表
-
- 1.CSS 概述
- 2.属性选择器
-
- 2.1属性选择器
- 2.2属性和值选择器
- 2.3属性和值的选择器 - 多值
- 3.类和ID选择器
-
- 3.1ID选择器
- 3.2类选择器
- 3.3为特定元素使用class
1.CSS 概述
CSS是一种标记语言，Cascading Style Sheets，用于为HTML文档定义布局。
CSS改变样式需要明确：改变谁，改什么，怎么改。
告诉CSS改变谁就需要用到选择器，如ID选择器是通过ID来选择标签，然后告诉CSS改变这个标签的什么属性，最后指定这个属性的属性值。
2.属性选择器
通过属性来选择标签，这些属性既可以是标准属性（如input标签中的type属性），也可以是自定义属性。
2.1属性选择器
下面的例子是把包含标题（title）的所有元素变为蓝色：
[title] {
color:blue;
}
2.2属性和值选择器
下面的实例改变了标题title='runoob’元素的边框样式:
[title=runoob] {
border:5px solid green;
}
2.3属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:
只要属性的值里面包含hello这个值就生效。
[title~=hello] {
color:blue;
}
exp：
<html>
<head>
<meta charset="utf-8">
<title>测试title>
<style>
[title~=hello]
{
color:blue;
}
style>
head>
<body>
<h2>将适用:h2>
<h1 title="hello world">Hello worldh1>
<p title="student hello">Hello CSS students!p>
<hr>
<h2>将不适用:h2>
<p title="student">Hi CSS students!p>
body>
html>
输出：
测试
将适用:
Hello world
Hello CSS students!
将不适用:
Hi CSS students!
3.类和ID选择器
3.1ID选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“para1”:
#para1 {
text-align:center;
color:red;
}
注：HTML页面中的ID都必须唯一，所以一个ID选择器只能生效一次。
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
3.2类选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center {
text-align:center;
}
exp:
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<style>
.center
{
text-align:center;
}
style>
head>
<body>
<h1 class="center">标题居中h1>
<p class="center">段落居中。p>
body>
html>
输出：
菜鸟教程(runoob.com)
标题居中
段落居中。
3.3为特定元素使用class
在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:
p.center {
text-align:center;
}
exp:
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<style>
p.center
{
text-align:center;
}
style>
head>
<body>
<h1 class="center">这个标题不受影响h1>
<p class="center">这个段落居中对齐。p>
body>
html>
输出：
菜鸟教程(runoob.com)
这个标题不受影响
这个段落居中对齐。
markdown对HTML支持不太友好哈。