1.行内样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p style="color:red;font-style:italic;text-shadow:10px 10px 5px blue ;">I Love you</p>
</body>
</html>
2.内嵌样式(内部样式)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{
text-decoration: underline;
color: red;
}
</style>
</head>
<body>
<p>I Love you</p>
</body>
</html>
3. 链接样式 (外部样式)Link
<link href="css/mycss.css" rel="stylesheet" type="text/css" />
<!--
作者:www.1359848596@qq.com
时间:2019-09-04
描述:通过link链接css
-->
html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/mycss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>I Love you</p>
</body>
</html>
mycss.css如下:
p{
color: red;
font-size: 20px;
font-weight: bold;
font-style: italic;
}
4.导入样式 @import
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@import url("css/mycss.css");
</style>
</head>
<body>
<p>I Love you</p>
</body>
</html>
<!--
作者:www.1359848596@qq.com
时间:2019-09-04
描述:mycss使用以上
-->
Css选择器
css选择器,也称为选择符,用于选择需要添加样式的元素
css的基本语法:
选择器{
属性:属性值; (样式规则:键值对)
}
1. 全局选择器
html代码:
<h1>我是标题红色</h1>
<p>我是段落红色</p>
css代码:
*{ color:red;}
组合选择器:
html代码:
<a href="###" >链接一</a>
<a href="###">链接二</a>
<h1 class="h1">AAA</h1>
<p>BBB</p>
css代码:
a,h1,p{
text-decoration: line-through;
}
2. 类选择器 样式名选择器
html代码:
<p class="color">AAA</p>
<p>BBB</p>
css代码:
p{
color: royalblue;
}
p.color{
color: red;
}
3.ID选择器(唯一出现)
html代码:
<p id="color">AAA</p>
css代码:
#color{
color: salmon;
}
4.伪类选择器
a:link(未被访问过,访问之前的状态)
a:hover (鼠标滑过) a:hover{text-decoration: underline;}; 鼠标放上去后有下划线
a:active(鼠标按下)
a:visited(访问过后)
伪类选择器: 用伪类定义的样式并不是作用在标记上,而是作用在标记的状态上。
我们这里只要求掌握超链接的伪类a:hover。
伪类选择器的语法: