标签嵌套规则
- 块级标签能够嵌套某些块级标签和内联标签(行内标签)
- 内联标签不能嵌套块级标签,只能嵌套内联标签
- 块级标签能够设置高度和宽度
- 内联标签不能设置高度和宽度(设置也没有效果)
CSS属性设置
宽和高
- 100px 设置宽度
- height:100px 设置高度
- border: 1px solid red 设置边框大小,颜色
.c1{100px;height:100px;border:1px solid red;}
字体属性
- font-family 设置字体样式,可以设置多个样式,浏览器按顺序从中挑选能够显示的出来的
body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif }
2.font-size 设置字体大小,如果设置为inherit表示继承父元素的字体大小
p { font-size: 14px; }
3.font-weight 设置字体粗细
值 描述 normal 默认值，标准粗细 bold 粗体 bolder 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值
4.color 设置字体颜色
color:rgb(255,0,0) #红绿蓝就是rgb的意思,第一个参数是红,最高255,最低0#详情看rgb颜色查询对照表 color:rgba(255,0,0,0.3) #第四个参数设置色彩的透明度 color:#FF0000 #十六进制写法
text-align 文字对齐
值 描述 text-align:left 左边对齐 默认值 text-align:right 右对齐 text-align:center 居中对齐 text-align:justify 两端对齐
text-decoration 文字装饰
值 描述 text-decoration:none 默认。 定义标准的文本。 text-decoration:underline 定义文本下的一条线。 text-decoration:overline 定义文本上的一条线。 text-decoration:line-through 定义穿过文本下的一条线。 text-decoration:inherit 继承父元素的text-decoration属性的值。 常用的为去掉a标签默认的自划线： a { text-decoration: none; } 首行缩进 p { text-indent: 32px; #首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px }
背景属性
/*背景颜色*/ 1.background-color: red; /*背景图片*/ 2.background-image: url('1.jpg'); #url里面是图片路径，如果和你的html文件在一个目录下，使用这种相对路径就行了，来个葫芦娃图片试一下 背景重复 3.background-repeat: repeat(默认):背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签 background-repeat: repeat-x：背景图片只在水平方向上平铺 background-repeat: repeat-y：背景图片只在垂直方向上平铺 background-repeat: no-repeat：背景图片不平铺 /*背景位置*/ #如果不写默认左上角 4.background-position: right top;(右边) left top; (左边) center top(中间); center center(x,y的中间) left bottom 左下角 1,2,3,4的简写形式 backgroud: url("路径") no-repeat right top; #right top可以替换为数值(距离左边,距离右边):200px 20px border:1px solid red; #设置边框 雪碧图 /*background-position: 200px 200px;*/ #以前大家都用雪碧图，就是将很多的网页上需要的小图片组合成一个大图，用这个图中哪个位置的小图片，就通过这个参数来调整，看下面的示例操作，现在很少用这个了
边框属性
- border-width 宽度
- border-style 样式
- border-color 颜色
- border-radius 圆角边框(要求值为百分比)
使用简写方式(边框大小,样式,颜色)： #i1 { border: 2px solid red; } 边框样式 值 描述 border-style:none 无边框。 dotted 点状虚线边框。 dashed 矩形虚线边框。 solid 实线边框。
单独为边框设置样式,top 顶部;bottom底部 #i1 { border-top-style:dotted; border-top-color: red; border-right-style:solid; border-bottom-style:dotted; border-left-style:none; }
border-radius 设置圆角边框的效果(要求值为百分比,50为圆形)
border-radius:50%
设置圆形头像 <style> .c1{ /* 200*200是正方形 */ 200px; height: 200px; #设置边框的样式和圆形边框 border-left: 10px dashed green; border-right: 10px dashed red; border-bottom: 10px dashed yellow; border-top: 10px solid purple; border-radius: 50%; /*溢出的部分隐藏*/ overflow: hidden; } .c1 img{ /*按照父级标签的宽度来展示,并且进行等比缩放*/ max- 100%; } </style> </head> <body> <div class="c1"> <img src="xyjy.png" alt=""> </div>
网页高级p图,今日爆款
打开页面后,按f12,然后点击console 清空里面的内容,填进下面内容,就可以修改页面钱数
document.body.contentEditable=true
dispaly属性 用于控制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: 且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
盒子模型:
Box:
Content 里面的内容 高度宽度就是我们设置 width 和 height
Padding:内边距(内填充)
Padding-left
Padding-right
Padding-top
Padding-bottom
Border: 边框
Margin 外边距,距离其他标签的距离,两个标签如果都设置了 margin,那 么两个标签之间的距离取最大的那个 margin
标签占的宽度:content 宽度+左右 padding + 左右边框的距离