[前端基础]CSS知识总结

  baikapala

一、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"

同一种元素下的细分

<input type="text" />

<input type="button" />


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 id="link1" class="s1"></a> 
</div> 

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();----使用图片作为列表项的标识
以前,我总以为自己是菜鸟,也总想着早起的鸟儿有虫吃。直到有一天我想飞,才愕然的发现自己没有翅膀和羽毛,我竟然是菜虫!早起的虫儿被鸟吃……原来,百足应该厚积薄发!