CSS的简介
CSS:cascading style sheet :层叠样式表。
做什么用:设置网页的显示效果(设置样式)。
CSS将网页显示的效果和内容分离。(耦合性)
超<font>文本</font>标签语言
HTML只需要把文本内容封装起来,不用属性,用CSS的代码来控制显示效果。
如果开发了多套CSS的代码,都不用修改HTML的代码。
CSS和HTML的结合(*****)
* CSS与HTML的结合方式(4种)
* 在html的标签上,提供了一个(属性),style="CSS的代码"
* 在HTML的文件,提供了一个(标签) <style type="text/css">CSS的代码</style>,这个标签放在<head></head>的中间
* 引入外部的文件的方式(引入CSS的文件,定义一个css文件(后缀名名 demo.css))(经常使用的方式)
* @import url("CSS文件的地址"); 属性必须要写<style></style>内部。大写和小写都没有问题。(注意:必须有;)
* 引入外部文件的方式,通过一个<link> 写在<head></head>中间, 不要放在<style>中间(经常使用)
* rel:代表当前和引入文件之间的关系
* type:
* href:引入CSS文件的地址
github地址
结合方式1234
https://github.com/nrmgit/web/blob/master/html/WebRoot/css/csstest.html
https://github.com/nrmgit/web/blob/master/html/WebRoot/css/csstest2.html
CSS的优先级(*****)和规范
从上到下,由外到内,优先级是从低到高的。(一般情况下)(*****)
标签名选择器 < 类选择器 < ID选择器 < style属性 (特殊情况下)(*****)
规范
CSS的写法: div{CSS的属性名:值;CSS的属性名:值;...}
如果一个属性有多个值,值与值之间使用空格隔开
例子 div{ xx:yy zz aa }
- CSS的选择器(*****)
- CSS的选择器
- 告诉CSS的代码作用在哪个标签上。
- 基本选择器
- 标签名选择器 div{} span{}
- 类选择器:在HTML的标签上,提供了属性 class,定位到div的标签(美工经常使用的方式)
- 写法: .class的名称 (.hehe{CSS的代码})
- 设置不同的标签,具有相同的样式
- ID选择器
- 在HTML的标签上,提供的属性 设置样式
- 写法: #id的名称 (#haha{CSS的代码})
- 一般情况下:设置不同的ID
- 一般情况下给js语言来使用。
https://github.com/nrmgit/web/blob/master/html/WebRoot/css/cssdexuanzeqi.html
- 扩展选择器
https://github.com/nrmgit/web/blob/master/html/WebRoot/css/xuanzeqidekuozhan.html
关联选择器:标签可以嵌套,标签与标签之间的关系。
写法: 中间用空格隔开 例子(div font{CSS的代码})
组合选择器:对多个不同的选择器进行相同的样式
写法:在多个不同的选择器之间用 , 隔开
伪元素选择器: 定义好的一些选择器,用就ok。
如果使用超链接伪元素选择器:使用顺序: L V H A
- CSS的布局(了解)(CSS+DIV进行布局)
https://github.com/nrmgit/web/blob/master/html/WebRoot/css/cssdebuju.html
<div>
<div>
<img />
</div>
<div>
<font>领导很忙</font>
</div>
</div>