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手册

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

王爽汇编语言第三章实验四
（1）（2）编程如下： assume cs:codesg codesg segmentmov ax,20Hmov ds,axmov bx,0mov cx,40Hs:mov ds:[bx],bxinc bxloop smov ax,4c00Hint 21H codesg ends end执行之后查看修改成功（3）先观察loop中的内容，是将ds中的数据拷贝到es中，因此，ds应该为程序开始部分，所以…...
2024/5/7 21:31:32
第2部分字符串算法(提高篇)--第1章哈希和哈希表-1459：friends
1459：friends 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 1379 通过数: 258 【题目描述】原题来自：BalticOI 2014 有三个好朋友喜欢在一起玩游戏，A 君写下一个字符串 S，B 君将其复制一遍得到 T，C 君在 T 的任意位置（包括首尾）插入一个字符得到 U。现在…...
2024/4/30 4:10:29
Elasticsearch的copy_to探秘
众所周知es中有个_all元字段（它包含每个字段的文本副本），使用_all进行搜索的query_string和simple_query_string查询有分词搜索的场景非常好赞，不过从6.0版本已默认禁用（_all不能再为使用Elasticsearch 6.0或更高版本创建的索引配置，更多）。要查询某个document中_all的信…...
2024/5/7 13:38:55
两个类具有相同的 XML 类型名称问题解决
两个类具有相同的 XML 类型名称,请使用 @XmlType.name 和 @XmlType.namespace 为类分配不同的名称解决 #在启动tomcat项目后，调用webservice接口时代码报了两个类具有相同的 XML 类型名称解决方法，修改方法返回值的名字： @XmlAccessorType(XmlAccessType.FIELD) @XmlType(n…...
2024/5/7 14:35:38
java毕业设计_移动典当系统
移动典当系统移动典当系统mysql数据库创建语句移动典当系统oracle数据库创建语句移动典当系统sqlserver数据库创建语句移动典当系统spring+springMVC+hibernate框架对象(javaBean,pojo)设计移动典当系统spring+springMVC+mybatis框架对象(javaBean,pojo)设计高质量编程视…...
2024/4/16 1:22:45
Bootstrap4 面包屑导航（Breadcrumb）
面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。 Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（…...
2024/4/16 1:21:54
单调栈及其应用——以LeetCode(42) 接雨水，LeetCode（84）柱状图最大的矩形为例
大家都知道，栈是一种常用的数据结构，有一定的数据操作和使用的规则，单调栈是使用栈来实现的一种算法，之所以将单调栈称为一种算法就是因为它是用来解决某一类问题的，还没有通用到可以解决很多的问题，或者作为其他算法的基本元素。单调栈只是栈的一种用法。下面介绍单调栈…...
2024/4/1 3:30:13
Python垃圾回收机制
Garbage collection(GC) Python中的垃圾回收机制采用的是引用计数为主，分代回收和标记-清除为辅的策略 1. 引用计数（Reference Counting） Python中每个东西都是对象，对象的核心是一个结构体PyObject： typedef struct _object {Py_ssize_t ob_refcnt; # 引用计数值struct …...
2024/4/1 3:30:10
VirtualBox下安装CentOS7系统
https://www.cnblogs.com/hihtml5/p/8217062.html...
2024/4/1 3:30:11
Java Day5
package Day5;public class Num31 {public static void main(String[] args) {/*二维数组:1.定义一个int类型数组a,数组长度是4a中第一个元素有5个元素a中第二个元素有3个元素a中第3个元素有6个元素,其中第三个是22.定义一个int类型数组,数组长度是3b中每一个元素都有4个元素b中…...
2024/4/16 1:22:50
微信小程序wx.request()方法封装及状态码的处理
一、在根目录下创建config.js的js文件和api的文件夹下创建http.js的js文件 *** config.js文件 const config = {api_base_url: https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata,//若后端要求传入// appkey:kkkkkkkkooooo } // let fun1=function(){// }expor…...
2024/4/16 1:22:25
Java语言基础之常用类（Math类、System类、Random类、Date类等）
Math类 java.lang包下的Math类给处理数字提供了各种方法。如初等函数、指数、对数、平方根和三角函数等。 Math类的常用方法： static int max(int a,int b)：返回a和b之间的最大值 static int min(int a,int b)：返回a和b之间的最小值 static int abs(int a)：返回a的绝对值 s…...
2024/4/16 1:22:25
SLAM论文精读系列：（第二篇）通过Wi-Fi传感增强视觉SLAM的室内应用
本篇博文由南湖游子原创，转载请注明出处！文献来源：Zakieh H, Charuvahan A, Anand B, et al. Augmenting visual SLAM with Wi-Fi sensing for indoor applications[J]. Autonomous Robots (2019) 43:2245–2260.文献内容：通过Wi-Fi传感增强视觉SLAM的室内应用阅读笔记…...
2024/4/16 1:22:04
XSS跨站脚本漏洞
阅读目录1 XSS漏洞原理解析2 XSS攻击类型3 反射型XSS3.1 分析反射型XSS4 存储型XSS4.1 分析存储型XSS5 DOM型XSS5.1 分析DOM型XSS 1 XSS漏洞原理解析 XSS跨站脚本攻击（Cross Site Scripting，简称为XSS）是一种针对web网站安全的漏洞攻击技术，恶意攻击者利用网站程序对用户…...
2024/4/17 21:23:59
Vue 开发必须知道的 36 个技巧【近1W字】
前言 Vue 3.x 的Pre-Alpha 版本。后面应该还会有 Alpha、Beta 等版本,预计至少要等到 2020 年第一季度才有可能发布 3.0 正式版; 所以应该趁还没出来加紧打好 Vue2.x 的基础; Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,本文从列举了 36 个 vue 开发技巧;…...
2024/5/2 4:00:13
java基础/模块一/编程案例(要求语言:java)
一.编程题提示用户输入年月日信息，判断这一天是这一年中的第几天并打印。/** *编程实现: 提示用户输入年月日信息，判断这一天是这一年中的第几天并打印。 * */ import java.util.Scanner; public class JudgeDateTest{public static void main(String[] args){//1.初始化信息…...
2024/4/16 1:23:21
使用flexbox将元素与底部对齐
本文翻译自：Align an element to bottom with flexbox I have a div with some children: 我和一些孩子有一个div ： <div class="content"><h1>heading 1</h1><h2>heading 2</h2><p>Some more or less text</p><a h…...
2024/4/16 1:23:36
微信小程序开发工具初始化代码仓库
微信小程序开发工具使用 Git 来进行管理的。你可用使用微信的 Git 服务。单击上面的代码控制。如果是第一次使用的话，将会要求你对本地代码仓库进行初始化。当你初始化完成后，你会看到下面的界面：上面显示的是本地代码仓库已经初始化完成了。但是你的代码还没有上传到服务器…...
2024/4/19 11:15:16
linux误删libc-bin出现dpkg: warning: ‘ldconfig’ not found in PATH or not executable
用apt安装任何软件都会报如下错误 Preconfiguring packages … dpkg: warning: ‘ldconfig’ not found in PATH or not executable dpkg: error: 1 expected program not found in PATH or not executable Note: root’s PATH should usually contain /usr/local/sbin, /usr/s…...
2024/4/16 1:23:31
springboot+redis系列（二）jedis操作String类型数据
小弟也是初学者，若有问题，各位大佬指点指点本系列目录本章为springboot+redis系列第二节，主要jedis操作String类型数据 1.application.yml配置 server:port: 8081 spring:redis:port: 6379 # password:#没有设置密码，必须要去掉配置，否则连接不上redishost: 127.0.0.…...
2024/4/16 1:23:36

CSS个人梳理

相关文章

最新文章