标签嵌套

标签嵌套规则

块级标签能够嵌套某些块级标签和内联标签(行内标签)
内联标签不能嵌套块级标签,只能嵌套内联标签
块级标签能够设置高度和宽度
内联标签不能设置高度和宽度(设置也没有效果)

CSS属性设置

　　宽和高

width:100px 设置宽度
height:100px 设置高度
border: 1px solid red 设置边框大小,颜色

.c1{width: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是正方形 */
            width: 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-width: 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 + 左右边框的距离

posted @ 2019-01-25 13:06 Tank-Li 阅读(486) 评论(0) 编辑收藏举报

刷新页面返回顶部

心平

标签嵌套

公告