当前位置：移动技术网 > IT编程>网页制作>CSS > CSS个人梳理

CSS个人梳理

2020年07月12日 | 移动技术网IT编程 | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

CSS知识点总结

css知识点总结一、什么是CSS？二、CSS的主要作用是什么2.1 CSS布局2.1.1 盒子模型欢迎使用Ma... [阅读全文]
css的基础知识

初识css1、什么是css。css是英文Cascading Style Sheet的缩写，意思是层叠样式表。作用... [阅读全文]
CSS总结

CSS总结css基础知识CSS：层叠样式表 Cascading Style Sheet学习CSS就是学习一堆的... [阅读全文]
6-css样式

背景颜色background-color背景颜色的值可以是英文，可以是十六进制颜色值，可以是rgb背景图片bac... [阅读全文]
荐 css的3中水平居中方式和4中水平垂直居中方式及应用情形速记

文章目录三种水平居中方式及其应用情形inline元素：text-alignblock元素：margin：0 au... [阅读全文]
前端工程化的意义

工程化不是某个具体的工具,工程化的核心是对项目整体的规划和架构解决的问题&带来的价值1.每次开启新项目，... [阅读全文]
CSS2.0简单总结

CSS2.0总结CSS 指层叠样式表CSS样式css背景1、background-iamge:url(“加入图片... [阅读全文]
CSS中的渐变，border画三角

渐变：Linear Gradients线性渐变 background-image: linear-gradie... [阅读全文]
奇葩的vertical-align属性

vertical-align是css中，垂直对齐方式的样式属性 [阅读全文]
css2zj

标签分类男标签（块标签）：独占一行，eg:div hn p ul ol li dt…可以设置宽高，如果不设，则默... [阅读全文]

网友评论


验证码：