CSS样式基础

常见名词
响应式网站：是一种网页布局能够兼容多个终端的网站
Px：绝对尺寸，也就是css中定义的像素，利用px设置字体大小及元素宽高等比较稳定和精确。但缺点是不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。

	<ol>    <!--ordered list 有序列表-->
        <li>java基础</li>
        <li>Web前端</li>
	</ol>
	
	<ul>    <!--unordered 无序列表-->
        <li>吕布</li>
        <li>貂蝉</li>
	</ul>

<img src="aa.jpg" alt="当不能显示图片时显示此文本">
<img src="../b.jpg" width="889" alt="" title="悬停时显示次标题">
<img src="abc/c.jpg" width=50% alt="">	<!--固定50%不会随着页面变大而改变-->

<a href="#top">回到顶部</a>		 <!--跳转到id为top的标签位置-->

table row 表格的行
table data 表格数据, 表示列
table head表头

<table border="1">
    <tr><!--table row 表格的行-->
        <!--colspan跨列  跨2列-->
        <td colspan="2" align="center">1-1</td>
        <td>1-3</td>
        <td rowspan="2">1-4</td>	<!--rowspan跨行-->
    </tr>
    
</table>

<table border="1">
    <caption>购物车</caption>
    <tr>
        <th>序号</th><th>商品名称</th><th>商品价格</th>
    </tr>
    <tr>
        <td>1</td><td>华为meta40手机</td><td>5000</td>
    </tr>
</table>

背景和颜色

    <style>
        /*颜色赋值五种方式:*/
        h1{color: red}
        h2{color: #00ff00}  				 /*16进制赋值*/
        h3{color: #0f0}    					 /*3位16进制,h2每两位重复可以简写成h3样式*/
        h4{color: rgb(255,0,255)}
        h5{color: rgba(255,0,255,50)}        /*第四位为透明度百分比*/

        #d2{
            background-color: #ff7f5d;       /*背景颜色*/
            width: 200px; height: 200px;      /*背景大小 宽,高*/

            background-image: url("../b.jpg");
            background-size: 220px 50px;   	  /*图片尺寸,缩小后自动平铺*/
            background-repeat: no-repeat;   	/*禁止重复*/
/*            background-position: 50px 20px;   背景图片偏移像素:横向 纵向*/
            background-position: 80% 20%; 	   /*百分比偏移*/
        }
        span {
	        border: 1px solid blue;
	        width: 100px;
	        height: 100px;
	        /*行内元素不能修改宽高,如需修改要display为块级或行内块*/
	        display: inline-block;
	    }
	</style>

文本和字体相关样式

 <style>
        div{
            width: 200px; height: 50px;
            border: 1px solid red;
            text-align: center; /*水平对齐方式*/
            /*
                文本修饰线条:
                overline:上线
                underline:下线
                line-through:删除线
                none:去掉已有线条
            */
            text-decoration: underline;	  /*下划线*/
            
            line-height: 50px;	 /*通过行高控制文本居中*/
            font-size: 20px;    /*字体大小*/
            font-weight: bold;  /*加粗*/
            font-style: italic;  /*斜体*/
            letter-spacing:40px;  /*字间距*/
            word-spacing:40px;	  /*单词间距*/
        }
        h1{
            font-weight: normal;    /*去掉加粗效果*/

 /*         font-family: cursive，Onyx;   !*设置某字体，可以有多个备选，都没有会使用默认*!
*/
            font: 50px cursive;     /*直接设置字体和字体大小*/

        }
    </style>

外边距

 <style>
        #d1{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*margin-left: 50px;     左边距*/
            /*margin-right: 50px;    右边距*/
            /*margin-top: 50px;      上边距*/
            /*margin-bottom: 50px;   下边距*/
            
            /*margin: 50px;           四边距*/
            /*margin: 50px 100px;     上下和两边*/
            /*margin: 0 auto;         元素居中*/
            /*margin: 0;             去掉自带外边距*/
            margin: 10px 20px 50px 30px;       /*上右下左*/
        }
        .span1{
            border: 1px solid blue;
            margin-right: 50px;
            margin-top: 50px;   /*行内元素上下外边距无效*/
            /*display: inline-block;*/
        }
        #span2{
            margin-left: 30px;  /*行内左右相邻距离相加*/
        }
        #big{
            width: 200px;
            height: 200px;
            background-color: red;
            overflow: hidden;   /*解决粘连问题*/
        }
        #big>div{
            width: 50px;
            height: 50px;
            background-color: green;
                margin-left: 50px;
                margin-top: 50px;   /*当和上级元素的上边缘粘连时,需要在上级解决此问题*/
        }

    </style>

边框和外边距

    <style>
        #d1{
            width: 100px;
            height: 100px;
            border: 5px groove red;
/*            border-left: 2px solid blue;    可单独设置上下左右框线,有时也做分隔线使用*/
            border-radius: 60px;    /*圆角:超过宽高+四边的框一半就是个正圆*/
        }
        #d2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            padding-left: 50px;  /*内边距会影响外边框的长度,可以对应缩小外边框*/
        }

    </style>