html学习第二天

2018-01-11 12:52:00来源:网络收集作者:程序诗人人点击

分享

阿里云爆款

今天主要的学习内容如下


(1)css简介


(2)css语法


(3)样式的创建


(4)两种引入外部样式表的区别


(5)css选择器


一、css简介


英文全名:cascading style sheets ===cascading style sheet 


        层叠样式表:修饰网页信息的显示样子


二、css语法


选择符{ 属性:属性值;属性:属性值;}


        例如:h1{color:red;font-size:14px;}


其中 h1叫做选择符,color 和font-size叫做属性,red和14px 叫做属性值


说明


1)每个css样式有两部分组成,选择符和声明组成,声明包括属性和属性值


2)属性必须放在花括号中,属性与属性值之间用冒号连接。


3)每条声明必须用分号结束


4)当一个属性有多个属性值的时候,属性值之间不分先后顺序,并且,多个属性值之间用空格分开。


5)在书写样式的过程中,空格,换行等操作不影响属性显示


三、样式的创建(内部样式,外部样式,内联样式)


1)内部样式


语法:


2)外部样式


  语法(1):



    rel (relation):用于定义文档关联,表示关联样式表


    type:表示文档类型


语法(2):



注意:@和import之间 ,以及url和小括号之间都没有空格,import和URL之间有空格,而且,最后一定注意用分号结尾,初学者可以不用看第二种方式,这种方式也不常用


3)内联样式(行内样式,行间样式,嵌入式样式)


语法:<标签>

注意:css样式的创建,不管是内部样式,外部样式,虽然写在哪个位置都可以,但是最好是写在头部


四、两种引入外部样式表 link和import的 区别(此条可不看)


1)本质的区别:link属于Xhtml标签,而@import 完全是css提供的一种方式


2)加载顺序的区别:当一个页面被加载的时候,link引用的css会被同时加载,而@import引用的css会等页面全部加载完之后再被加载,所以,有时候浏览器加载使用@import引用的css时,开始时会没有样式,当网速慢的时候,会比较明显


3)兼容性的差别;老的浏览器不支持@import,IE5以上的才可以支持@import,而link没有此问题


4)使用dom(document object model 文档对象模型)控制样式时的差别,当使用jsqu 控制dom去改变样式时,只能适应link标签,因为@import不是dom可以控制的


五。样式表的优先级


1)内联样式的级别最高


2)内部样式和外部样式哪个写在下面哪个优先级高,因为页面加载是从上到下,如果同一样式在内部样式和外部样式都有的话,下面的会覆盖掉上面的。


六、css选择符(选择器)


css的选择符包括大类;标签选择符,id选择符,class 选择符,特殊选择符


1)标签选择符


就是我们说的标签,给某类标签设置样式,只用将上文中的选择符换成标签即可,


注意:标签选择符一般用来清除默认样式,每个标签都会有默认的样式,我们在使用的时候,要消除默认样式,这时候,使用标签选择器就是最好的选择


另外一种就是,页面中的某类标签显示同样的样式,这是用标签选择器


2)id选择器


语法:#id名{属性:属性值;属性:属性值;}


   标签中使用<标签 id="id名">


注意:id名的使用要唯一,就像每个人的身份证号一样,不能重复


3)类选择器


语法:.类名{属性:属性值;属性:属性值;}


   标签中使用<标签 class="类名">


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台