前端之css基础知识

简介

​ 前端中css基础知识总结。参考书籍《HTML&CSS设计与构建网站》

css原理

​ 理解css的关键在于要看到网页中的任何元素周围都有一个看不见的盒子，css允许你创建规则，来操纵每个盒子以及盒子中的内容的显示方式。

​ css采用将样式规则与html元素相关联的方式来操纵元素。一条css规则包含两个部分：一个选择器和一条声明。

​

p{
    font-family: Arial;
}

css基础知识

一、使用css：

1、外部引入

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

​ 若需要引入多个css文件，则需要使用多个link标签进行引入。

2、内部引入

<style type="test/css">
	<!--css code-->
</style>

二、css颜色

​ 1、css3透明度：

​

p{
    opacity:0~1;
}

p{
    rgba(,,,0~1);
}

三、文本

1、字体术语

​ (1)衬线字体：在主要的笔画的末端有一些额外的装饰，这些装饰被称为衬线。通常用于长篇文本。

​ (2)无衬线字体：用于文本非常小。

​ (3)等宽字体：每个字母的宽度都相同。

2、字体选用

​

//字体样式
font-family:  ;
//字体大小
font-size:  ;

3、字体格式

//文字对齐方式
text-align:left/center/right/justify(两端对齐)

4、链接样式：

:link{
    //为尚未访问过的链接设置样式
}

:visited{
    //为已经访问过的链接设置样式
}

：hover{
    //鼠标悬停在某个地方时的显示样式
}

:active{
    //当动作生效时，产生的效果
}

:focus{
    //在元素拥有焦点时产生效果
}

四、盒子模型

一、盒子的大小

​

//宽度
width: ;
//高度
height: ;

//盒子的最大宽度
max-width: ;
//盒子的最小宽度
min-width: ;

//最大高度
max-height: ;
//最小高度
min-height: ;

二、内容溢出

​

overflow:hidden/scroll

三、边框、外边距、内边距

//边框宽度
border-width:thin/medium/thick;
//上边框宽度
border-top-width:

//边框样式
border[-top | -left | -right | -bottom]-style:solid(直线)/dotted(点状)/dashed(一条虚线)/double(两条实线)/groove(雕入页面)/ridge(在页面上突起)/inset(嵌入页面)/outset(突出屏幕)/hidden|none不显示任何边框


//边框颜色
border[-top | -left | -right | -bottom]-color

四、内边距

//内边距
padding[ | -top | -right | -bottom | -left]

/*
若想让一个盒子中的内容居中显示，可以将padding-left和padding-right的值设为auto。
*/

五、外边距

//外边距
margin[ | -top | -right | -bottom | -left]

六、内联元素与块级元素的转换

//内联元素与块级元素转换
display:inline(使块元素显示变为内联元素)/block(使内联元素转换为块元素)/inline-block(使块级元素像内联元素一样浮动)/none(使元素隐藏)

七、盒子的隐藏

visibility:hidden/visible

八、盒子的投影

​

box-shadow:

九、其他

//盒子的圆角
border-radius:圆角半径

五、列表、表格和表单

一、列表属性

1、项目符号样式

​

//应用在ul,ol,li中
list-style-type: ;

​ 在无序列表中的值可以是：

none/disc/circle/square

​ 在有序列表中的值是：

2、将图像作为项目符号：

​

list-style-image: url("images/func.png");

3、图像的位置

list-style-position:inside/outside;

二、表格属性

​

//表格的宽度
width: ;

//单元格与内容的距离
padding: ;

//用于将表格标题中的内容转化为大写
text-transform

//为表格标题的内容增加额外的样式
letter-spacing:	;

//设置表格标题的上方和下方的边框
border-top:	;
border-bottom:	;

//设置单元格中的书写方式
text-align:	;

//用于交替改变表格行的背景颜色
background-color:	;


//用户将光标悬停在某个表格行时高亮显示
:hover

//控制单元格之间的距离
border-spacing:	;

//合并相邻单元格边框
border-collapse:	;

三、定义表单 样式

​ 1、定义单行文本框样式

2、光标样式

​

curser:

css布局

​