基本语法
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
p {
color: red;
font-size: 30px;
text-decoration: underline;
font-weight: bold;
text-align: center;
font-style: italic;
}
h1 {
color: blue;
font-size: 50px;
font-weight: bold;
background-color: pink;
}
</style>
</head>
css的代码用标签<style>
来代表
使用选择器选择标签、样式(class)或者id后,在后面的代码中写好样式语句
css的语法格式相当于键值对
选择器 {
k: v;
k: v;
k: v;
k: v;
}
选择器 {
k: v;
k: v;
k: v;
k: v;
}
常见css属性:
- 字号大小:(fos)
font-size:40px;
- 背景颜色:(bgc)
background-color: blue;
- 加粗:(fwb)
font-weight: bold;
除了上述写法外,css还有两种写法
- 行内式
<p style="color:white;background-color:red">hihi</p>
- 内嵌式
即上文所述方式
- 外部css文件
(1)采用标签。例如:
<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
(2)采用 import,必须写在
@import url(a.css) ;
选择器
标签选择器:针对一类标签
div{
border:1px;
}
ID 选择器:针对某一个特定的标签使用
#myid{
border:3px;
}
类选择器:针对你想要的所有标签使用
.class{
color:blue;
}
伪类选择器
伪类选择器分为两种。
(1)静态伪类:只能用于超链接的样式。如下:
:link 超链接点击之前
:visited 链接被访问过之后
PS:以上两种样式,只能用于超链接。
(2)动态伪类:针对所有标签都适用的样式。如下:
:hover “悬停”:鼠标放到标签上的时候
:active “激活”: 鼠标点击标签,但是不松手时。
:focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点)