CSS

CSS

简介

• 什么是CSS?

  • 层叠样式表：Cascading Style Sheet

• 什么作用?

  • html是网页的骨架，而CSS就是对骨架内容的修饰

• 为什么要使用？

  • 样式和内容写在一起会显得非常臃肿，使用css可以单独的将样式抽离出来，可以提高开发效率

  • CSS提供了很多HTML无法完成的显示效果

  • 抽离出来的CSS可以单独加载，能够实现多个页面的共享，节约网站的带宽，就是节约成本。

CSS引入方式

• 方式1：行内样式表

  • 通过标签的style属性设置

• 方式2：内联样式表

  • 通过style标签实现

• 方式3：外联样式表

  • 通过link标签引入外部css文件

• 说明：

  • 当设置的属性非常少，需要设置的标签也非常少(只有一处)，可以使用行内样式

  • 当一个网页的内部，很多标签都需要使用同样的显示效果，可以是内联样式

  • 当一个网站的多个页面需要使用同样的显示效果，可以将相同样式单独放在css文件中，即外联样式

CSS语法特点

• 样式必须写在{}中

• 所有的样式都是以键值对的形式出现的

• 样式与值之间通过':'进行连接

• 每个属性的结尾使用分号，最好一行一个属性

• 注释使用：/* 注释 */

• CSS文件中不需要使用style标签

常用选择器

• 标签选择器：通过标签的名字进行选择

• class选择器：通过标签的class属性名进行选择，选择时使用'.'

• id选择器：通过标签的id属性名进行选择，选择时使用'#'

• 组合选择器：可以将其他选择器选择的多个元素进行统一设置，多种选择通过','隔开

• 层级选择器：通过一层一层进行指定和选择，确定指定的元素，层级之间使用空格隔开

• 属性选择器：通过指定标签的某个属性值进行选择，如：input[type=text]

• 伪类选择器：常用于一个标签的几种状态，如：a:link

• 通用选择器：用'*'表示，可以匹配所有的元素，建议不要使用

• 思考：当多种选择器同时选择了一个元素，并对同一属性进行了设置，请问以哪种为准？

选择器的优先级

• 问题：当多种选择器同时选择了一个元素，并对同一属性进行了设置，请问以哪种为准？

• 答案：CSS中没有明确的优先级说明，但是大致的原则是定位的越具体优先级越高。

• 参考：id > class > 其他 > * > 默认

• 使用说明：

  • 尽量避免多种方式同时修改样式

  • 尽量避免多处修改同一标签的同一样式

  • 优先级相同时，后面的设置会覆盖前面的

  • 可以使用chrome浏览器的调试工具进行查看测试

尺寸及单位

• 说明：在HTML中单位可以不写，但是在CSS中单位必须写

• 单位：

  • px：像素，绝对的单位

  • %：百分比，相对与父级元素

  • em：相对于父级元素的倍数

  • rem：相对于html元素的倍数

• width：宽度

• height：高度

• min-width：最小宽度

• max-width：最大宽度

• min-height：最小高度

• max-height：最大高度

字体设置

• font-style：normal(正常)、italic(斜体)

• font-weight：normal(正常)、bold(加粗)

• font-size：设置字体大小

• font-family：字体族

• font：字体相关的简化书写

  • 顺序是固定的，按照上面书写的

  • font-size和font-family不能省略

  • 如：font: italic bold 30px 宋体;

文本修饰

• text-indent：缩进，通常的单位是em。

• overflow：超出容器的范围如何处理，选项：hidden、scroll、auto

• 显示不完的内容为...效果：

  • overflow:hidden

  • white-space:nowrap

  • text-overflow:ellipsis

  • 另外：尺寸设置的必须要溢出(不能自动适应)

• text-decoration：设置横线的位置、风格、颜色

  • 位置：none、underline、overline、lint-through

对齐设置

• text-align：水平对齐方式，left、center、right

• line-height：设置行高，当行高与容器高度一致时可以实现垂直方向的居住对齐

• vertical-align：行级标签的垂直对齐，top、middle、bottom

背景设置

• background-color：背景色

• background-image：背景图片，通过url()指定

• background-position：指定位置

• background-repeat：重复方式

• background-attachment：附着方式

  • scroll：相对于元素固定，会随元素移动，但是不会随内容移动

  • fixed：相对于窗体固定，不随元素及内容移动

  • local：相对于元素内容固定，随元素及元素内容移动

• background：简写形式

列表设置

• list-style-type：前面符号类型

• list-style-position：前面符号位置

• list-style-image：前面符号图片

• list-style：统一设置

定位相关

• position：元素定位

  • static：默认的，四个位置属性不生效

  • relative：相对定位，相对于原来元素在文档流中的位置

  • fixed：固定，相对于窗体进行定位

  • absolute：绝对定位，相对于最近的定位的祖先元素

• z-index：距离平面方向，即Z方向的距离，越大越靠上

布局相关

• float：浮动， left、right

• clear：清除浮动，left、right、both

• visibility：显示(visible)、隐藏(hidden)，会保留位置

• display：none(隐藏，不会保留位置)，blcok块、inline-block行内块、inline行级元素

盒子模型

• margin：外边距

• border：边框

  • border-radius：设置倒角半径

• padding：内边距

• 结论：

  • 宽度 = 左右外边距 + 左右边框 + 左右内边距 + width

  • 高度 = 上下外边距 + 上下边框 + 上下内边距 + height

• 外边距：

  • 水平方向会叠加

  • 垂直方向取较大值

练习：

• 找一个看上去顺眼的页面，试着布局一下，如：京东、淘宝首页