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知识总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!