CSS知识点总结

目录

一．什么是css？

二．CSS引入方式

四．字体样式

五．文本样式

六．盒子模型

七．浮动

八．定位

---

一．什么是css？

CSS（Cascading Style Sheets）层叠样式表，专注于页面的表现层。

二．CSS引入方式

1.行内样式

在开始标签上加style=”样式属性名1:样式属性值1;样式属性名2:样式属性值2;...” 属性

1. 内嵌式

把所有的css样式都写在<style></style>标签内，<style></style>放在head标签内

1. 外链式

把所有的css样式均放在一个css单独的文件里（后缀名xx.css）,在html里通过<link rel=”stylesheet” href=”css文件路径” />来引入外部的css。

优先级：

行内最大，其次 谁离标签近，谁的优先级高（最晚优先级最高）

三.选择器

1. 通配符选择器   选择所有的元素    0.5

 *{}

1. 标签选择器        1

  标签名{}    例如：p{}

1. 类选择器          10

 .类值{}       例如：.content{}

拓展：  选择器.类值{}    div.box{}  类叫box的div元素

1. id选择器          100

 #id值{}      例如：#con{}

1. 包含选择器（后代选择器）     权重相加

选择器a  选择器b{}       选择器a里的所有选择器b    选择器b只要被选择器a包着

.box div{}   类box里的所有div元素

扩展：

选择器直接子元素

选择器a>选择器b{}   选择器a里的所有直接选择器b     父子关系

.box>span{}    类box里的所有直接子元素span

1. 分组选择器

选择器1,选择器2,....{}

选择器权重：

行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

四．字体样式

1. font-family   字体系列

例如：font-famiy:”宋体”,”微软雅黑”,...

1. font-size      字体大小
2. font-style      字体风格

值：1）normal   默认  不倾斜

2）italic      斜体

3）oblique    倾斜

1. font-weight     字体粗细

值：1）bold      粗体

2）bolder     更粗体

3）lighter     细体

4）100-900    数值越大，字体越粗

1. line-height      行高

值：1）数值+单位

1. 数值       字体的倍数

缩写：

font : font-style值   font-weight值   font-size值/line-height值   font-family值

五．文本样式

1. text-decoration   文本修饰

值：1）none     无修饰

2）underline  下划线

3）line-through   中划线

4）overline     上划线

2. text-align        文本对齐方式

值：1）left      默认   左对齐

1. center      居中对齐
2. right       右对齐
3. justify      两端对齐
4. text-indent      文本缩进

值：数值+单位（px或em）  为正数时，缩进；为负数时，悬挂

1. text-transform    文本大小写转换

值：1）uppercase    全大写

1. lowercase    全小写
2. capitalize    首字母大写
3. text-overflow      文本溢出处理

值：1）ellipsis      文本溢出以省略号显示

1. .....

文本溢出以省略号显示

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;  强制不换行

1. letter-spacing     字母与字母之间的距离   汉字与汉字之间的距离
2. word-spacing     单词与单词之间的距离
3. overflow         内容溢出处理   overflow-x  overflow-y

值：1）visible      默认 溢出部分可见

1. hidden       溢出部分隐藏
2. scroll        溢出部分以滚动条形式显示
3. auto         溢出部分浏览器自动处理

六．盒子模型

1.border  边框

border-width  边框的宽度

border-color   边框的颜色

border-style   边框的样式

值：1）solid     实线

2）double    双实线

3）dotted     点状线

4）dashed    虚线

....

缩写:

border : border-width值   border-style值   bord