学校网站网站建设,百度站长之家工具,wordpress 空间安装,凡客建站登录入口一.初识CSS#xff1a;
CSS中文称层叠样式表(英文全称#xff1a;Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页#xff0c;还可以配合各种脚本语言动态地对网页各元素进行格式化。
1#xff09;每个CSS样式由两部…一.初识CSS
CSS中文称层叠样式表(英文全称Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页还可以配合各种脚本语言动态地对网页各元素进行格式化。
1每个CSS样式由两部分组成即选择符和声明声明又分为属性和属性值
2属性必须放在花括号中属性与属性值用冒号链接
3每条声明用分号结束
4当一个属性具有多种属性值时属性与属性值不分先后顺序 选择符{ 属性1属性值1; 属性2属性值2; ... } 二.CSS的使用方法
根据CSS样式书写的样式使用方式的不同CSS样式表可分为三种
为方便讲解下述都以改变字体颜色为例子同时也改善使用HTML改变字体样式复杂的问题
1.内部样式表嵌入式)
内部样式表是写在html⻚⾯内部是将所有的CSS代码抽取出来单独放到⼀个 style 标签中例如
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodystyleh1{color:blue;}/styleh1111111111/h1h1111111111/h1h1111111111/h1
/body
/html
我们尝试运行上述代码 我们发现字体的颜色真的改变了另外为了以后书写多行代码方便使用我们通常将CSS部分放在head标签中同时也是不抢占HTML的地盘如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh1{color:blue;}/style
/head
body/body
/html
通过这种方式我们可以方便的控制整个页面的元素样式设置
2.行内样式表内联样式表
⾏内样式表是在元素标签内部的style属性中设定CSS样式,例如
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1 stylecolor:aqua111111/h1
/body
/html
我们尝试运行上述代码 注1style其实是标签属性 2双引号中间遵循CSS写法规范
3.外部样式表
但我们书写的代码行极多的时候为方便我们更改修饰方式我们通常为CSS单独建立一个文件将样式单独写到CSS⽂件中之后把CSS⽂件引⼊到HTML⻚⾯中使⽤
引入方式link relstylesheet hrefcss ⽂件路径
我们新建一个文件夹设置扩展名为.CSS,在CSS文件下写好我们修饰的代码例如
h1{color: aqua;
}
接着我们回到.html中写好我们的代码及引入方式例如
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefclass.css
/head
bodyh11111111111/h1
/body
/html
我们尝试运行上述代码 在外部样式表中的herf使用与超链接使用方式一致
三.CSS样式表的优先级
在CSS中如果我们对一个选择符的同一属性进行了多种样式表的修饰那么CSS会默认使用的显示方法优先级为行内样式表内部样式表外部样式表例如
我们尝试运行上述代码 我们发现果然是按照行内的来显示其他两个的比较在此就不做演示了感兴趣的小伙伴可自行尝试。
