CSS教程

初学CSS知识总结

本文主要是介绍初学CSS知识总结，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一.CSS是什么？


        CSS(Cascading Style Sheets)，层叠样式表。

二.css引入方式

 三种方式优先级：行内样式最大，其余两种最后引入，优先级最高。

1.行内样式  

 直接在开始标签上加style属性来控制样式
  例如：<div style="color:red;">内容</div>

 2.内嵌式

所有的样式都写到一个<style></style>内部，该标签放<head></head>内部
例如：<style type="text/css">
               选择器{ 样式属性名 ：属性值 ; }
           </style>

3.外链式

 所有的样式都写到一个单独的css文件里（文件后缀是 .css）,通过在<head></head>内部用<link rel="stylesheet" href="css文件路径">来引入该css文件

 三.选择器

名称示例
 通配符选择器 （ 权重0.5）  *{
    样式属性名 : 属性值 ;
    ...
     }

标签选择器    （ 权重1）

 标签名{ 
    样式属性名 : 属性值 ;
    ...
   }
类选择器      （权重10） .类值{
    样式属性名 : 属性值 ;
    ...
   }
id选择器      权重100 #id值{
    样式属性名 : 属性值 ;
    ...
   }
包含选择器    权重相加 选择器E  选择器F{
    样式属性名 : 属性值 ;
    ...
   }
分组选择器 选择器E，选择器F,...{ }

 四.字体相关样式

1.  font-size  字体大小    单位px,em

2.  font-family  字体系列
    设置多个字体时，多个字体间用逗号隔开
    如果设置的字体名字里有空格的，用引号引起来

3.  font-style    字体风格
    值： 1）normal   正常 不倾斜
           2）italic   斜体
           3）oblique   倾斜、

 4.  font-weight   字体粗细
    值:  1) normal  正常  不加粗
          2）bold   加粗
          3）bolder   粗体
          4）lighter  细体
          5）100-900  9个层次  数值越大，字体越粗


 5.  eline-hight    行高
    值： 1）数值+单位
           2） 数值 （无单位）    倍数

  缩写： font : font-style值  font-weight值   font-size值 / line-height值   font-family值 ; 

还未学完此处省略n字

CSS中注释符号是/*与*/

href与src的区别

（1）请求资源类型不同：

href是超文本引用的简写，用来为当前元素和文档之间建立连接，常用的是link、a标签。
src会将指向的资源下载并引用到当前文档中，常用的标签有script，img，iframe标签。

（2）作用的结果不同：

href是为当前文档和引用资源建立联系；
而src是替换当前的元素。

（3）浏览器的解析方式不同

herf引用的资源，浏览器会将其识别为CSS文档，并行下载资源并且不会停止对当前文档的处理。
当浏览器解析到src时，会暂停其他资源的下载和处理，直接将该资源下载，编译，执行完毕，图片和框架也是如此，类似于将所指资源应用到当前内容。

action可以传递表单数据，不是单纯的跳转

使用link与@import引入css文件用法区别

页面导入外部css文件的方法通常有两种，一种在网页中直接link标签加入，另一种在页面中@import引入css文件。两种引入形式如下：

 

link引入形式：

<link href="styles.css" type="text/css" />

@import引用形式：

<style type="text/css">@import url("styles.css");</style>

1 适用范围不同
@import可以在网页页面中使用，也可以在css文件中使用，用来将多个css文件引入到一个css文件中；而link只能将css文件引入到网页页面中。
2 功能范围不同
link属于XHTML标签，而@import是CSS提供的一种方式，link标签除了可以加载CSS外，还可以定义rel连接属性，定义RSS等，@import就只能加载CSS。
3 加载顺序不同
页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）。
4 兼容性
由于@import是css2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
5 控制样式时的差别
使用link方式可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式。
6 使用DOM控制样式时的差别
当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。


 

这篇关于初学CSS知识总结的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航