新手笔记——CSS

什么是CSS   美化网页

CSS:层叠样式表（Cascading Style Sheet）

CSS的优势

1、内容与样式分离

2、网页的表现同一，容易修改

3、丰富的样式，是页面布局更加灵活

4、减少网页的代码量，增加网页的浏览速度，节省网络宽带

5、运用独立于页面的CSS，有利于网页被搜索引擎收取

 

CSS语法规则

选择器{                                                       h1{

            属性:值;                                                font-size:12px;

            属性:值 ;                                                color:#F00;     

            ......                                         ......

}                                                                      }

h1:选择器               font-size：属性           12px：值        

(font-size:12px;       color:#F00;  )：声明

 

选择器

        标签选择器:选择器写法和标签是一致的。所有的这些标签会使用统一的样式  

                    p{font-size:16px;color:red;}

        类选择器：某一些标签或某一些不同的标签 使用一种选择器

                    .red{

color:red;

}

   <h1></h1>

<h1 class=”red”></h1>

<h1></h1>

<p></p>

<p class=”red”></p>

 

        ID选择器：想要某一个元素使用特点的样式 使用不可重复的原因是不符合标签规则的

                    #green{

color:#00ff00;

}

<p id=”green”></p>

 

颜色：使用英文单词：red、yellow、blue、green。。。。

  使用十六进制数字表示 0-9 A B C D E F

  RGB=Red Green Blue

 

 

 

CSS的注释：/*注释内容*/

HTML的注释: <!--注释内容-->

MySQL的注释：--空格 必须有空格

 

CSS的使用

网页中引用CSS样式

    内联样式 <p style=””></p>

    内部样式表<style></style>

外部样式表 

链接式

创建一个外部的css文件：*.css，把样式写在这个文件中

谁想要用这个样式，谁就引入这个css文件即可

<link  rel=”stylesheet” href=”样式文件路径”/>

               

导入式

@import”样式文件路径”       

 

链接式与导入式的区别

<link/>标签属于XHTML，@import是属于CSS2.1

使用<link/>链接的CSS文件先加载到网页当中，在进行编译显示

使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中

@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来书就是无效的

CSS样式优先级

行内样式>内部样式表>外部样式表

ID选择器>类选择器>标签选择器