[前端基础]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（级联/层叠 样式表）

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

111

text

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

二、选择器的定义
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：

• ...

  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();----使用图片作为列表项的标识