CSS简述1
程序员文章站
2022-04-19 13:38:23
CSSCascading Style Sheet:层叠样式表,简称样式表。一、字体设置:font-style:设置字体是否倾斜 normal italicfont-weight:设置字体是否加粗(normal bold bolder 100 200 300)font-size: 设置字体大小(可以非常大 不能非常小 最小是12px)font-family: 设置字体类型(font-family:A,B,C,D)font:上面的几个属性的复合属性(font:fo...
CSS
Cascading Style Sheet:层叠样式表,简称样式表。
一、字体设置:
- font-style:设置字体是否倾斜 normal italic
- font-weight:设置字体是否加粗
(normal bold bolder 100 200 300) - font-size: 设置字体大小
(可以非常大 不能非常小 最小是12px) - font-family: 设置字体类型
(font-family:A,B,C,D) - font:上面的几个属性的复合属性
(font:font-style font-weight font-size/line-height font-family
font-style font-weight 可以不写 也可以交换位置
font-size/line-height font-family 必须写 能交换位置 ) - color:设置字体颜色
(对于a标签来说,需要选中a标签 )
二、文本设置:
text-decoration: 用来设置文本的装饰线 下划线(underline) 删除线(line-through)
应用:把a标签的默认的下划线去掉 hover时,加上下划线
text-indent: 首行缩进
2em 首行缩进两个汉字的宽度
-1000em 可以隐藏一个盒子中的文本 如:<div class="logo">百度</div> (显示logo图片,隐藏“百度”两个字)
text-align: 1)让盒子中的文本居中
2)让行内元素或行内块元素在一个盒子中居中(可以把行内元素或行内块元素当成文本)
line-height:设置行高
1)如果是子标签是男标签,行高可以撑起子标签的高度
2)如果是子标签是女标签,行高不能撑起子标签的高度
三、盒子模型
- 内容区域 width height
- 内填充区域 padding
- 边框 border
- 外填充区域 margin
- 背景 background
1)内容区域:width 和 height
对于男盒子来说,表示内容区域
对于女盒子,width和height不起作用
注意点:
1)不设置有默认值,宽度默认值是auto,对于块级元素来说,auto表示尽可能大,对于行内元素来说,auto表示尽可能小。
2)不设置高度,男盒子的高度是内容的高度,也就是说高度是由内容撑起来的,对于女盒子来说,也是由内容撑起来的,但是和font-size也有关系。
3)宽度和高度可以设置百分比,是父元素的百分比的,一般情况下在移动端开发时用的多一点。
2) 内填充区域: padding
用来设置内填充,也叫补白 表示内容区域和边框之间的距离
四个方向: 用的也比较多的
padding-top:
padding-right:
padding-bottom:
padding-left:
padding后面也可以跟一个值,二个值,三个值,四个值:
一个值:padding:10px 四个方向的padding都是10px
二个值:padding:10px 20px; 上下是10px 左右是20px
三个值:padding:10px 20px 30px; 上是10px 左右是20px 下是30px
四个值:padding:10px 20px 30px 40px; 上 右 下 左
注意点:
1)有些标签是有默认的padding 如ul ol... 等 一刀切 *{ padding:0; }
2)对于行内元素来说,padding在垂直方向上不影响行高,效果上看似是有padding,但是padding不是真正的padding,或者说对于一个女盒子来说,padding在垂直方向上无效。
3)对于块级元素来说,上下padding可以撑起男盒子的高度。
3)边框: border
边框的粗细 border-widht
边框的样式 border-style
边框的颜色 border-color
一般情况下,不会单独设置 border是一个复合属性
注意点:
1)border:1px solid red; border后面的属性是没有顺序的,但是一般都是先写border-width,然后是border-style,最后是border-color。
2)粗细大部分情况下单位都是px 你也可以使用单词 使用单词时 在不同的浏览器下代表粗细是不一样的
3)边框的样式也非常多 用的非常多的有这几个:solid 实线 dotted 点画线 dashed 虚线 none 没有线 .....
4)边框的颜色设置 单词 用的最多还是16进制 也可以使用rgb函数
5)也可以单独设置某一个方向上的border border-top:1px solid red; 用的也比较多
4)外填充区域:margin
表示外边距 盒子与盒子之间的距离 是边框之外的间隔 是在border之外的
四有个方向:
margin-top
margin-right
margin-bottom
margin-left
margin后面也可以跟一个值,二个值,三个值,四个值:
一个值:margin:10px 四个方向的margin都是10px
二个值:margin:10px 20px; 上下是10px 左右是20px
三个值:margin:10px 20px 30px; 上是10px 左右是20px 下是30px
四个值:margin:10px 20px 30px 40px; 上 右 下 左
5)背景:background
background-color:设置盒子的背景颜色 背景颜色可以填充padding 也可以填充border
background-image:设置盒子的背景图片 img标签也是盒子 也可以给img这个盒子设置背景图片
一个盒子大小正好和背景图大小一样:正好装进去
一个盒子如果大于背景图:默认会在x和y轴都进行平铺
一个盒子如果小于背景图:只会显示背景图的一部分,背景图的左上角和盒子的左上角对齐 左上角是指从pddding开始 但是border中也会填充图片图片
background-repeat:
控制是否平铺 repeat-x 只平铺x轴 repeat-y 只平铺y轴 repeat x和y轴都平铺 no-repeat x和y轴都不平铺
background-position:
一个小盒子中放一个大的背景图,可以使用background-position定位。
一个大盒子中放一个小的背景图,也可以使用background-position定位。
本文地址:https://blog.csdn.net/weixin_46003469/article/details/107264792