2018-08-17
* 今天的课程内容：
* CSS * CSS的简介 * CSS：cascading style sheet ：层叠样式表。 * 做什么用：设置网页的显示效果（设置样式）。 * CSS将网页显示的效果和内容分离。（耦合性） 超<font>文本</font>标签语言 * HTML只需要把文本内容封装起来，不用属性，用CSS的代码来控制显示效果。 * 如果开发了多套CSS的代码，都不用修改HTML的代码。（换肤效果） * CSS和HTML的结合（*****） * CSS与HTML的结合方式（4种） * 在html的标签上，提供了一个(属性)，style="CSS的代码" * 在HTML的文件，提供了一个(标签)这个标签放在<head></head>的中间
<head>
<style type="text/css">
CSS的代码
</style>
</head>
* 引入外部的文件的方式（引入CSS的文件，定义一个css文件（后缀名名 demo.css））（经常使用的方式） * @import url("CSS文件的地址");（注意分号） 属性必须要写<style></style>内部。（style html解析引擎）大写和小写都没有问题。（注意：必须有;） * 引入外部文件的方式，通过一个<link> 写在<head></head>中间， 不要放在<style>中间（经常使用） * rel：代表当前和引入文件之间的关系 * type： * href：引入CSS文件的地址1
* 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语言来使用。 * 扩展选择器 * 关联选择器：标签可以嵌套，标签与标签之间的关系。 * 写法： 中间用空格隔开 例子（div font{CSS的代码}） * 组合选择器：对多个不同的选择器进行相同的样式 * 写法：在多个不同的选择器之间用 , 隔开 * 伪元素选择器： 定义好的一些选择器，用就ok。 * 如果使用超链接伪元素选择器：使用顺序： L V H A
1 2 3 4 5Title 6 7 8 9 12 28 29 30刘晶晶啊哈哈
31七夕快乐呀
32天天快乐呀快乐呀
33 34我想回家了
35我想回家了
36 37七夕呀！小点心！
38 39 40
1 2 3 4 5Title 6 34 35 36小杨同学很帅
37一表人才，哈哈哈哈
38 39111111
40222222
4133333
4266666
43 44 45 46
* CSS的布局（了解）（CSS+DIV进行布局） <div> <div> <img /> </div> <div> <font>领导很忙</font> </div> </div>
例：1
1 2 3 4 5Title 6 38 39 4041 大家都喜欢买的美容品4243 46 47 48 49 52 53 54 57 58 59 62 63 64 67 68 69 72 73 74 77 78 79 82 83 84 87 88 89 90
效果图：
例：2
1 2 3 4 5Title 6 33 34 35 64 65 66
41
*漂浮和定位
例：3
同一个标签可以同时有两个样式
