css常用样式属性

144 阅读3分钟

一、背景属性。

1.背景颜色

直接定义  对应的颜色英文单词

16进制定义  #xxxxxx   0-f

三原色定义法  rgb(x,x,x) 0-255

width:100px; //容器宽度
height:100px; //容器高度
background-color:red;//背景颜色

2.背景图片

如果背景图的大小不足以覆盖整个元素,那么背景图会自动重复,以至于铺满整个元素。

背景图的重复方式 : background-repeat:no-repeat;不重复   

背景图位置:  水平位置 left、center、right   垂直位置 top 、center、bottom    还可以写对应像素值。                 

background-image:url(images/bg.jpg)
background-repeat:no-repeat;//不重复
background-position:center center;/30px  50px;

二、文本属性

color:red; //颜色
font-size:32px; //字号
font-family:"黑体"; //字体(百度web安全字体)
font-weight:800/bolod; //加粗
font-style:italic; //倾斜
text-align:center; //对齐方式 水平对齐方式:left center right   两端对齐方式:justify
text-indent:30px; //首行缩进
text-transform:uppercase; //文本转化 uppercase大写,lowercase小写,capitalize首字母大写
text-decoration:underline; //文本修饰线 underline下划线,overline上划线,line-through删除线,none取消装饰线
line-height:50px; //行高
letter-spacing10px; //字母之间间距(中文)
Word-spacing:30px; //单词之间的间距

三、表格属性

border="1" //边框
border-collapse:collapse; //边框重合
caption-sidebottom; //标题在表格下面
vertical-align:bottom; //用在td中,bottom middle top 文字位置

四、列表属性

list-style-type:square; //列表符号类型 square circle none
list-style-image:url(images/1.jpg) //将列表符号改成图片
list-style-position:inside; //列表符号的位置

五、边框属性

三要素:1.宽度  2.线型 solid实线  dashed虚线  dotted点划线  3.颜色

border:1px solid red;

六、盒模型

一个元素(标签)实际在网页中所占位置的大小。

宽=width+左右border

高=height+上下border

七、外边距和内填充

margin//外边距
padding//内填充

八、浮动

使块元素并排显示,谁想并排谁加浮动  浮动的元素不占位置

float:left;
clear:both; //清除浮动影响

九、元素转化

display:block; //转化为块元素,可设置宽高
display:inline; //转化为行元素
display:inline-block; //转化为行级块元素,可设置宽高,不独立成行
display:none; //隐藏元素

十、高级选择器

1.* 通配符选择器 对整个网页生效 主要作用于样式重置

2.选择器,选择器  分组选择器,可以同时选中多个标签,统一添加同一样式

3.后代选择器  先找到父级容器 空格隔开 再找后代

4.子选择器 找到父级选择器>子选择器

5.相邻兄弟选择器  下方第一个元素

6.普通兄弟选择器  下方所有元素

*{
    padding:0;
    margin:0;
}  //样式重置
h1,h4{
    color:red;
}
.box p{
    color:red;
}
.box>p{
    color:green;
}
.box+p{
    color:blue;
}
.box~p{
    color:pink;
}

*十一、定位属性

1.相对定位 relative  占的是初始位置

2.绝对定位 absolute  不占位置 采用绝对定位的元素,会先向上查找其父级是否采用了相对定位,如果采用了就以父级的左上角为坐标原点。如果没采用,接着向上找,直到找到body。

3.固定定位 fixed 不占位置,默认坐标为body。

position:relative;
left:20px; //距离左侧移动多少
top:10px; //距离左上角向下移动多少
position:absolute;
left0top0position:fixed;
left:0;
top:0;