由于主要学习的是python方向,所以接触的前端部分比较基础,并不全面,希望多多指教
简介
- 什么是CSS?
- 层叠样式表:Cascading Style Sheet
- 有什么作用?
- HTML是页面的骨架,而CSS就是对网页骨架内容的修饰
- 为什么要使用?
- 样式和内容写在一起会显得非常臃肿,使用CSS可以将样式单独抽出来,可以提高开发效率。
- CSS提供了很多HTML属性无法替代的显示效果。
- 单独抽离出来的CSS可以进行独立加载,能够实现多个页面共享,可以节约网络带宽,节约成本。
CSS引入方式
- 方式1:行内样式表
- 通过标签的style属性进行设置
- 方式2:内联样式表
- 通过style标签进行设置
- 方式3:外联样式表
- 通过link标签引用外部CSS文件
- 使用说明:
- 当设置的属性比较少,需要设置的地方也比较少,可以使用行内样式表
- 当样式只在一个页面内部使用,很多地方都需要相同的效果,可以使用内联样式表
- 当一个网站的多个页面需要相同的显示效果,可以使用外联样式表,哪里使用哪里引入即可。
CSS语法格式
- 样式要写在{}中
- 所有的样式都是以键值对的形式出现的
- 样式与值之间通过’:'进行连接
- 每个属性的结尾都要有一个分号,而且建议一行一个样式
- 注释:/* */
- CSS文件中不要书写style标签
常用选择器
- 标签选择器:通过标签的名字进行选择
- class选择器:通过class属性的值进行选择,语法:’.’
- id选择器:通过id属性的值进行选择,语法:’#’
- 组合选择器:使用逗号隔开多个选择器选择的结果进行统一设置
- 层级选择器:通过一层一层的元素定位进行选择,多个层级之间使用空格隔开
- 属性选择器:根据元素的属性值进行选择
- 伪类选择器:通常用于标识标签的不同状态,如: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:缩进
- overflow:超出容器的内容如何处理
- text-decoration:文本横线的显示处理
- text-align:水平对齐方式
- line-height:行高,若设置为容器高度可以实现垂直居中
- vertical-align:行级标签之间垂直对齐(top、bottom、middle)
背景设置
- background-color:背景颜色
- background-image:背景图片
- background-repeat:背景图片的重复方式
- background-position:背景图片的位置
- background-attachement:附着方式
- scroll:相对于元素固定
- fixed:相对于窗体固定
- local:相对于元素内容固定
- background:简化书写
- 示例:background: url(bd_logo.png) no-repeat right top local;
列表设置
-
list-style-type:图标类型
-
list-style-position:图标位置
-
list-style-image:图标图片
-
list-style:简化书写方案
- 示例:list-style: circle outside url(qq.png);
定位相关
- 示例:list-style: circle outside url(qq.png);
-
position:元素定位
- static:静态,默认方式,四个偏移属性无效
- relative:相对定位,相对于自身在文档流的位置
- fixed:固定定位,相对于窗体定位
- absolute:绝对定位,相对于最先定位的祖先元素进行定位,直到body
-
z-index:z方向的偏移,没有单位,值为一个数即可,值越大越靠上。
布局相关
- float:浮动,left、right
- clear:清除浮动,left、right、both
- visibility:visible、hidden,隐藏时元素的位置会保留
- display:
- none,会隐藏元素,并且元素位置也没有了
- block:块元素
- inline:行元素
- inline-block:行内块
盒子模型
-
尺寸:width、height
-
边框:border、border-radius
-
内边距:padding
-
外边距:margin,垂直方向会取较大值,水平方向会叠加
-
位置:
-
宽度 = width + 左右边框 + 左右内边距 + 左右外边距
-
高度 = height + 上下边框 + 上下内边距 + 上下外边距
border:边框
border-style: 线条的样式
solid
dashed
double
dotted
…
border-width: 线条的粗细 像素为单位
border-color: 线条的颜色padding:内边距 padding: 10px 四个方向都是10px 可以根据方向进行padding的定义: padding-top: 4px; padding-bottom: 0px; padding-left: 5px; padding-right: 6px; 组合定义:padding: 10px 5px; 10px表示的是上下 5px表示的是左右 padding:上 左右 下 ---》 padding: 10px 5px 8px; padding:1px 2px 3px 4px 上右下左 margin:外边距 margin: 10px 5px; 10px表示的是上下 5px表示的是左右 margin:上 左右 下 ---》 margin: 10px 5px 8px; margin:1px 2px 3px 4px 上右下左 特殊的:margin结合auto使用
注意:
1.样式属性: width height border padding margin
2.border,padding,margin都有四个方向
3.padding会放大整个盒子,margin就是指盒子与盒子之间的距离
4.margin经常结合auto使用 -