CSS(1)css常用属性

目录

 

文本设置

字体属性

背景属性

列表属性

display常用属性

盒子模型有关的属性

边框属性

外边距属性

内边距属性

鼠标属性:

浮动属性float:

清除浮动 clear:

overflow属性

position定位属性

堆叠顺序

设置透明度:


文本设置

color 设置文本颜色
line-height 设置行高(即行间距)
text-align 设置对齐方式
letter-spacing 设置字符间距
text-decoration 设置文本修饰
white-space 规定如何处理空白:如规定是否换行,一般不换行

字体属性

font-family 设置字体类型 微软雅黑、宋体。。。
font-size 设置字体大小 12px(12像素)、larger、small。。。
font-style 设置字体风格 initial(初始)、italic(斜体字)、normal(默认)、oblique(倾斜)
font-wight 设置字体的粗细 100-900、bold(加粗)、
font 在一个声明中设置所有字体属性 font:italic bold 36px  宋体;(顺序不可变)

背景属性

background 简写属性
background-color 设置元素的背景颜色
background-image 将图像设置为背景
background-repeat 设置背景的平铺方式
background-position 设置背景出现的初始位置

列表属性

list-style 简写属性
list-style-image 将图像设置为列表标志的位置
list-style-position 设置列表中列表项的位置
list-style-type 这是列表项标志的类型

display常用属性

block:将元素显示为块级元素,该元素前后会带有换行符
inline:默认,元素会显示为内联元素,该元素前后没有换行符
none:该元素不会被显示


盒子模型有关的属性

边框属性

border-color 边框颜色
border-width 边框宽度
border-style none:默认值,无边框;solid:实线;dashed:虚线
border-top 上边框 
border-right 右边框 
border-bottom 下边框 
border-left 左边框 
border 简写属性

外边距属性

margin-top 上外边框
margin-right 右外边框
margin-bottom 下外边框
margin-left 左外边框
margin 简写四个边距:默认,上右下左

内边距属性

padding-top 内容与上边距之间的距离
padding-right 内容与右边距之间的距离
padding-bottom 内容与下边距之间的距离
padding-left 内容与左边距之间的距离
padding

四个方向的内边距默认顺序为:上,右,下,左

鼠标属性:

a:link

未单击访问时超链接样式

a:visited

单击访问后超链接样式

a:hover

鼠标悬浮其上的超链接样式

a:active

鼠标单击未释放的超链接样式

设置伪类顺序:a:link->a:visited->a:hover->a:active

浮动属性float:

none 不浮动
right 右浮动
left 左浮动

清除浮动 clear:

主要是用来:扩展盒子高度

left

在左侧不允许浮动元素

right

在右侧不允许浮动元素

both 在左、右两侧不允许浮动元素
none

默认值。允许浮动元素出现在两侧

overflow属性

主要是用来:扩展盒子高度

visible 默认值,内容不会被修剪,呈现在盒子之外
hidden 内容会被修剪,并且其余内容是不可见的
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容

position定位属性

static 默认值,没有定位
relative

相对定位

absolute 绝对定位(r如果有父元素,则以父元素为基准,否则以浏览器窗口为基准),从标准流中脱离,对其他元素的定位不会造成影响。
fixed 固定定位

例如:

div ul li{

            position: relative;
            left:45%;

           top:-350px;(负值为相对原来的位置向上移动)

}

注意:fixed目前还不被一些浏览器支持,实际网页制作中也不常用。

堆叠顺序

z-index属性设置定位元素的堆叠顺序

设置透明度:

opacity:x设定网页元素的透明度

猜你喜欢

转载自blog.csdn.net/weixin_42496678/article/details/81867356