css

CSS入门

下文是笔者整理的第一篇CSS学习资料,本文非常全面的讲述CSS的方方面面
是一篇CSS入门的最佳文章,希望能给自己及CSS爱好者带来帮助,如下所示

CSS指什么

  CSS通常指后缀名为css的样式文件(这个一个纯文本文件)
  CSS也是包含在网页的style标签下的内容,
     这些内容也称之为“CSS样式信息”
  CSS也指html元素中style属性中的值 
    如:style='color:red;'
	   color:red就是将字体设置为红色的一个css样式信息

CSS的作用

可使网页变漂亮
   如:布局变美、元素上色、大小自适应等等很多优点

当然CSS的大部分应用场景，是作用在网页上

html页面引入CSS的方式

内联样式:
   使用style直接编写在html元素的属性上 

嵌入式样式:
   使用<style>标签,直接将CSS信息写入到
     html文档头部元素中

外部样式表:
   使用<link>元素
   链接到外部的CSS文件

三种引入CSS样式的解析优先级说明

 内联样式的优先级最高
  外部样式表的优先级最低
  
 html元素属性上的样式级别最高
   其次是 html头文件中的样式信息
   最后(级别)最低的是外部引入的CSS文件

内联样式的示例说明

内联样式:
   将CSS规则直接写入到html元素上
   style属性上常使用   property: value 的方式成对出现
    每对属性之间使用逗号分隔

内联样式注意事项:
    1.每对属性之间使用逗号分隔
	2.分号之间不能有换行符
	3.style后的所有样式必须在一行上

例:使用内联样式设置字体颜色和大小

<h1 style="color:red; font-size:30px;">linux28是市面上最优秀的教程站</h1>
<p style="color:green; font-size:22px;">linux28.com是最优秀的linux教程站</p>
<div style="color:blue; font-size:14px;">linux28.com是最优秀的java教程站</div>

内联样式的优点和缺点

内联样式的缺点：
    由于内联样式和html元素混合在一起,维护起来比较吃力
	想统一快速更换样式，难度非常大
内联样式的优点：
     优先级高,调试速度快

嵌入式样式表

嵌入式样式表:
    指嵌入到当前网页的头文件上的样式信息
	 通常我们将其放入到head中的style标签进行包裹

例

<!DOCTYPE html><html lang="en"><head>
    <title>嵌入式样式表的示例</title>
    <style>
        body { background-color: red; }
        p { color: #fff; }
    </style></head><body>
    <h1>linux28最佳知识库</h1>
    <p>linux28我的最爱</p></body></html>

外部样式表

外部样式表的简介:
    指在当前html页面外部,单独使用一个文件存储css信息
    当有网页需要使用CSS样式时,只需引入样式信息即可

外部样式表的优点：
    是目前我们使用最多的一种方式,这种方式有利于我们统一维护网页的样式
	  如:制作多套皮肤,其实是制作多个外部CSS样式文件

如何导入外部样式表

我们可以使用“链接”和“导入”两种方式引入外部样式表

下文笔者将通过示例的方式讲述导入外部CSS样式表的方法,如下所示

链接外部样式表

//1.创建外部样式表,命名为“test.css”,放入以下内容

body {
    background: lightyellow;
    font: 20px Arial, sans-serif;}h1 {
    color:red;}

使用link的方式引入外部样式表

例

<!DOCTYPE html><html lang="en"><head>
    <title>My HTML Document</title>
    <link rel="stylesheet" href="css/test.css"></head><body>
    <h1>linux28.com最美知识库</h1>
    <p>这是link方式链接外部CSS示例</p></body></html>

导入外部样式表

导入外部样式表的实现思路:
   使用@import的方式
     即可加载外部样式表
	 该@import语句指示浏览器加载外部样式表并使用其样式

注意事项:
    1.使用import导入外部样式表
	  也可在一个样式表中导入另一个样式表
	2.@import必须写在样式表的开头位置
	   样式表后面的规则会覆盖import中导入的规则
	3.import导入样式的性能比较地下

例

//html网页头部导入样式表
<style>
    @import url("css/test.css");
    p {
        color: blue;
        font-size: 16px;
    }
  </style>
 
//样式表中导入其他样式表
@import url("css/layout.css");
@import url("css/color.css");body {
    color: blue;
    font-size:12px;
}

CSS语法规则