目录

一、 CSS的基础

1、快速了解

2、CSS应用方式

①在标签上

②在head标签中写style标签

 ③写到文件中

 二、CSS的选择器

1、ID选择器

2、类选择器

3、标签选择器

 4、属性选择器

5、后代选择器

 三、样式覆盖

 四、CSS的样式

1、高度和宽度

2、块级和行内标签

3、字体设置和文字对齐方式

4、浮动

 5、内边距和外边距

 6、hover

7、after 

8、border 

 五、案例（小米商城）

1、总结分析 

2、二级商城

3、导引行

4、推荐页面

5、范例

一、 CSS的基础

CSS，专门用来"美化"标签。

• 基础CSS，写简单页面&看懂&改
• 模块，调整和修改

1、快速了解

样式即为类似style这种修饰标签的东西

中国联通

2、CSS应用方式

①在标签上

中国联通

②在head标签中写style标签

适用于同一页面下多次出现的css样式

...

用户注册
...

 ③写到文件中

适合用很多的文件

写一个common.css文件

.c1 {height:100px;
}
.c2 {color:red;
}

 调用common.css文件

...

用户注册
...

问题：用Flask框架开发不方便

• 每次都需要重启py文件
• 规定有些文件必须放在特定的文件夹下
• 新创建一个页面    函数 、HTML文件、CSS文件

有无一种方式可以让我们快速的编写前端的代码并且查看效果，最后将页面集成到Flask中。

Pycharm为我们提供了一种非常便捷开发前端页面的工具。

直接点击浏览器可以查看HTML

 二、CSS的选择器

1、ID选择器

ID的优先级比类的优先级高，ID不能重复而类可以

#c1 {color: red;
}

2、类选择器

类选择器用的最多

.c1 {color: red;
}

3、标签选择器

div{color: red;
}
xxx

 4、属性选择器

所有的text类型的input都会生效

 xx = "456"的会显示颜色为金色

.v1[xx="456"]{color:gold;
}
s
  
d
  

5、后代选择器

百度
谷歌

 这样操作可以让只有yy一层实现color变色

  .yy > a{color: darkseagreen;}

    
百度
谷歌

很明显可以得知，这次操作下只有谷歌会变色

 关于选择器：

多：类选择器、标签选择器、后代选择器

少：属性选择器、ID选择器

 三、样式覆盖

当一个标签引用了多个 css 样式时,可能会遇到样式属性重复的问题

如果重名，下面的会覆盖上面的项

简单的说：CSS叠成样式表，就是一层一层样式堆叠起来的，堆在最上面的就是最新的样式。

派大星

 如果想要下面的不覆盖上面的一项

加 ---!important

派大星

 四、CSS的样式

1、高度和宽度

.c1 {height: 300px;width: 500px;}

注意事项:

• 宽度支持百分比
• 行内标签: 默认无效
• 块级标签: 默认有效(右边的剩余空白区域也会被占用)

2、块级和行内标签

CSS样式:display:inline-block 使行内标签对 height 和 width 生效

既具有块级标签又有行内标签

派大星

行内标签和块级标签的特性都有 

 块级与行内标签的设置

	
派大星
海绵宝宝

大多数使用：

• 块级标签
• 块级标签+行内标签

3、字体设置和文字对齐方式

4、浮动

左边右边

div默认块级标签（霸道）。如果浮动起来效果就不一样了

 如果让标签浮动的话，就会脱离文档流。

例如下面的例子中，我们给div的父标签赋予了一个蓝色的背景，但是你不会看到蓝色背景。因为他被浮动的div字标签挡住了。

解决办法: 在同级子标签的最下面添加 style="clear: both;"

 5、内边距和外边距

内边距

派大星
海绵宝宝

 外边距

 6、hover

字体碰到鼠标变成绿色
边框碰到鼠标变成绿色
鼠标放我这里触发显示二维码

7、after 

派大星

after 一般都这么用

1
2
3

8、border 

我是虚线~
我是实线~左边框是绿色,上下右边框是红色
我是透明色,鼠标碰到我边框会变色哦~

 五、案例（小米商城）

1、总结分析 

• body标签，默认有一个边框，造成页面四边都有白色间隙，如何去除？

body{margin:0;
}

• 内容居中

文本居中，文本会在这个区域居中。

派大星

区域居中，自己要有宽度+ margin-left:auto;margin-right:auto

.container{width: 980px;margin: 0 auto;}

• 父亲没有高度或者宽度，被孩子支撑起来。
• 如果存在float，一定记得加入 style="clear: both;"

• 关于布局不知道如何下手

2、二级商城