Web前端入门——CSS基础总结

参考资料

http://www.lvyestudy.com/les_cj/css_list.aspx

章节排序及内容以书籍为准

知识梳理：

1、css基础

引入——伪类——盒子模型——浮动——定位

2、基本样式

列表——表格——图片——背景——字体——段落——边框

 

 

 

第十一章——css引入方式

CSS，即“Cascading Style Sheet（层叠样式表）”

1、外部样式表

 <link href="路径" rel="stylesheet" type="text/css" />

2、内部样式表

<style type="text/css">
         
    </style>

3、行内样式表

在标签的style属性中定义

---

---

---

---

---

---

第十二章——css选择器

一个样式的语法是由三部分构成：选择器、属性和属性值

1、基本选择器

• 元素选择器

• id选择器

• class选择器

 

2、后代选择器

又称为包含选择器，包含了所有的后代元素

 

3、相邻选择器

该元素的下一个兄弟元素，相邻选择器的操作对象是该元素的同级元素。

4、群组选择器

第十三章——字体样式

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体斜体
color	颜色

1、字体类型font-family

font-family：字体1,字体2,字体3;

2、 字体大小font-size

font-size：关键字/像素值;

font-size属性值	说明
xx-small	最小
x-small	较小
small	小
medium	默认值，正常
large	大
x-large	较大
xx-large	最大

 3、字体颜色color

color:颜色值;

4、字体粗细font-weight

 一般仅用到bold、normal这两个属性值完全就可以了，粗细值不建议使用数值（100~900）

font-weight:粗细值;

 

font-weight属性值	说明
normal	默认值，正常体
lighter	较细
bold	较粗
bolder	很粗（其实效果跟bold差不多）

 

5、字体斜体样式font-style

talic是使用文字的斜体，oblique是让没有斜体属性的文字倾斜。

font-style:取值;

font-style属性值	说明
normal	默认值，正常体
italic	斜体，这是一个属性
oblique	将字体倾斜，将没有斜体变量（italic）的特殊字体，要应用oblique

6、CSS注释

/*注释的内容*/

---

---

---

---

---

---

第十四章——段落（文体）样式

表1 CSS段落属性

属性	说明
text-decoration	下划线、删除线、顶划线
text-transform	文本大小写
text-indent	段落首行缩进
text-align	文本水平对齐方式
line-height	行高
letter-spacing	字距
word-spacing	词距

1、下划线、删除线和顶划线text-decoration

text-decoration:属性值;

 

属性值	说明
none	默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式
underline	下划线
line-through	删除线
overline	顶划线

2、文本大小写text-transform

text-transform:属性值;

属性值	说明
none	默认值，无转换发生
uppercase	转换成大写
lowercase	转换成小写
capitalize	将每个英文单词的首字母转换成大写，其余无转换发生

3、首行缩进text-indent

ext-indent的属性值应该是字体font-size属性值的两倍

text-indent:像素值;

4、文本水平对齐text-align

text-align:属性值;

text-align属性值	说明
left	默认值，左对齐
center	居中对齐
right	右对齐

第十五章——边框样式

任何元素都可以设置边框属性 

1、边框样式

 

属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

• border-style属性

 

属性值	说明
none	无样式
hidden	与“none”相同。bug应用于表除外。对于表，hidden用于解决边框冲突
solid	实线
dashed	虚线
dotted	点线
double	双线，双线的宽度等于border-width值

 

属性值	说明
inset	内凹
outset	外凸
ridge	脊线
groove	槽线

•  简洁写法

border-width:1px;
border-style:solid;
border-color:Red;

border:1px solid Red;

2、局部样式

            border-top:1px solid red;         /*上边框样式*/
            border-right:1px solid orange;    /*右边框样式*/
            border-bottom:1px solid blue;     /*下边框样式*/
            border-left:1px solid green;      /*左边框样式*/

第十六章——列表样式

经常使用“list-style-type:none”去除列表项默认的符号

第十七章——表格样式

 

1、边框合并

去除单元格之间的空隙

border-collapse:属性值;

 

separate意思是“分离”，而collapse意思是“折叠，瓦解”。

border-collapse属性值	说明
separate	默认值，边框分开，不合并
collapse	边框合并，如果相邻，则共用一个边框

 

