css样式

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
           /* !*字体类型*!
            font-family: Calibri;
            !*字体大小*!
            font-size: 50px;
            !*
                字体风格
                normal   默认
                italic   斜体
            *!
            font-style: italic;
            !*
                字体粗细
                normal   默认
                bold 加粗
                bolder 更粗
                lighter 更细
                数字:100、200、300、400、500、600、700、800、900
            *!
            font-weight: bold;*/
            /*
                font属性
                字体属性的顺序:字体风格→字体粗细→字体大小→字体类型
            */
            font: italic 100 30px Arial;
        }
    </style>
</head>
<body>
<p>标题</p>

</body>
</html>

文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
            /*文本颜色*/
            color: #FAA53B;
            /*
                首行缩进
                em 缩进几个字符
                px 缩进像素
            */
            text-indent: 2em;
            /*
                行高
            */
            line-height: 30px;
        }
        h2{
            /*
                水平对齐方式
                left 左
                right  右
                center 中心
            */
            text-align: center;
        }
    </style>
</head>
<body>
<h2>背影</h2>
<p>
    我与父亲不相见已二年余了,我最不能忘记的是他的背影。那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子,我从北京到徐州,打算跟着父亲奔丧回家。
    到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。父亲说,“事已如此,不必难过,好在天无绝人之路!”
</p>
<p>
    回家变卖典质,父亲还了亏空;又借钱办了丧事。这些日子,家中光景很是惨淡,一半为了丧事,一半为了父亲赋闲。丧事完毕,父亲要到南京谋事,我也要回北京念书,我们便同行。
    到南京时,有朋友约去游逛,勾留了一日;第二日上午便须渡江到浦口,下午上车北去。父亲因为事忙,本已说定不送我,叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房,甚是仔细。
    但他终于不放心,怕茶房不妥帖;颇踌躇了一会。其实我那年已二十岁,北京已来往过两三次,是没有甚么要紧的了。他踌躇了一会,终于决定还是自己送我去。我两三回劝他不必去;他只说,“不要紧,他们去不好!”
</p>



</body>
</html>

超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        a{
            font-size: 30px;
        }
        /*未单击访问时超链接样式*/
        a:link{
            color: #FF0000;
        }
        /*单击访问后超链接样式*/
        a:visited{
            color: #FAA53B;
        }
        /*鼠标悬浮其上的超链接样式*/
        a:hover{
            color: #0D7114;
        }
        /*鼠标单击未释放的超链接样式*/
        a:active{
            color: darkorchid;
        }
    </style>
</head>
<body>
<a href="#">百度</a>

</body>
</html>

列表样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul li {
            /*和默认的一样,小黑点*/
            /*list-style-type: disc;*/
            /*空心小圆点*/
            /*list-style-type: circle;*/
            /*取消前面的远点*/
            /*list-style-type: none;*/
            /*变为数字*/
            list-style-type: decimal;
            /*list-style和list-style-type一样*/

        }
    </style>
</head>
<body>
<ul>
    <li>西游记</li>
    <li>红楼梦</li>
    <li>水浒传</li>
    <li>三国演义</li>
</ul>

</body>
</html>

去除小黑点

li {
	list-style:none;
}

网页背景

  • 背景颜色
    background-color
  • 背景图片
    background-image:url(图片路径);
    -背景重复方式(设置图片)
    background-repeat
    repeat:沿水平和垂直两个方向平铺
    no-repeat:不平铺,即只显示一次
    repeat-x:只沿水平方向平铺
    repeat-y:只沿垂直方向平铺
  • 背景定位
    background-position属性
    Xpos Ypos 单位:px,Xpos表示水平位置,Ypos表示垂直位置
    X% Y% 使用百分比表示背景的位置
    X、Y方向关键词 水平方向的关键词:left、center、right 垂直方向的关键词:top、center、bottombackground属性
    -背景属性
    background属性
    background:#C00 url(…/image/arrow-down.gif) 205px 10px no-repeat;
    顺序:背景颜色 背景图片 背景定位 背景不重复

边框颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*上边框颜色*/
            /*border-top-color: green;*/
            /*右边框颜色*/
            /*border-right-color: blue;*/
            /*下边框颜色*/
            /*border-bottom-color: orange;*/
            /*左边框颜色*/
            /*border-left-color: #9D9D9D;*/
            /*可以设置1/2/3/4颜色*/
            border-color: orange  green;
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

边框粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            border: 10px solid red;
        }
        div{
            /*边框粗细*/
            /*border-width: 5px;*/
            /*上边框粗细*/
           /* border-top-width: 20px;*/
            /*下边框粗细*/
            /*border-bottom-width: 5px;*/
            /*右边框*/
            /*border-right-width: 1px;*/
            /*左边框*/
            /*border-left-width: 2px;*/
            /*细*/
            border-width: thin;
            /*粗*/
            border-width: thick;
            /*中等*/
            border-width: medium;
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

边框样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            border: 10px solid red;
        }
        div{
            /*边框样式*/
            /*无边框*/
            /*border-style: none;*/
            /*隐藏边框*/
            /*border-style: hidden;*/
            /*虚线*/
            border-style: dashed;
            /*点线*/
            border-style: dotted;
            /*实线*/
            border-style: solid;
            /*双线*/
            border-style: double;
            /*
                上下左右
                 border-top-style: ;
                 border-bottom-style: ;
                 border-left-style: ;
                `border-right-style: ;
            */



        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

border简写:边框粗细 边框样式 边框颜色
border:1px solid #3a6587;

外边距

  • margin
    margin-top 上边距
    margin-right 右边距
    margin-bottom 下边距
    margin-left 左边距
    margin:0px auto; 居中对齐

内边距

  • padding
    padding-left 左边距
    padding-right 右边距
    padding-top 上边距
    padding-bottom 下边距
    padding 内边距简写,顺序为上 右 下 左

圆角边框

border-radius: 20px 10px 50px 30px;
顺时针,角度

float 浮动

取值:
left:元素向左浮动;
right:元素向右浮动;
none:默认值,元素不浮动;
inherit:从父元素继承float属性;
设置浮动可以将元素设置相邻
clear可以清除浮动