CSS样式表知识总结

CSS样式表知识总结

1.分类

|----内联style=“样式”,属性写道标签里面

<div style="width: 100px;height: 100px;background-color: red;">
</div>

|----内嵌 嵌在页面的<head></head>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
</head>

|----外部 在head标签内引入

<link rel="stylesheet" type="text/css" href="0809.css"/>

|------href引入css文件

2.选择器:样式表用来选区元素的

|----标签:根据标签名选中元素

<head>
p{
    color: red;    /*这个方法叫内嵌*/
}
</head>
<body>
<p>这里是第一行的P标签</p>
</body>

|----class,通过"."根据class名来筛选元素,可以用重复的名字

<head>
.common{ width: 100px; height: 100px; background-color: fuchsia; color: blue; }
</head>
<div class="common"> 这是我的第一个common </div>

|----id,通过"#"根据id名来筛选唯一的元素,不可以用重复名

<head>
   #third{
                   width: 100px;
                   height: 100px;
                    background-color: green; 
            }
</head>
<body>
   <div id="third">
            123
   </div>
<body>

|----复合选择器

|----都好:并列div,span

|----空格:后代#list li

|----大于号:子元素选择器 div>p,div中所有的p元素

 CSS样式

|---大小

|-----width:宽度

|----height:高度

|---背景

|----background-color:背景颜色

|----background-image:背景图片

|----background-repeat:背景平铺方式

|----background-size:背景尺寸

|----background-position:背景位置

|---字体

|----font-family:字体样式

|----font-size:字体大小

|----font-style:italic;italic倾斜

|----font-weight:粗细

|----text-decoration:{

|----underline:下划线

|----overline:上划线

|----line-through:删除线

|----none:去掉线;可以去除<a></a>超链接的下划线

}

|----color:字体颜色

|---对齐方式

|----text-align:水平对齐方式

|----line-height:行高

|----text-indent:缩进 单位像素

 

 

|---line-height 与 vertical-align

|----line-height:主要作为调节文本的垂直对齐方式,通过设置行高的大小

|----vertical-align:主要作为调节行内元素(span/img/input..)的垂直对齐方式  baseline top bottom middle  text-top  text-bottom

 

|---边界边框

|-----外边距margin:

1.上右下左

2.两个属性是代表上下;左右

3.行内元素只能调整margin-left margin-right。调margin-top和margin-bottom是不管用的

|-----内边距padding:

1.上右下左

2.如果加了内边距,该元素会相应的变大

|-----border 1px solid red;  分别代表粗细 线的样式 颜色;

|----显示与隐藏:display:none/block;

|----列表方块<ol></ol> <ul></ul>:

1.list-style:none  将列表前面的序号去掉

2.list-style-image  可以将前面的序号变成图片

|----格式与布局:

|------位置:

1.positio:

a.fixed固定:相对于浏览器的边框进行固定

b.absolute绝对定位:相对于父级元素(浏览器;绝对定位的上级)

c.relative相对定位:相对于自身应该出现的位置

2.top:距离上边的距离

3.right:距离右边的距离

4.left:距离左边的距离

5.bottom:距离下边的距离

|------流:

1.float:

a.left向左流

b.right向右流

2.clear:

a.both清除所有的流

b.left清除左边的流

c.right清除右边的流

3.z-index分层:需要前面使用position之后才有效果,值越大越靠上

 

posted @ 2018-08-09 20:26  井盖同学  阅读(347)  评论(0编辑  收藏  举报