CSS个人梳理
css个人总结(附代码)
作为一个初学者，来对css进行一个个人理解的总结和知识点的梳理，以加深对css的认知与锻炼，css3暂时并没有接触，暂时不提及了
选择器的种类和使用这里就不罗列了，有兴趣可参考css手册，这里只汇总常用的对css的属性样式设置(详细的列举过于复杂，而且好多市场已经淘汰了)，不过为更明了，代码会使用类选择器或者标签选择器，将样式设置在style标签中单独罗列出来，大家也可以引用代码，来尝试对各种样式进行拓展
1.css简介
css是h5语言中用来调整网页样式设置的框架语言，简单来说css就是一堆的标签选择器，标签选择器选中后再其中进行样式设置
2.css设置方式
①可以在标签内直接设置
<div style="font-size:16px;">css引入方式</div>
<!-- style中各样式用“;”隔开 -->
②可以单独加入style标签进行设置，设置方式如之后本文样例中所示
③可以引入外部css文件
<link rel="stylesheet" href="./Sttyle.css">
<!-- link标签中href中为外部css文件的路径，"./"表示当前目录下,"../"表示上一级目录下,，也可用绝对路径(磁盘总文件的位置) -->
3.css样式设置大概分类
a.字体设置
字体大小设置
用font-size来进行设置，有数字调节和百分比调节
<style>
.ft1{font-size:14px;}
/* 一般网页默认字体大小为16px */
/* 网页字体最小为12px，大可以尽可能大 */
.ft2{font-size:50%;}
/* 按网页默认字体大小的百分比 */
</style>
<body>
<div class="ft1">数字调节</div>
<div class="ft2">百分比调节</div>
</body>
字体样式设置
用font-style来进行设置，按顺序有如下三种样式：正常体、斜体、倾斜体
<style>
.fs1{font-style:normal;}
.fs2{font-style:italic;}
.fs3{font-style:oblique;}
</style>
<body>
<div class="fs1">正常体</div>
<div class="fs2">斜体</div>
<div class="fs3">倾斜体</div>
</body>
字体种类设置
用font-family来进行设置，可以进行多个排列，用“，”隔开
<style>
.ff{font-family: 'Segoe UI',Arial'MicrosoftYahei',sans-serif;}
/* 一般网页默认字体为用户电脑所使用的字体*/
/*如果用户电脑有第一个，网页会用第一个，否则，网页会用第二个，以此类推*/
</style>
<body>
<div class="ff">这是字体种类显示</div>
</body>
字体粗细设置
用font-weight来进行设置，按顺序有如下有三种调节：正常、加粗、数字调节
<style>
.fw1{font-weight:normal;}
.fw2{font-weight:bold;}
.fw3{ font-weight:300;}
/* 为100的整数倍，范围：100~900 */
</style>
<body>
<div class="fw1">正常粗细</div>
<div class="fw2">加粗字体</div>
<div class="fw1">自定义粗细</div>
</body>
字体颜色设置
直接用color进行设置，按顺序有如下有三种调节：英文单词、十六进制、rgb取值
<style>
.fc1{color:green;}
/* 可直接写对应颜色的英文单词进行颜色调节 */
.fc2{color:#eeeeee;}
/* 十六进制颜色写法，六位分三部分，每部分两位 */
/* 前面对应红色，中间对于绿色，末尾对于蓝色 */
/* 每种颜色按进制取值范围为0~f,每部分也可写一位 */
.fc3{color:rgba(80,80,80,0.5);}
/* 与上述类似，前三部分红、绿、蓝，调节范围为0~255 */
/* 最后一位用于调节字体透明度，也可省略，用rgb()代替 */
</style>
<body>
<div class="fc1">颜色1</div>
<div class="fc2">颜色2</div>
<div class="fc3">颜色3</div>
</body>
字体综合设置
用font来直接设置，它是一个综合属性设置，包含之上所有font属性
<style>
.f{
font: 16px/1.5 'Segoe UI',Arial'MicrosoftYahei',sans-serif;
}
/* */
/* font-size必须在倒数第二个，后面可跟“/”进行行高line-heighr设置(样例中16px为字体大小，1.5表示行高是字体大小的1.5倍)， */
/* font-family必选，且必须在最后一个设置，其余font属性5️无排列顺序 */
</style>
<body>
<div class="f">
综合
</div>
</body>
b.文本设置
文本对齐设置
① text-align表示水平对齐方式,常用取值属性如下表所示，代码暂时列举center，想尝试其他的将属性值center更换为其他属性值即可
| 值 | 描述 |
|---|---|
| left | 基线默认对齐 |
| right | 与父元素顶部对齐 |
| center | 与父元素底部对齐 |
| justify | 与父元素中部对齐 |
<style>
.ta{text-align:center;}
/* text-align可作用于具有文本属性的元素，如：行内元素，图片，文本等，不会作用于块级元素 */
</style>
<body>
<div class="ta">居中对齐</div>
</body>
② vertical-align表示对垂直对齐方式，常用的如下表所示，代码暂时列举top，想尝试其他的将属性值top更换为其他属性值即可
| 值 | 描述 |
|---|---|
| baseline | 基线默认对齐 |
| top | 与父元素顶部对齐 |
| bottom | 与父元素底部对齐 |
| middle | 与父元素中部对齐 |
<style>
.va{vertical-align:top;}
/* vertical-align只针对display的值为inline和table-cell的元素生效，如：span,img,input,td等,对于其他块级元素不生效 */
</style>
<body>
<div class="va">基线默认</div>
</body>
文本样式设置
text-decoration可以用来设置颜色、位置、样式。分别对应了text-decoration-color，text-decoration-line，text-decoration-style
位置可以为：上划线、下划线、删除线、无、闪烁（已不常见，IE，谷歌，Safari均不支持）
注意：父亲会影响儿子，且儿子无法取消
<style>
.td1{text-decoration:overline;}
/* 上划线 */
.td2{text-decoration:underline;}
/* 下划线 */
.td3{text-decoration:line-through;}
/* 删除线 */
.td4{text-decoration:none}
/* 无(这个一般用来取消一些标签的默认设置，如a标签) */
</style>
<body>
<div class="td1">上划线</div>
<div class="td1">下划线</div>
<div class="td1">删除线</div>
<a href="">这是一个a标签</a>
<br/>
<a href="" class=""td4>这是一个a标签</a>
</body>
缩进样式设置
text-indent用来实现缩进，段落第一行文本要空多少距离，单位为长度,可以用数字或百分比设置
注意：百分比缩进时，缩进是基于父元素的宽度的百分比
<style>
.ti{text-indent:10px;}
</style>
<body>
<p>这是一个段落</p>
<p class="ti">这是一个段落</p>
</body>
文本溢出调整
text-overflow：文本溢出的截断，可以用’…'来代替
注意：需要配合 overflow: hidden 的属性来控制, 否则还是会超出边距显示
<style>
.to{
white-space:nowrap;
width:50px;
overflow: hidden;
border:1px solid red;
}
</style>
<body>
<div class="to" style="text-overflow:ellipsis;">
text-overflow：文本溢出的截断，可以用'...'来代替
**注意**：需要配合 overflow: hidden 的属性来控制, 否则还是会超出边距显示
</div>
</body>
c.背景设置
背景颜色设置
backgroud-color：背景颜色,按顺序有如下有三种调节：英文单词、十六进制、rgb取值(具体同上字体颜色设置)
<style>
.bc1{background-color:green;}
.bc2{background-color:#eeeeee;}
.bc3{background-color:rgba(80,80,80,0.5);}
</style>
<body>
<div class="bc1">颜色1</div>
<div class="bc2">颜色2</div>
<div class="bc3">颜色3</div>
</body>
背景图片设置
backgroud-image：可以指定多个图片，第一个图片最接近用户，border会最后绘制
<style>
div{backgroud-image:url("");}
/* url里填自己的图片路径，如../images/spn1.png ，“./”表示当前目录下，“../”表示上一级目录下，也可使用绝对路径*/
</style>
<body>
<div></div>
</body>
背景图片的位置
backgroud-position：背景图片的位置，可以设置为枚举值，也可以设置为相对于左上角的坐标，分别为长度单位，这个值一般要跟backgroud-repeat: no-repeat配合使用
<style>
div{
background-image:url("");
background-repeat: no-repeat;
background-position:5px 10px;
/* 第一个数字对于x轴，水平向右为正值，向左为负值；第二个数字对于y轴，垂直向下为正值，向上为负值 ,两个值用空格隔开*/
}
/* url里填图片路径，如../images/spn1.png */
</style>
<body>
<div></div>
</body>
背景图片的大小调整
backgroud-size：设置背景图片的大小，可以控制压缩或者截断或者比例
注意：调整的是图片的大小，不是盒子模型的大小
<style>
div{
background-image:url("");
background-size:20px 20px；
/* 第一个值为宽度，第二个值为高度，也可用百分比调节（会基于父元素大小的百分比调整） */
}
</style>
<body>
<div></div>
</body>
重复背景图片设置
当盒子大而图片小的时候，backgroud-repeat用来设置如何重复背景图片，默认图片会在水平和垂直方向上重复，一般会有按顺序如下对应的三种调节，背景图片在水平方向是重复、背景图片在垂直方向是重复、背景图片在不重复，仅显示一次
<style>
div{background-image:url("");}
.br1{background-repeat:repeat-x;}
.br2{background-repeat:repeat-y;}
.br3{background-repeat:no-repeat;}
</style>
<body>
<div class="br1"></div>
<div class="br2"></div>
<div class="br3"></div>
</body>
背景综合设置
backgroud是一个综合属性，如上各个backgroud开头的属性的组合，都可以在其中写，组合比较*：
backgroud-color必须出现在最后；
backgroud-size必须出现在backgroud-position之后，用/连接
backgroud-image, backgroud-position, backgroud-size, backgroud-repeat可以任意出现
<style>
div{backgrand:url("") no-repeat -5px 0/20px 20px;}
/* 虽然无具体排序方式，不过一般会按backgroud-image，backgroud-repea, backgroud-position/backgroud-size的顺序书写*/
</style>
<body>
<div></div>
</body>
d.布局设置
浮动设置
float用来调节浮动属性，块级元素会默认独占一行，浮动可以让块级元素同行显示，一般有左浮动（left）,右浮动（right）
<style>
.fl{float:left;}
.fr{float:right;}
</style>
<body>
<div class="fl">左浮动</div>
<div class="fr">右浮动</div>
</body>
清除浮动
clear：在盒子容器底部会增加一个元素clear，有三个属性值：left,right,both
<style>
.c1{clear:left;}
/* 不允许自身左边有float浮动元素 */
.c2{clear:right;}
/* 不允许自身右边有float浮动元素 */
.c3{clear:both;}
/* 不允许自身两边有float浮动元素 */
</style>
<body>
<div class="c1">清除左</div>
<div class="c2">清除右</div>
<div class="c3">清除全部</div>
</body>
显示类型
display：调节盒子的类型，最常用的有block,inline-block属性值，这里用行内元素span标签举例
<style>
.db{display:block;}
.di{display:inline-block;}
</style>
<body>
<span class="db">调整为块级元素</span>
<span class="di">调整为行内块元素</span>
</body>
overflow属性
overflow在元素种的内容超出给定的宽度和高度属性时使用，常用的有三种属性：scroll，hidden，auto；
<style>
div
{
background-color:#ffffff;
width:150px;
height:150px;
overflow: scroll;
}
/* scroll属性会显示滚动浏览内容 */
/* 如果设置hidden，内容会修剪，多余内容直接不显示 */
/* 如果设置auto，会交给浏览器来判断容器是否装得下内容，装不下就加滚动条 */
</style>
<body>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
e.盒子模型设置
边框属性-border
边框宽度设置
border-width：可以有1~4个长度值，每个值用空格隔开
<style>
.bw1{border-width:1px;}
/* 表示边框四个边均为1px的宽度 */
.bw2{border-width:1px 3px;}
/* 表示边框上下为1px的宽度，左右为3px宽度 */
.bw3{border-width:1px 3px 5px;}
/* 表示边框上为1px的宽度，左右为3px宽度，下为5px宽度 */
.bw4{border-width:1px 3px 5px 7px;}
/* 表示边框上为1px的宽度，右为3px宽度，下为5px宽度，左为7px宽度（参考按钟表顺时针方向） */
</style>
<body>
<div class="bw1">border-width</div>
<div class="bw2">border-width</div>
<div class="bw3">border-width</div>
<div class="bw4">border-width</div>
</body>
边框风格设置
border-style用于调整边框的风格，CSS2中常用属性值如下表所示，代码暂时列举solid，想尝试其他样式将属性值solid换成其他的属性值即可
| 值 | 描述 |
|---|---|
| none | 定义无边框样式 |
| hidden | 用于解决边框冲突 |
| dottaed | 设置边框为点状边框 |
| dashed | 设置边框为虚线边框 |
| solid | 设置边框为实线边框 |
| double | 设置边框为双线边框，双线边框为bordr-width的值 |
<style>
div{border-style:solid}
</style>
<body>
<div>表格边框展示</div>
</body>
边框颜色设置
border-color：按顺序有如下有三种调节：英文单词、十六进制、rgb取值(具体同之前所介绍字体颜色设置)
<style>
.bc1{border-color:green;}
.bc2{border-color:#eeeeee;}
.bc3{border-color:rgba(80,80,80,0.5);}
</style>
<body>
<div class="bc1">颜色1</div>
<div class="bc2">颜色2</div>
<div class="bc3">颜色3</div>
</body>
边框综合设置
border同之前font，background一样，是个复合属性，里面包含了粗细、样式、颜色
<style>
div{border:1px solid red;}
/* 一般按border-width、border-style、border-color的顺序对边框进行综合调节 */
</style>
<body>
<div>边框综合设置</div>
</body>
外填充属性-margin
注意：块级元素的垂直相邻外边距会合并，行内元素不占上下外边距，左右外边距也不会合并，浮动元素的外边距也不会合并
外填充顶部设置
margin-top可以对盒子模型的外填充区域顶部进行调整
<style>
div{margin-top:50px;}
</style>
<body>
<div>外填充顶部设置</div>
<div>外填充顶部设置</div>
</body>
外填充底部设置
margin-bottom可以对盒子模型的外填充区域底部进行调整
<style>
div{margin-bottom:50px;}
</style>
<body>
<div>外填充底部设置</div>
<div>外填充底部设置</div>
</body>
外填充左填充部分设置
margin-left可以对盒子模型的外填充区域的左填充部分进行调整
<style>
div{margin-left:50px;}
</style>
<body>
<div>外填充左填充部分设置</div>
<div>外填充左填充部分设置</div>
</body>
外填充右填充部分设置
margin-right可以对盒子模型的外填充区域的右填充部分进行调整
<style>
div{margin-right:50px;}
</style>
<body>
<div>外填充右填充部分设置</div>
<div>外填充右填充部分设置</div>
</body>
外填充综合设置
margin：外填充部分的综合设置，可以有1~4个值，每个值用空格隔开
<style>
div{
width:100px;
height:100px;
}
.m1{margin:10px;}
/* 表示四个外填充区域均为10px */
.m2{margin:10px 20px;}
/* 表示外填充区域上下为1px的宽度，左右为3px宽度 */
.m3{margin:10px 20px 30px;}
/* 表示外填充区域上为1px的宽度，左右为3px宽度，下为5px宽度 */
.m4{margin:10px 20px 30px 40px;}
/* 表示外填充区域上为1px的宽度，右为3px宽度，下为5px宽度，左为7px宽度（参考按钟表顺时针方向） */
</style>
<body>
<div class="m1">margin</div>
<div class="m2">margin</div>
<div class="m3">margin</div>
<div class="m4">margin</div>
</body>
margin还可以用auto来设置属性值
<style>
div{width:100px;height:100px;}
.ma1{margin:auto;}
/* 表示盒子模型相对于父元素居中 */
.ma2{margin:10px auto;}
/* 表示外填充区域上下为1px的宽度，左右相对于父元素居中 */
.ma3{margin:auto 10px;}
/* 表示外填充区域上下相对于父元素居中，左右为10px */
</style>
<body>
<div class="ma1">margin</div>
<div class="ma2">margin</div>
<div class="ma3">margin</div>
</body>
内填充属性-padding
内填充属性设置同外填充，外填充属性设置中所有margin换成padding，即为内填充属性设置
注意：在写网页css时，有些会有默认的margin和padding，最好在编辑网页内样式时提前对margin和padding进行重置
<style>
*{margin:0; padding:0;}
/* margin和padding设置0时，单位px可以省略，其他时候不能省略单位，也可用cm单位 */
</style>
综上，汇总完毕,如需进一步详细了解，可以参考css手册
本文地址：https://blog.csdn.net/Vargrant/article/details/107283280
上一篇： CSS2.0总结