css是什么？为什么会出现css？它有什么神奇之处？
初学者肯定都会有这几个疑问，这篇文章我会一一介绍，顺便解决在HTML中留下的几个坑。
css是什么？
在HTML中我介绍过用HTML的属性为HTML增加一些让我们在网页中可见的一些外观，比如长高，背景色等等，但是当我们使用了大量的属性的时候，会发现标签变得臃肿，且不易维护，代码中内容和属性杂糅，无法阅读，使用大量属性又无法重用，比如两个p，都是一样的背景色，却要连续使用两次属性去设置同样的值，而在实际项目中，都会要求代码可读性强，易维护，可重用，这时候css自然的应运而生，css可以把HTML表现的样式分开，而HTML只关注内容，从而使得代码更加简洁明了，易维护，可重用。
CSS全称Cascading Style Sheet，翻译过来就是层叠样式表，又称级联样式表，简称样式表。
css的特点
1、实现内容与表现相分离
2、提高了代码的可重用性和可维护性
HTML属性 与 CSS 样式的使用原则:
1、W3C 建议尽量使用 CSS样式取代HTML属性
2、HTML中的专有属性，无法通过CSS取代的只能选择html属性，如 rowspan、colspan
如何使用CSS
既然已经知道了CSS的好处，那么如何在HTML中使用CSS呢？
1、内联方式
别名：行内样式、内联样式
特点：将样式属性定义在html标签中
语法：
将样式定义在标签的 style 属性中<div style=""></div>
style属性值 ： 是以 ; 隔开的多个 属性/值 对的内容
属性 与 值 之间 通过 : 连接
<div style="属性:值;属性:值;"></div>
常用的属性和值:
属性 值
color 颜色英文名称
font-size 以 px/pt 作为单位的数字
background-color 颜色英文名称
<p style="background-color:red;font-size:16px">
这里是一段文本
</p>
2、内部样式表
特点：将 "样式规则" 放在 <style>的元素内
1、在 <head>中添加<style>元素
2、在 <style> 中增加若干样式规则
样式规则:
1、选择器 : 规范页面中哪些元素能够使用定义好的样式（在这里我不会解释选择器，大家只要按
着这样定义即可，我会在css选择器着重讲解css选择器）
2、样式声明 : 到底元素长的什么样
选择器{
样式声明;
样式声明;
color:red;
font-size:18px;
background-color:green;
}
<head>
.
.
.
<style>
p {
color:red;
font-size:18px;
background-color:green;
}
</style>
</head>
<body>
<p>这里是一段文本</p>
</body>
3、外部样式表
特点：
1、将样式定义在 一个外部的 CSS文件中(以 .css 作为后缀名称的文本文件)
2、在 css 文件中 添加若干 样式规则
3、在任何html网页中 引入 独立的 css 文件
在 head 中 增加以下标记 对外部样式表进行引入
<link rel="stylesheet" type="text/css" href="css文件地址">
网友评论