CSS属性相关
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度,内联标签的宽度由内容来决定。
文字字体
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。
简单实例:
body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif }
p { font-size: 14px; }
如果设置成inherit表示继承父元素的字体大小值。
font-weight用来设置字体的字重(粗细)。
值 描述 normal 默认值,标准粗细 bold 粗体 bolder 更粗 lighter 更细 100~900 设置具体粗细,400等同于normal,而700等同于bold inherit 继承父元素字体的粗细值
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定:
1.十六进制值 - 如: #FF0000 #前两位是表示红,中间两位表示绿,后面两位表示蓝,F是最高级别,0表示最低级别(无色)
2.一个RGB值 - 如: RGB(255,0,0) #红绿蓝就是RGB的意思,第一个参数是红,最高255,最低0
3.颜色的名称 - 如: red
还有rgba(255,0,0,0.3),第四个值为alpha, 指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间。
文字对齐
text-align 属性规定元素中的文本的水平对齐方式。(letter-spacing)
值 描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐
文字装饰
text-decoration 属性用来给文字添加特殊效果。
值 描述 none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 inherit 继承父元素的text-decoration属性的值。
常用的为去掉a标签默认的自划线:
a { text-decoration: none; }
将段落的第一行缩进 32像素:
p { text-indent: 32px; #首行缩进两个字符,因为我记得一个字在页面上的默认大小为16px }
/*背景颜色*/background-color: red; /*背景图片*/ background-image: url('1.jpg'); #url里面是图片路径,如果和html文件在一个目录下,使用这种相对路径就行了, background-repeat: no-repeat; /* 背景重复 repeat(默认):背景图片沿着x轴和y轴重复平铺,铺满整个包裹它的标签 repeat-x:背景图片只在水平方向上平铺 repeat-y:背景图片只在垂直方向上平铺 no-repeat:背景图片不平铺*/ /*背景位置*/ background-position: right top;/*background-position: 200px 200px;*/ #200px 200px 是距离父级标签的左边和上边的距离,以前大家都用雪碧图,就是将很多的网页上需要的小图片组合成一个大图,用这个图中哪个位置的小图片,就通过这个参数来调整,看下面的示例操作,现在很少用这个了
下面是浏览器的坐标系:
no-repeat 和 right top:
效果:
background-position:200px 200px;这种参数的示例:
在抽屉上还可以找到这个图片:
然后:
你就会看到它:好多个小图片组成的
其实页面在加载到img标签之后,会单独的往后端发请求,来请求这个图,如果小图很多的话,页面要发好多个请求,那么页面加载的就慢,所以放到一个大图上,每个用这个大图上面的小图的地方,img里面的url都指向这个一个图片的url,这样加载就很快了,因为只需要请求一次,你的网页就拿到了这个图片,其他的请求都可以直接用这个图,而不需要多次请求这个图了,然后通过这个background-position的值来调整。
点击小灯泡的第一个,就看到效果了,自动帮你优化写法,这个小灯泡就是pycharm帮你提供的一些帮助
支持简写:
background:#ffffff url('1.png') no-repeat right top;
使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上,然后根据位置去显示图片。减少频繁的图片请求,就是刚才说的雪碧图。
一个有趣的例子:鼠标滚动但是背景不动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>滚动背景图示例</title> <style> * { margin: 0; } .box { width: 100%; #凡是这种使用百分比的,都是按照父标签的宽度的百分之多少来显示 height: 500px; background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center; #这个图片好像没有了,自己找一个网上的图片,把这个url路径换一下,可以到摄图网去看看,国内免费的一个图片网站 background-attachment: fixed; #就是这个属性,让你的背景图片固定住的意思,attachment是附属、依附的意思 } .d1 { height: 500px; background-color: tomato; } .d2 { height: 500px; background-color: steelblue; } .d3 { height: 500px; background-color: mediumorchid; } </style> </head> <body> <div class="d1"></div> <div class="box"></div> <div class="d2"></div> <div class="d3"></div> </body> </html>
边框属性 1.border-width 宽度 2.border-style 样式 3.border-color 颜色
#i1 { border-width: 2px; border-style: solid; border-color: red; }
通常使用简写方式:
#i1 { border: 2px solid red; }
边框样式
值 描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。
除了可以统一设置边框外还可以单独为某一个边框设置样式,如下所示:
#i1 { border-top-style:dotted; border-top-color: red; border-right-style:solid; border-bottom-style:dotted; border-left-style:none; }
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
效果:
还可在调试窗口调整颜色来测试(调试窗口:页面上右键--检查,或者f12)
调整好之后,把调整后的值复制到css属性里面就行了
还可以通过hover来设置鼠标移动上去变颜色:
你会看到之前的background-color有了一个横线,这是不生效的效果,因为你查看的hover的样式
还可以看到class
把对勾去了,这个class的样式就不显示了
通过调试窗口还可以玩一个神奇的东西:document.body.contentEditable=true
不用ps就能够改了:注意昂,只能改当前页面的显示内容,改不了真实的值,并且页面一刷新,这个指令就失效了,需要重新输入
display属性
用于控制HTML元素的显示效果。
值 意义 display:"none" HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。 display:"block" 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。 display:"inline" 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 display:"inline-block" 使元素同时具有行内元素和块级元素的特点。
display:"none"与visibility:hidden的区别:
visibility:hidden: 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
display:none: 可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
创建标签时的简写方法:
看效果:
或者简写:
然后按一下tab键:
然后看div里面套一个a标签
然后一回车
这些都是编辑器提供的快捷方式。
在加一个$符号:
按delete删除:
一下就删除了三个了:
注意一点:块级标签不管设置的宽度是多少,都会占用你整个页面宽度的空间,看下面
然后看一下display的效果inline-block,高度宽度还可以设置,包含内联和块级标签的属性
还可以通过display:block将内联标签改为块级标签的效果
看效果:
看效果
不占用位置,也不显示
在css里面,每个标签可以称为一个盒子模型,看下面的图: 1.margin:外边距:用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。 2.padding:内边距:用于控制内容与边框之间的距离; 3.Border(边框): 围绕在内边距和内容外的边框。 4.Content(内容): 盒子的内容,显示文本和图像。
.margin-test { margin-top:5px; margin-right:10px; margin-bottom:15px; margin-left:20px; }
所以在写css样式的时候,都会先写一个
意思是说,body的上下左右的margin都设置为0.
在看一个,如果将上下两个标签都设置了margin是什么效果
推荐使用简写:
.margin-test {
margin: 5px 10px 15px 20px;
}
顺序:上右下左
常见居中:
.mycenter { margin: 0 auto; #上下0像素,左右自适应,居中的效果 }如果你写的是三个:margin: 10px 20px 10px;意思是上为10,左右为20,下为10
.padding-test { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; }
推荐使用简写:
.padding-test {
padding: 5px 10px 15px 20px;
}
顺序:上右下左
补充padding的常用简写方式:
-
-
提供两个,第一个用于上-下,第二个用于左-右;
-
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下;
-
提供四个参数值,将按上-右-下-左的顺序作用于四边;
在 CSS 中,任何元素都可以浮动。最开始出现浮动这个东西是为了什么呢,记不记得一个word文档里面,插入图片的时候,有一个文字环绕的效果啊:
最开始浮动这个东西是想要做上面这种效果用的,现在多数用来做网页布局的。很多的网站都是左边一个菜单栏,右边一堆的其他内容。
看效果:
那怎么让绿色的这个跑到红色的左边呢?
上面是浮动的一个最简单的用法,但是浮动有一个副作用,看:
重新创建一个htnl文件,写上下面的内容
css样式:
效果是这样的:
怎么让下面这个粉色的跑到右边去啊
刷新看看效果:
两个红色的设置了一个往左浮动一个往右浮动,c3那个标签没有设置浮动之后,发现红色的两个虽然浮动了,但是粉色的这个跑上去了,两个红色的压在这个粉色的标签上了。
先看这个问题昂:在给c2的div标签加上浮动之前是下面这样的效果:
并没有给c1那个div标签设置高度,但是发现c1这个div标签是有高度的,这是因为里面两个c2div设置了高度了,这两个div将c1这个div标签撑起来了
当加上浮动之后,再看这个c1的div标签的高度:发现c1这个div的高度没有了,显示的高度是1.99,是因为给它设置了边框,上下边框加起来正好2px,这里显示了个约等的值
这就看到了浮动的副作用,浮动起来以后脱离了整个页面文档,然后两个c1的div标签,一个往左靠,一个往右靠,无法撑起自己的父级标签了,也就是那个c1的div标签,那么粉色的c3那个标签就上去了。影响了页面的整个布局。
不想让粉色的这个标签顶上去怎么办,看一下c1这个标签的子标签的高度(内边距+外边距+边框宽度+标签高度),然后给c1这个父标签的高度设置成这个值,但是如果两个子标签的高度不相等呢,并且将来这样的标签要是很多怎么办,所以一般不用这种方法来解决浮动的问题,看下面的clear,清除浮动。
浮动元素会生成一个块级框,而不论它本身是何种元素。
关于浮动的两个特点:
-
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
-
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
三种取值
left:向左浮动
right:向右浮动
none:默认值,不浮动
clear属性规定元素的哪一侧不允许其他浮动元素。
值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
注意:clear属性只会对自身起作用,而不会影响其他元素。按照上面那个例子的意思就是说,可以给粉色的那个c3属性的div标签设置一个clear:both,意思是说,这个标签的左右都不能有浮动的标签,那么它只能跑到两个浮动的c2div标签的下面,但是一般都会再c2和c3的中间加一个别的标签,给这个标签设置一个clear属性,并且高度设置为0,或者不给高度,因为浮动的标签是自己c1里面的,所以要自己解决,才能撑起自己的高度,并且再用其他的标签的时候,就不需要再考虑浮动的问题了,直接写自己的样式就可以了,不然每次加其他的标签都要去看看上面的标签有没有浮动的。
接着看上面这个示例,如果这样设置:
这样粉色的这个标签就上不去了
清除浮动
浮动的副作用(父标签塌陷问题),所以要清除浮动
主要有三种方式:
-
固定高度 就是刚才的示例,在父标签里面加一个其他的标签
-
伪元素清除法 css来解决
-
overflow:hidden 给塌陷的父级标签设置这个属性就可以清除浮动。
伪元素清除法(使用较多):
.clearfix:after { content: ""; display: block; clear: both; }
通过微元素清除法来清除一下浮动:
效果是一样的:
一般业内约定成俗,都把这个清除浮动的class属性命名为clearfix,而不是cc,如果在别的网页看到了这个clearfix,这个一定是用来清除浮动的。
总结一下:为什么要有浮动,是想做页面布局,但是浮动有副作用,父级标签塌陷,所以要想办法去掉这个副作用,使用了clear来清除浮动带来的副作用,当然也可以通过设置标签为inline-block来实现这种布局效果,但是把一个块级标签变成一个类似内敛标签的感觉,不好操控,容易混乱,所以一般都用浮动来进行布局。
值 描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
-
overflow(水平和垂直均设置)
-
overflow-x(设置水平方向,只出现x轴的滚动条)
-
举个例子:
比如在一个标签里面写了一堆的文字,然后把标签的高度和宽度设置的比较小的时候,文字就溢出了:
然后就可以设置一下,如果文字溢出了,溢出的部分怎么办,设置一个overflow为hidden:
再看效果,溢出的文字就不显示了。
如果设置成overflow为scroll,就会出现滚动条,改动一个下标签的高度和宽度昂,要不然不好看出效果:
看效果:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>圆形的头像示例</title> <style> * { margin: 0; padding: 0; background-color: #eeeeee; } .header-img { width: 150px; #如果这个高度和宽度比图片的像素小怎么办,图片显示不全,因为用户上传的头像没准多大像素的,就需要设置下面哈格.header-mg>img,里面写上max-width:100%了 height: 150px; border: 3px solid white; border-radius: 50%; #圆形的边框 overflow: hidden; #溢出的内容隐藏 } .header-img>img { max-width: 100%; #相当于将图片的大小设置为父级标签的大小来显示了,因为用户上传的头像的像素是不知道的,就让它按照父级标签的大小来,就能放下整个头像了,就不会出现头像显示不全的问题了#直接写width:100%就行,上面写max-width的意思是如果图片大于设置的标签高宽的时候,就按照父级标签的大小来,比父级标签的高宽小的时候,就不需要按照父级标签的大小来了,了解一下就行了 } </style> </head> <body> <div class="header-img"> <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt=""> </div> </body> </html>
下面来学习定位:也是用来布局的,一般用来做一些小的布局,例如小米商城:
还有网站右上角这个东西:
这些小范围的布局一般都是定位做的,大范围的布局一般都是用float来做的
static(无定位)
static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的。
relative(相对定位)
相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置左上角为参照物。即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。对象遵循正常文档流,所以不会出现像浮动那种父级标签塌陷的副作用,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。往上移动
原文地址:https://www.cnblogs.com/sundawei7/p/11528533.html
- 算法模板——线段树1(区间加法+区间求和)
- 【LeetCode 205】关关的刷题日记38 Isomorphic Strings
- JavaScript基础2---控制权DOM操作
- 算法模板——线段树3(区间覆盖值+区间求和)
- 算法模板——线段树4(区间加+区间乘+区间覆盖值+区间求和)
- 【LeetCode 204】关关的刷题日记39 Count Primes
- 算法模板——并查集 1
- Java 持久化操作之 --io流与序列化
- 算法模板——LCA(最近公共祖先)
- 算法模板——AC自动机
- UOJ #117. 欧拉回路
- 算法模板——左偏树(可并堆)
- 算法模板——二分图匹配
- Codevs2776 寻找代表元
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 【python-opencv】读取、显示、写入图像
- WSL——windows上的linux子系统
- 【python-opencv】读取、显示、保存视频
- 超级账本——Hyperledger Fabric
- 【python-opencv】绘图(目标检测框及其置信度等)
- 哈希表:哈希值太大了,还是得用set
- 哈希表:今天你快乐了么?
- 简单二分法查找(binary search)
- 【python-opencv】鼠标作为画笔
- npm 依赖管理中被忽略的那些细节
- 哈希表:map等候多时了
- 简单了解异步通信
- 哈希表:其实需要哈希的地方都能找到map的身影
- 哈希表:这道题目我做过?
- 哈希表:解决了两数之和,那么能解决三数之和么?