2、边框间距

设置表格边框间距

border-spacing:像素值;

 3、表格列宽

table-layout

值	描述
automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承 table-layout 属性的值。

 

 

 

---

---

---

---

---

---

第十八章——图片样式

 

1、图片大小

width:像素值;
height:像素值;

2、图片边框

border-width:像素值;
border-style:属性值;
border-color:颜色值;

        img{width:60px;height:60px;}
        img:hover{border:1px solid gray;}

3、水平对齐

text-align:属性值;

text-align属性值	说明
left	默认值，左对齐
center	居中对齐
right	右对齐

4、垂直对齐

定义行内元素的基线相对于它所在行的基线的垂直对齐方式

vertical-align:属性值;

vertical-align属性取值	说明
top	顶部对齐
middle	中部对齐
baseline	基线对齐
bottom	底部对齐

 5、 文字环绕

float:取值;

 

float属性值	说明
left	元素向左浮动
right	元素向右浮动

 

---

---

---

---

---

---

---

第十九章——背景样式

属性	说明
background-image	定义背景图像的路径，这样图片才能显示嘛
background-repeat	定义背景图像显示方式，例如纵向平铺、横向平铺
background-position	定义背景图像在元素哪个位置
background-attachment	定义背景图像是否随内容而滚动

1、颜色

background-color:颜色值;

2、地址

background-image:url("图像地址");

3、平铺

background-repeat:取值;

属性值	说明
no-repeat	表示不平铺
repeat	默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺
repeat-x	表示在水平方向（x轴）平铺
repeat-y	表示在垂直方向（y轴）平铺

 4、位置

background-positon:x y;

设置值	说明
x（数值）	设置网页的横向位置，单位为px
y（数值）	设置网页的纵向位置，单位为px

 

属性值	说明
top left	左上
top center	靠上居中
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom right	右下

 5、固定

background-attachment:fixed;

---

---

---

---

---

---

第二十章——超链接

1、伪类

1 2 3 4

a:link{CSS样式} a:visited{CSS样式} a:hover{CSS样式} a:actived{CSS样式}

属性	说明
a:link	定义a元素未访问时的样式
a:visited	定义a元素访问后的样式
a:hover	定义鼠标经过显示的样式
a:active	定义鼠标单击激活时的样式

2、hover

:hover”伪类可以定义任何一个元素在鼠标经过时的样式

元素:hover{}

3、鼠标样式

cursor:pointer/text;
pointer手指样式
text输入样式

---

---

---

---

---

---

第二十一章——盒子模型

只有块元素能设置width和height，行内元素无法设置width和height。

 

属性	说明
border	（边框）元素边框
margin	（外边距）用于定义页面中边框到父元素或者同级元素之间的距离
padding	（内边距）用于定义内容与边框之间的距离
content	（内容）可以是文字或图片

 

• 边框border

border:像素值 边框类型 颜色值

• 内边距padding

padding:像素值;
padding:像素值1 像素值2;
padding:像素值1 像素值2 像素值3 像素值4;

• 外边距margin

margin:像素值;
margin:像素值1 像素值2;
margin:像素值1 像素值2 像素值3 像素值4;

---

---

---

---

---

---

---

第十二章——浮动布局

 

 正常文档流:                                                                                                                     将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按从左到右地依次   排列元素。

 

1、浮动float

浮动元素的宽度由内容决定

float:取值;

float属性值	说明
left	元素向左浮动
right	元素向右浮动

2、清除浮动

清除浮动对周围元素的影响

clear:both;

---

---

---

---

---

---

第二十三章——定位布局position

position:属性;
top:像素;
bottom:像素;
left:像素;
right:像素;

• 固定定位（fixed）

被固定的元素不会随着滚动条的拖动而改变位

• 相对定位（relative）

background-position:向右偏移量 向下偏移量;

相对于原始定位的位置

• 绝对定位（absolute）

a、相对于父容器的位置

b、如果元素之间有重叠部分，该元素会覆盖掉其他元素

c、绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了

• 静态定位(static)

a、HTML元素的默认值，即没有定位，元素出现在正常的流中。

b、静态定位的元素不会受到top, bottom, left, right影响