Document

css样式

2023-07-02
dfer
429
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可以清除浮动

上一篇： php宝塔搭建新版手

下一篇： [前端基础]HTML