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续

选择器的优先级

• 问题：当多种选择器同时选择了一个元素，并对同一属性进行了设置，请问以哪种为准？
• 答案：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
• 外边距：
  • 水平方向会叠加
  • 垂直方向取较大值