CSS

  1、什么是CSS

  CSS指的是层叠样式表(Cascading Style Sheet)

 

2、CSS作用

   美化网页，类似人穿上新的衣服

 

3、CSS的优势

  1)、内容与表现分离

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

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

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

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

4、CSS语法规则

  选择器{ 声明1；

          声明2；

          声明3；

  }

 

  例： h1{

         font-size:12px;

         color；red；

       }

      声明由属性和属性值组成

5、选择器

  (1)标签选择器：选择器写法和标签是一致的。作用范围：在该页面中所有的这些标签会使用统一的样式。

        如果有个别某些h1不想使用这个样式怎么办？ 肯定不能使用h1这个标签选择器

        如果有些段落p也不想使用h1的那个样式怎么办？

  (2)类选择器:相比于标签选择器好处在于不同标签可以使用同一样式，可以用姓名来类比

     .类名{

         属性：值；

     }

     例：

      .color{

          color：red

      }

      <h1></h1>

      <p class="color"></p>

   (3)ID选择器：与类选择器相比，类选择器只要定义了该类则可以使用其样式，而ID选择器只能有唯一一个，可以用身份证号码来类比。某一个特定的标签专属的样式

     #id名{         这里id名就改为”id1”

       Color：red；

     }

     <h1 id=”id1”></h1>

 

CSS注释 /*...*/与html注释<!--...-->不同

6、颜色

  1、英文单词：red、yellow等

  2、使用十六进制数字表示 0-9 A-F

       例子：color：#ff0000；

            一共有6位，2位为1份，共3份

         RGB     red green blue

               头两位的"ff"表示十六进制最高代表红色，中间2位"00"表示无绿色

               末两位的"00"表示无蓝色，结合起来就是红色

7、CSS怎么用？

  (1)内部样式表：应用在head标签内

         <style>  

             h1{

                color:red;

             }

         </style>

  (2)内联样式:直接在HTML标签中设置的样式，作用在特定的某一个标签

        <h1 style="color:red"></h1>

 

  (3)外部样式表：

     方法1-链接式：

     先创建一个外部的CSS文件：*.css，把样式写在这个文件中，然后在*.html中引入css样式。在head标签中，通过"<link rel="stylesheet" href="" style="text/css">"

stylesheet指一个样式表，href指样式文件的路径，style指文件的类型

     方法2-导入式：

     在head标签中写入我新建的mystyle.css样式

     <style>

         @import “css/mystyle.css”

     </style>

   

链接式与导入式的区别

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

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

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

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

第2和第3点的差别在于网速，当网速慢时对于第3点来说先显示的一个框架，CSS文件导入的慢，因此样式可能在稍后呈现出来，效果不美观，体验就不好。而对于第2点是加载完样式才呈现出效果出来，就算网速慢，它还是呈现出样式出来，体验好

 综上，所以建议使用链接式

8、内部样式 外部样式 内联样式同时作用在一个标签中，哪个优先级最高？当同一个标签使用不同选择器，样式不同，哪个优先级更高呢？

优先级问题：

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

   内联样式>内部样式>外部样式  （就近选择）

9、如何编写自己的样式声明

   学习方法

     查看w3cshool手册，定位到CSS

   字体

   文本

  超链接

  背景

  列表

10、文本在网页中的作用

  1、传递页面信息

  2、美化页面文本

  3、页面美观漂亮

  4、突出主题

  5、吸引用户

  6、增强用户体验

11、字体样式

   属性            含义                  实例

  font-family  设置字体类型             font-family:"隶书";

  font-size    设置字体大小             font-size:12px;

  font-style   设置字体风格             font-style:italic;    /*斜体*/

  font-weight  设置字体粗细             font-weight:bold;

  font     在一个生命中设置所有字体属性 font:italic bold 36px "宋体";

12、常见问题及错误

    （1）CSS文件中设置的中文字体类型不起作用，怎么解决？

                CSS文件编码重新设置为utf-8即可

    （2）如果页面中既有中文又有英文，怎么修饰字体类型？

     首先这些字体格式必须是系统有的，可以打开word文档看看是否有这些格式。网页中既有中文又有英文，我想给他们不同的样式，如中文是微软雅黑，英文cursive，那么就可以写成font-family:cursive,"微软雅黑";这句就会使得中文字体显示微软雅黑，英文字体显示cursive。

        注意：英文字体类型要写在中文字体类型前面

        例：css    body{

               font-family:"微软雅黑";

             }

               html      这是一首诗<br/>

                              this is a poem!