css基础样式

css基础样式


常见的一些样式
1.color:red; 字体颜色
2.font-family:Microsoft YaHei;字体样式
3.text-align:center; 文字内容居中显示，它有其他可选值 left right；针对元素内容或行内元素
4.background-color:red 背景色
5.border:1px solid green; 为元素添加边框，（宽度为1，实线 ，边框颜色绿色）


6.设置字间距
p{letter-spacing:8px;}
<p>我想改变此段落的字间距</p>


7.多出后隐藏
p{height:20px;width:100px;background:red;overflow:hidden;}
<p>隐藏多余的部分隐藏多余的部分隐藏多余的部分隐藏多余的部分隐藏多余的部分</p>


8.表格边框变为单线
 table{border-collapse: collapse;}
 td{border: 1px solid red;}
<table>
    <tr>
        <td>fada</td>
        <td>fada</td>
    </tr>
    <tr>
        <td>fagsfgsda</td>
        <td>fagsfgsda</td>
    </tr>
</table>


9.文字首行缩进 text-indent
10.尺寸 width height
11.文字溢出用省略号显示
p{text-overflow: ellipsis;white-space: nowrap;overflow:hidden;}
12.指定文字有无装饰 text-decoration （underline下划线  overline上划线 line-through贯穿线类似删除线）


背景相关
background-color 背景颜色
background-image 背景图片（background-image:url("img/i1.jpg");width:100px;height:100px;background-size:100px;)需要指定宽高
background-repeat 背景图片是否重复  repeat-x 图片横向平铺, repeat-y ,no-repeat不重复
background-size 背景图片大小
background-attachment 背景图片是否随内容滚动 fixed相对于窗体固定，滚动条滚动图片不动，但它的容器会消失
background-position 背景图片位置（相对于外层容器）
background 复合属性  （background:url("img/i2.jpg"）red no-repeat left top;


颜色相关 （color； opacity透明度，继承，如果只想让背景透明，可用background:rgba();）
指定颜色的几种方式：
颜色名称{color:green;} 
 RGB{color:rgb(0,0,0);} 
RGBA{color:rgba(0,0,0,.5);}最后一位代表了透明度（0到1）
十六进制{color:#ffffff;}


字体相关
font-style 字体样式 normal正常  italic斜体字
font-weight 文字粗细 normal正常 lighter细体（效果和正常一样） bold粗体（相当于number为700） bolder粗体  数字表示（100~900,600以上为粗体）
font-size 字体大小
font-family 字体 SimSun  、SimHei、Microsoft YaHei


列表相关
设置列表项标记的图像 list-style-image  如：  ul{list-style-image: url("img/search.png");}
去掉列表项目符号 list-style:none;