CSS简介，语法及CSS与HTML结合方式

目录

 

CSS简介

CSS语法

CSS与HTML结合方式

引用CSS优先级问题

---

CSS简介

•   CSS 指层叠样式表 (Cascading Style Sheets)
• 层叠性：层叠性是指同时控制多重页面的布局和样式。增加了网页的用户体验。举个例子

               

              

             上图网页就是应用了层叠样式表，层叠的优先级决定了哪个页面在上面，那个页面在下面。

• 引入CSS是为了解决将页面内容与样式分离的问题，因为HTML中想要改变样式只能操作标签的属性值，可维护性差，CSS可以在HTML之外改变样式。

 

---

CSS语法

css语法一般是 选择器 {属性：值 ； 属性：值； }

选择器：https://blog.youkuaiyun.com/ljq961206/article/details/81270338

语法见下图

#top{

    		color: white; display: inline; font-weight: lighter;
    	}

 

---

 

CSS与HTML结合方式

 在了解一个新技术的时候，首先就应该了解结合方式，这样才可以跟以往的技术联系在一起，才有接下去学习的动力。

1.   在标签内添加style属性，在style中按照css语法格式  属性：值； 添加样式即可

<font style="color: white; display: inline; font-weight: lighter;">这是一句话</font>

     

    2.在HTML头标签中使用style标签，在style标签中按照css语法格式编写代码

<style type="text/css">

    	#top{

    		color: white; display: inline; font-weight: lighter;
    	}

    	
    </style>

     

    3.在HTML头标签中使用link标签引用css文件：<link rel="stylesheet" type="text/css" href="css文件的路径" />

首先创建一个css文件  .css结尾文件

然后在html文件中使用link标签引用该css文件。

<link rel="stylesheet" type="text/css" href="css/StyleSheet_1.css" />

这个引用方法是最重要的方法，因为这个方式实现了页面内容与样式之间的分离，而且修改样式只需在css文件中修改即可，不用修改html文件。

---

 

引用CSS优先级问题

    原则：随着位置的由近到远，样式影响也越来越弱。意思是在样式的影响程度 ：标签中 > HTML文件中 > link标签引用