HTML CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。比如我们前面所学的给<body>加一个背景色。给<p>标签里面的文字改变颜色，这些都是用css做到的
如何使用CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件，css文件指的是以 .css 结尾的文件，我们的html文件是以.html结尾的
在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。
你可以通过本站的CSS教程 CSS 教程学习更多的CSS知识.
内联样式
内联样式就是在HTML 标签内部直接使用 style 属性直接定义，我们前面的课程也有提到，看下面的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p style="color: red; margin-left: 20px"> 我是内联样式 </p> </body> </html>
上面的css样式是将<p>标签里的文字变成黑色，然后文字往左边移动20px，px指的是像素
代码运行结果：
内部样式表
当单个文件需要特别样式时，比如将两个<P>标签设成红色，如果用内联样式定义的话，需要在两个<P>标签都要写上css样式，如果是5,10<P>标签呢，是不是很麻烦，这就要用的我们的内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表，像下面这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>php.cn</title>
<style type="text/css">
p{color: red}
</style>
</head>
<body>
<p>
我的颜色是在 head 标签里面定义的
</p>
<p>
我的颜色是在 head 标签里面定义的
</p>
<p>
我的颜色是在 head 标签里面定义的
</p>
</body>
</html>代码运行结果：
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。
外部样式表是用<link>标签引入一个外部css文件，使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
比如一个css文件里面定义的是把<body>的背景色变成黄色，<h1>标题变成红色，<p>变成蓝色，css文件如下
body{background-color:yellow;}
p{color: blue;}
h1{color: red;}在HTML文件引入用<link>引入css文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> <link rel="stylesheet" type="text/css" href="first.css"> </head> <body> <h1>外部样式表</h1> <p> 我的颜色是用外部样式表定义的 </p> <p> 我的颜色是用外部样式表定义的 </p> </body> </html>
程序运行结果：
HTML 样式标签
| 标签 | 描述 |
| <style> | 定义文本样式 |
| <link> | 定义资源引用地址 |
实例
我们前面学的<a>链接标签，下面是带着下划线的，我们用css样式把下划线去掉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <a href="http://www.php.cn/" style="text-decoration:none;">访问 php.cn!</a> </body> </html>
程序运行结果：
访问我们的 CSS 教程，学习更多有关样式的知识。
女神的闺蜜爱上我
外联在实际开发中用的比较多
7年前 添加回复 0