CSS的基本概念
CSS的概念
Cascading Style Sheets(CSS)是一门指定文档该如何呈现给用户的语言。
CSS的优点
- 避免重复
- 更容易维护
- 为不同的目的,使用不同的样式而内容相同
内联样式
内联CSS也称为行内CSS,它直接在标签内部引入,显著的优点是十分便捷、高效;但同时也造成了不能够重用样式的缺点。
选择器
- 标签选择器
我们可以将标签名作为选择器,为所有该标签显示的元素添加样式。
<style>
p {
color: red;
}
</style>
<p>小喵</p>
<p>小狗</p>
- 类选择器
通过设置元素的 class 属性,可以为元素指定类名。文档中的多个元素可以拥有同一个类名。可以使用类名作为选择器,为拥有同一类名的元素添加样式。 - ID 选择器
通过设置元素的 id 属性为该元素指定 ID。每个ID 在文档中必须是唯一的。可以通过ID 选择其为某一个元素添加样式。ID 选择器使用 #ID 名表示。
伪类
CSS伪类(pseudo-class)是加在选择器后面的用来指定元素状态的关键字。
- :link 是用来选中元素当中的链接
- :visited 表示用户已访问过的链接
- :hover 适用于用户使用指示设备虚指一个元素的情况
- :active 匹配被用户激活的元素
- :focus 表示获得焦点的元素
- :checked 表示任何处于选中状态的元素
CSS 常用样式
文本样式
color:颜色
fon-size:文字大小
font-weight:文字粗细
font-family:字体集
font-variant:字体变体
font-style:字体样式
text-align:文字对齐
text-decoration:文字装饰
text-indent:文字缩进
text-shadow:文字阴影
line-height:行高
word-spacing:单词间距
letter-spacing:字母间距
颜色
关键字:red、blue、black等
rgb坐标值:rgb(255,0,0)、rgb(0,0,255)、rgb(0,0,0)等
十六进制值:#ff0000、#0000ff、000000等
列表
- list-style-type:列表样式类型
- list-style-image:列表样式图片
内容
- 内容文字:CSS可以在元素的前后插入文本:在选择器的后面加上 ::before 或者 ::after。在声明中,指定 content 属性,并设置文本内容。
- 内容图片:可以通过将 content 属性值设置为某个图片的URL ,可以将图片插入到元素的前面或后面。
- 背景图片: 将 background 的值设为图片的 URL 可以将图片设置成元素的背景图。