[前端基础]CSS知识总结

一、CSS 概述
1、CSS 的作用：定义网页的外观，统一的方式，实现内容（数据）和表现（样式）分离

2、CSS 的基础语法：

样式属性名称1:值1;样式属性名称2:值2

width:100px;height:200px;

提出来定义：

样式选择器名 { 样式声明； }

3、CSS 的定义方式：

方式一：内联方式---CSS 样式定义在 html 元素的 style 属性里---重用性和可维护度不好

方式二：内部样式表---CSS 样式定义在 head 里的 style 元素里

方式三：外部样式表---CSS 样式定义在单独的 .css 文件里，html 页面上用 link 引入-----优先推荐使用

a.html----准备多套样式，类似于皮肤的切换

s1.css---红色

s2.css---蓝色

s3.css--黑白色

4、特征 css（级联/层叠样式表）

继承：子元素可以使用父元素的某些样式---字体相关、背景相关

<body style="color:red" > 111 <p>text</p> </body> 不重复----并集

重复定义-----优先级：内联 > 内部或者外部（以最后一次定义的为准，覆盖前面的相同部分）

二、选择器的定义 1、元素选择器如 h1/div/p---以html中标记的名称-----为同一类元素定义样式

2、样式类 css： .name {}

html： <任意元素 class="name"> ------多种元素相同的样式

3、分类 CSS： input.txt {}

html: <input class="txt"

同一种元素下的细分

4、ID选择器对页面上某个元素的唯一定义

CSS: #idvalue {}

html: <元素 id="idvalue"

5、派生选择器利用html元素的层次关系，选中某种结构下的元素

CSS： ul li a{XXX}

html： <ul><li><a>...

6、选择器分组为n多元素定义相同的样式部分

CSS： input,a.link,#title,.s1 {XXX}

7、伪类有不同的状态

:link---未访问过的

:hover---悬浮，悬停

:active---按下

:visited---访问过的

CSS：某种选择器:link/hover

8、扩展各种样式选择器----不重复的取并集，重复的依靠优先级

选择器的优先级：范围越小，优先级越高

div a {} #link1 {} a.s1 {} 三、各种样式属性尺寸单位：pt/px/cm/mm/%/..

颜色单位：red/#ff0000

四、尺寸 width、height overflow:visible/hidden/scroll/auto(建议)---设置内容溢出时如何处理

五、边框 border:width style color;---4边框 border-top:1px solid red; border-left:2px dotted blue;

border-left-width:2px; border-left-style:dotted;---线型 border-left-color:blue; 六、边距盒子模型（框模型）：元素的边框、内容、外边距以及内边距之间的定义

margin：外边距 margin:20px;---四个方向 margin:10px 20px 30px 40px; --- top right bottom left margin:10px 20px;---值复制 margin-left:10px;---单个方向的边距 margin-top:20px;

padding：内边距 padding:1/2/4; padding-left/right:; 定义边距，可能导致占用的总面积的增加

特别的取值：

margin:10px auto;----居中，auto：由浏览器自动计算左右的边距

七、背景 1、背景色： background-color:颜色；---纯色

2、背景图片：

background-image:url(images/a.jpg); background-repeat:repeat/no-repeat/repeat-x/repeat-y; background-position:x y; background-attachment:scroll/fixed;--附着方式---取值为fixed，背景图像固定，类似于水印的效果八、文本 color font-size font-family:value1,value2,value3; font-weight:normal/bold; text-align:left/center/right; text-decoration:none/underline; text-indent:12px;----仅首行缩进 line-height:20px;---行高九、表格 vertical-align:top/middle/bottom;----td里 border-collapse:separate/collapse;---边框合并 border-spacing:10px;---边框之间的边距；十、光标 cursor:default/pointer/help/....;---光标十一、浮动 1、页面默认情况下，采用流布局的模式

2、设置元素浮动，脱离原有的布局，原有的位置不再保留，后续元素补上

float:none/left/right;3、清除浮动元素带来的影响 clear:left/right/both; 十二、显示----元素的显示方式每个 html 元素都有其默认的显示方式（块级、行内）

行内元素：高度和宽度---无效

块级元素：高度和宽度有效

十三、列表的样式 list-style-type:none/circle/...; list-style-image:url();----使用图片作为列表项的标识