p {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 20px;
}
.one {
box-shadow: 5px 5px 3px rgba(0,0,0,.5);
}标签的外观。这时就可以用类选择符选取要装饰的词。
需要注意的是,使用类选择符选取某个标签里的部分单词时,需要借助标签。
类选择符的用法:
在CSS中,类选择符的名称必须以点号开头。这样Web浏览器才能在样式表中找到类选择符。
类选择符的名称中只能包含字母、数字、连字符和下划线。
选择符的名称必须以字母开头。
类选择符区分大小写。
在HTML中,标签设置class属性。 。
在HTML中,class属性的值前面不用加点号。只有在样式表中类选择符的名称前面需要点号。
一个标签使用多个类
除了可以把同一个类应用到不同的标签上之外,一个标签还可以同时使用多个类。
编写多个类样式,在一个标签中设置多个类,听起来要做很多工作,可在实际开发中却经常这么做。比较火的bootstrap框架就这么做的。
例如我们有多个p,每个p的大小、边框都一样,其他属性各不相同。
HTML代码:
/* 类型选择器 */
p {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 20px;
}
/* 以下三个都是类选择器 */
.one {
background: linear-gradient(#1574A8, #15A892);
box-shadow: 5px 5px 3px rgba(0,0,0,.5);
}
.two {
background: radial-gradient(#E94E65, #15A892);
}
.three {
background:
linear-gradient(to bottom, cyan, transparent),
linear-gradient(225deg, magenta, transparent),
linear-gradient(45deg, yellow, transparent);
}
p {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 20px;
}
#d1 {
background:
linear-gradient(to bottom, cyan, transparent),
linear-gradient(225deg, magenta, transparent),
linear-gradient(45deg, yellow, transparent);
}
