如果你已经有过html标签的过程,接下来必不可少的就是对html中的标签进行样式的修整，这些偏亮的样式就是要学习的css相关知识。 css由一条或者多条以分号隔开的样式组成，每一个样式包括属性和这些属性对应的值。 1 ：使用css
<p>我是一个段落</p> <p style="color:red;font-size:50px;">我是被修饰的段落</p>解释：上面的两个相同的p标签一个存在css样式，一个不存在css样式。 你可以编写在页面上查看这两句话的差别。在第二个标签:style表示行内样式属性，color表示段落字体颜色，font-size表示字体大小。
2：css使用的三种方式 2.1：元素内嵌样式 上面被修饰的p标签采用的就是元素内嵌样式 2.2：文档内嵌样式
下面代码采用的文档内嵌样式
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css入门</title> <style type="text/css"> .p{ color:red; font-size:50px; } </style> </head> <body> <p >我是一个段落</p> <!-- <p style="color:red;font-size:50px;">我是被修饰的段落</p>--> <p class="p">我是被修饰的段落</p> </body> </html>2.3：外部引用样式 外部应用需要建立扩展名为.css的文件，然后在html文档中使用link标签引入.css文件。 下面是.css文件中的代码style.css
@charset utf-8; .p{ color:red; font-size:50px; }然后是htmlin文档代码，该文档代码中引入该css样式文件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css入门</title> <link rel="stylesheet" href="style.css"> </head> <body> <p >我是一个段落</p> <p class="p">我是被修饰的段落</p> </body> </html>3：css的层叠和继承 3.1：浏览器样式
<b>我是加粗字体</b> <span>我是平常字体</span>b标签本身就有加粗功能，在b标签内的文字是加粗过的样式。即使没有采用任何css进行修饰本身就有的功能简单来说就可以认为是浏览器样式 3.2：样式表层叠 样式表层叠通过五种方式进行，如果样式相同，那么比如会产生冲突替换。这时，它的优先级顺序就显的比较重要。以下优先级从低到高： (1).浏览器样式（元素自身携带的样式）； (2).外部引入样式（使用link引入的样式）； (3).文档内嵌样式（使用style元素设置）； (4).元素内嵌样式（使用 style 属性设置）。 如果某一个样式被优先级高的给替换掉了，却又想执行这个样式方案，可以将这个方案 标记成重要样式（important）。 //强行设置最高优先级 color: green !important; 3.3：样式继承 如果某一个元素并没有设置和父元素相关的样式，则该元素就会使用继承机制，把父元素的样式继承下来。
<p>p标签中的内容<b>我是p标签中的b标签</b></p> <p style="color:red;">p标签中的内容<b>我是p标签中的b标签</p>第一个p标签没有设置相关的样式，p标签中的没有在子标签b中的内容没有什么效果，而p标签中在b标签中的内容会有加粗样式。 第二个p标签有字体颜色的样式，虽然子标签b中没有进行相关的字体颜色设置，但是会使用继承机制把父标签的颜色样式继承下来。 另外继承机制只适用于元素的外观（文字，颜色，字体等），而在元素页面上的布局不会被继承。如果想要继承页面上的布局就要进行强制继承：inherit
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css入门</title> <style type="text/css"> p{ border:1px solid red; } </style> </head> <body> <p>p标签中的内容<b>我是p标签中的b标签</b></p> <p style="color:red;">p标签中的内容<b>我是p标签中的b标签</p> </body> </html>运行上面的代码你可以看到p标签会有边框，如下图所示： 从图片中我们可以看到p标签的子标签b标签并没有边框。但是如果将style添加下面的代码:
b{ border:inherit; }再次运行代码，效果图如下：
