层叠样式表

简介

　　1.什么是CSS？

　　　　层叠样式表：cascading style sheet

　　2.有什么用？

　　　　HTML是页面的骨架，而CSS就是对页面骨架内容的修饰

　　3.为什么要使用？

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

　　　　CSS提供很多HTML属性无法替代的显示效果

　　　　单独抽离出来的css可以进行单独加载，能够实现多个页面共享，可以节约网络带宽，节约成本

CSS引入方式

　　1.方式一：行内样式表

　　　　通过标签的style属性进行设置

　　2.方式二：内联样式

　　　　通过style标签进行设置

　　3.方式三：外联样式表

　　　　通过link标引用外部css文件

　　4.使用说明：

　　　　当设置的属性比较少，需要设置的地方也比较少，可以使用行内样式

　　　　当样式只在一个页面内部使用，很多地方都需要相同的效果，可以使用内联样式表

　　　　当一个网站的多个页面需要相同的显示效果，可以使用外联样式，哪里使用哪里引入即可

CSS语法格式

　　1.样式要写在大括号（{}）中

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

　　3.样式与值之间通过：（冒号）进行连接

　　4.每个属性的结尾都要有一个分号（；）而且建议一行一个样式

　　5.注释：/* */

　　6.CSS文件中不要出现style标签

常用的选择器

　　1.标签选择器：通过标签名字进行选择

　　2.class选择器：通过class属性的值进行选择，语法：“.”

　　3.id选择器：通过id属性的值进行选择，语法：“#”

　　4.组合选择器：使用逗号隔开多个选择器选择的结果进行统一设置

　　5.层级选择器：通过一层一层的元素定位进行选择，多和层级之间使用空格隔开

　　6.属性选择器：根据元素的属性进行选择

　　7.伪类选择器：通常用于标识标签的不同状态，如:a:link

　　8.通用选择器：使用*进行选择，会选中所有元素，尽量不用

选择器的优先级

　　1.问题：当多个选择器同时选择同一个元素，并且设置同一属性时，请问以那个为准？

　　2.答案：CSS中没有明确的规定优先级，但是有一个大致的原则是定位越具体优先级越高

　　3.参考：id>class>其他>*>默认属性

　　4.使用说明：

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

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

　　　　优先级相同，后面的会覆盖前面的效果

　　　　如果还有优先级问题，可以使用chrome调试工具进行检查定位

尺寸及单位

　　1.说明：在html中可以不写单位，但是在css中必须写

　　2.单位：

　　　　px：像素，绝对单位

　　　　%：百分比，相对单位，相对于父级元素

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

　　　　rem：相对于HTML元素的倍数

　　3.width：宽度

　　4.height：高度

　　5.min-width：最小宽度

　　6.min-height：最小高度

　　7.max-width：最大宽度

　　8.max-height：最大高度

字体设置

　  1.font-style：normal（正常）,italic（斜体）

　　2.font-weight：normal（正常）,bold（加粗）

　　3.font-size：字体大小

　　4.font-family：字体族

　　5.font：简化的书写方案，可以进行一次性设置

　　　　顺序是固定的

　　　　font-size和font-family不能省略

　　　　如：font：italic bold 30px 宋体;

文本修饰

　 1.text-indent：缩进

　　2.overflow：超出部分变滚动条

　　3.text-decoration：文本横线的显示处理

　　4.text-align：水平对齐方式

　　5.line-height：行高。若设置为容器高度可以实现垂直居中

　　6.vertical-align：行级标签之间垂直对齐（top,bottom,middle）

背景设置

　　1.background-color:背景颜色

　　2.background-image：背景图片

　　3.background-repeat：背景图片的重复方式

　　4.background-position：背景图片的位置

　　5.background-attachment：附着方式

　　　　fiexd：相对于窗体固定

　　　　scroll：相对于元素固定

　　　　local：相对于元素内容固定

　　6.background:简化书写

　　　　示例：background:url(123.jpg) no-repeat right scoll

列表设置

　　1.list-style-type:图标类型

　　2.list-style-position:图标位置

　　3.list-style-image:图标图片

　　4.list-style:简化书写方案

　　　　示例：list-style:circle inside url(123.jpg)；

定位相关

　　1.position：元素定位

　　　　static：静态，默认方式，四个偏移属性无效

　　　　relative：相对定位，相对于自身在文档流的位置

　　　　fixed：固定定位，相对于窗体定位

　　　　absolute：绝对定位，想对于最先定位的祖先元素进行定位，直到body

　　2.z-index:z方向的偏移，没有单位，值为一个数即可，值越大越靠上

布局相关

　　1.float：浮动，left，right

　　2.clear：清除浮动，both，left，right

　　3.visibility：visible。hidden,隐藏时元素的位置会保留

　　4.display：

　　　　none，隐藏时元素位置不会保留

　　　　block：块元素

　　　　inline：行元素

　　　　inline-block：行内块

盒子模型

　　1.尺寸：width，height

　　2.边框：border，border-radius

　　3.内边距：padding

　　4.外边距：margin，垂直方向会取较大值，水平方向叠加

　　5.位置：

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

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

　　　　

转载于:https://www.cnblogs.com/542684416-qq/p/9803206.html