您的位置：首页 > Web前端 > CSS

前端系列之CSS（选择样式）

2018-01-18 17:05 295 查看

什么是CSS？

——CSS层叠样式表（Cascading Style Sheets）

——用于定义HTML内容在浏览器内的显示样式

——CSS简化HTML相关标签，网页体积小，下载快

——解决内容与表现分离的问题

——更好的维护网页，提高工作效率

一.CSS3基本语法

注：实际开发中推荐使用外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css使用方法</title>
<!--2内部样式（嵌入样式）:对于低版本浏览器，不识别style标签，需要包含样式标签-->
<style type="text/css">

/*<!--p {-->*/
/*<!--color: blue;-->*/
/*<!--}-->*/

/*4导入样式*/
@import "css.css";
</style>

<!--3外部样式-->
<!--<link href="css.css" rel="stylesheet" type="text/css">-->
</head>
<body>

<h1>CSS使用方法</h1>
<hr>

<!--1行内样式-->
<p style="color: red;font-size: 20px;">行内样式</p>

<!--2嵌入样式-->
<p>嵌入样式</p>

<!--3外部样式表，把CSS样式代码写在独立的一个文件中，拓展名：CSS文件名.CSS-->
<p>外部样式</p>

<!--4导入样式-->
<p>导入样式</p>
</body>
</html>

二.CSS选择器

伪类

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
a:link{color: blue;} /*未访问状态*/
a:visited{color: gray;} /*已访问状态*/
a:hover{color: green;}  /*鼠标悬浮状态*/
a:active{color: orange;}  /*激活状态*/
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">css使用方法</a>
</body>
</html>