前端之css的基本使用(一),行内、内部、外部样式,语法格式、注释、选择符、属性等

时间:2024-01-26 07:47:09

一、行内、内部、外部样式

1、行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background-color: orange;color: red;">
    <h1 style="border: 1px solid #ccc;">网页的内容</h1>
</body>
</html>

2、内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    body {
        background-color: orange;
    }
    h1{
        background-color: blue;
        color: white;
    }
    </style>
</head>
<body>
    <h1>网页的内容</h1>
</body>
</html>

3、外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css"> 
</head>
<body>
    <h1>网页的内容</h1>
</body>
</html>

导入的.css文件

body{
    background-color: orange;
}
h1{
    color: red;
}

二、语法格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    body{ background-color: blue; color: white;}
    </style>
</head>
<body>
    <h1>网页的内容</h1>
</body>
</html>

三、注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*
       多行注释, 这里的内容就不会被显示或者不会被浏览器执行.
     */
    body{
        background-color: #7cffa7; /* 背景-颜色: 蓝色; */
        color: white;  /* 字体颜色: 白色; */
        font-size: 100px; /* 字体-大小: 100像素; */
    }
    h1{
        background-color: white;
        border-radius: 32px;
    }
    </style>
</head>
<body>
    <h1>网页的内容</h1>
</body>
</html>

四、选择符

1、万能选择符

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        background-color: #cccccc;
    }
    * { /* 代表网页中的所有元素 */
        color: blue;
    }
    li{
        background-color: wheat;
    }
    </style>
</head>
<body>
<h1>静夜诗</h1>
<p>
    床前明月光,<br>
    疑是地上霜.<br>
    ....
</p>
<ul>
    <li>第1个li选项</li>
    <li>第2个li选项</li>
</ul>
</body>
</html>

2、标签选择符

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        background-color: #cccccc;
    }
    p { /* 通过标签名来控制指定哪些标签的外观效果,这就是标签选择符 */
        font-size: 26px;
    }
    </style>
</head>
<body>
<h1>静夜诗</h1>
<p>
    床前明月光,<br>
    疑是地上霜.<br>
    ....
</p>
<p>
    另一个段落
</p>
</body>
</html>

3、id选择符

!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #p1{ /* 告诉浏览器找到id值为p1的标签,给它加上外观样式 */
        color: orange; /* 颜色: 橙色 */
        font-size: 32px; /* 字体-大小: 32像素; */
    }
    #h2{
        color: blue;
    }
    </style>
</head>
<body>
<h1>静夜诗</h1>
<p>
    床前明月光,<br>
    疑是地上霜.<br>
    ....
</p>
<p id="p1">
    另一个段落
</p>

<h2 id="h2">h2标题</h2>
</body>
</html>

 4、class选择符

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .c1{ /* 指定具有class属性值为c1的所有的标签的样式 */
        color: blue;
    }
    .p1{
        font-size: 32px;
    }
    .p2{
        background-color: orange;
    }
    </style>
</head>
<body>
    <ul>
        <li></li>
    </ul>
    <h1>静夜诗</h1>
    <p class="p2">
        床前明月光,<br>
        疑是地上霜.<br>
        ....
    </p>

    <p class="c1 p1 p2" id="c1">另一个段落</p>
    <h2 class="c1">h2标题</h2>
    <p class="c1 p1">还有一个段落</p>
</body>
</html>

 5、包含选择符

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box p{ /* div元素包含的所有的p元素 */
        background-color: blue;
        color: #fff;
    }
    </style>
</head>
<body>
    <p>这是一个网页</p>
    <div class="box">
        <p>这里也有一个段落</p>
        <p>详情请点击<a href="">了解更多</a></p>
    </div>
</body>
</html>

6、父子选择符

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .header p{ /* class=headers的元素里面所有的子标签p或者孙子标签p... */
        background-color: #ccc;
        color: blue;
    }
    .header>p{ /* class=header的元素的子标签p */
        color: red;
    }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-left">
            <p>页面的左边</p>
        </div>
        <p>中间的一段文本</p>
        <div class="header-right">
            <p>页面的右边</p>
        </div>
    </div>
</body>
</html>

 7、兄弟选择符

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #three+li{ /* id=three的下一个标签叫li的,如果下一个标签不叫li或者不是指定的选择符,则样式的修改无效 */
        color: red;
    }
    #three~.a1{/* id=three的后面所有class=a1的兄弟元素 */
        background-color: orange;
    }
    </style>
</head>
<body>
    <ul>
        <li>第1个li元素</li>
        <li>第2个li元素</li>
        <li id="three">第3个li元素</li>
        <li>第4个li元素</li>
        <li class="a1">第5个li元素</li>
        <li>第6个li元素</li>
        <li class="a1">第7个li元素</li>
    </ul>
</body>
</html>

8、属性选择符

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    input[type]{ /* 控制所有具有type属性的input元素 */
        outline: none;/* 去除外边线 */
    }
    input[type=text]{ /* 控制所有type="text"的input元素 */
        color: red;
    }
    </style>
</head>
<body>
    用户名: <input type="text" name="" /><br>
    昵称: <input type="text" /><br>
    密码: <input type="password" /><br>
    性别: <input type="radio" name=""></body>
</html>

9、伪类选择符

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    a{
        color: blue;
    }
    a:hover{ /* 当标签处于被鼠标悬浮的时候 */
        color: #7cffa7;
    }
    a:nth-child(1){/* 处于第一个位置的子元素 */
        color: red;
    }
    a:last-child{
        color: red;
    }
    .list1 li:nth-child(odd){ /* odd排名在奇数位置的li标签 */
        background-color: red;
    }
    .list1 li:nth-child(even){
        background-color: blue;
    }
    .last2 li:nth-child(3n-2){
        background-color: red;
    }
    .last2 li:nth-child(3n-1){
        background-color: green;
    }
    .last2 li:nth-child(3n){
        background-color: blue;
    }
    </style>
</head>
<body>
    <a href="http://www.baidu.com/">老男孩</a><br>
    <a href="http://www.baidu.com/">老男孩</a><br>
    <a href="http://www.baidu.com/">老男孩</a><br>
    <a href="http://www.baidu.cn/">老男孩</a>
    <ul class="list1">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <ul class="last2">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</body>
</html>

10、伪对象选择符

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .price{
        color: red;
    }
    .price::before{
        content: "<<";
        color: blue;
    }
    .price::after{
        content: ">>";
        color: blue;
    }
    .price::selection{
        background-color: red;
        color: orange;
    }
    </style>
</head>
<body>
    <span class="price">价格</span>
</body>
</html>

五、基本属性

1、文本属性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .center{
        text-align: center;
    }
    .left{
        background-color: red;
        text-align: left;
        text-indent: 10px;
    }
    .right{
        background-color: red;
        text-align: right;
    }
    .p1{
        letter-spacing: 3px; /* 文本中字符之间的距离 */
    }
    .p2{
        text-decoration: line-through;  /* 下划线 */
    }
    .p2 img{
        vertical-align: middle;  /* 在图片和文本进行组合排版的时候,用于指定图片在垂直方向的对齐方式 */
    }
    a{
        text-decoration: none; /* 去掉a标签默认的下划线 */
    }
    .p3{
        line-height: 32px; /* 文本的行高 */
    }
    </style>
</head>
<body>
    <p class="left">这是一段很长的的很长的告白!!!!</p>
    <p class="center">这是一段很长的的很长的告白!!!!</p>
    <p class="right">这是一段很长的的很长的告白!!!!</p>
    <p class="p1">这是一段很长的的很长的告白</p>
    <p class="p2">百度 <img src="./image/icon.png" alt=""><a href="">百度</a></p>
    <p class="p3">
        一段文本 <br>
        一段文本 <br>
        一段文本 <br>
        一段文本 <br>
    </p>
</body>
</html>

2、字体属性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    p{
        font-size: 32px;
        color: red;
        font-weight: bold; /* 字体加粗 */
    }
    .p1{
        font-family: "微软雅黑";
    }
    .p2{
        font-family: "宋体";
        font-style: italic; /* 字体倾斜, normal表示正常,不倾斜 */
    }
    .p3{
        font: italic bold 32px "宋体"; /* 简写: 加粗 字体大小 字体族 */
    }
    </style>
</head>
<body>
    <p class="p1">这是一段很长的的很长的告白!!!!</p>
    <p class="p2">这是一段很长的的很长的告白!!!!</p>
    <p class="p3">这是一段很长的的很长的告白!!!!</p>
</body>
</html>

3、边框属性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .p1{
        /*border-left-color: red;   !* 左边边框颜色: 红色; *!*/
        /*border-left-width: 2px;   !*左边边框宽度: 2像素; *!*/
        /*border-left-style: solid; !* 左边边框样式: 实线  *!*/

        /*border-color: blue red;   !* 上下边框颜色: 蓝色 左右边框: 红色; *!*/
        /*border-width: 2px 4px;   !*上下边框宽度: 2像素; 左右边框: 4像素 *!*/
        /*border-style: solid dashed; !* 边框样式: 上下实线 左右虚线;  *!*/

        /*border-color: red blue black;   !* 边框颜色: 上红色 左右蓝色 下黑色 ; *!*/
        /*border-width: 2px 4px 10px;         !*边框宽度:  上2px 左右4px 下10px*!*/
        /*border-style: solid dashed dashed; !* 边框样式: 上实线 左右下都是虚线; *!*/

        /*border-color: red blue black orange;   !* 边框颜色: 上红色 右蓝色 下黑色 左橙色; *!*/
        /*border-width: 2px 4px 10px 5px;         !*边框宽度:  上2px 右4px 下10px 左5px*!*/
        /*border-style: solid dashed dashed solid; !* 边框样式: 上实线 右下都是虚线 左实线; *!*/

        border: 1px solid black; /* 四条边框统一1px 实线 黑色 */
    }
    </style>
</head>
<body>
    <p class="p1">这是一段很长的的很长的告白!!!!</p>
</body>
</html>

4、背景属性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .p1{
        background-color: orange;
        border-radius: 13px; /* 边框圆角 */
    }
    img{
        background: #000;
        border-radius: 12px;
    }
    body{
        /*background-image: url("./image/timg.jpg"); !* 背景图片,必须使用url进行指定,而且只能是相对于当前url所在的文件 *!*/
        /*background-size: 500px 600px; !*背景大小 宽度500px 高度600px*!*/
        /*background-repeat: no-repeat;!* 不平铺 *!*/
        /*!*background-repeat: repeat-x;!* x轴平铺 *!*!*/
        /*!*background-repeat: repeat-y;!* y轴平铺 *!*!*/
        /*!*background-repeat: repeat;!* 默认 平铺 *!*!*/
        /*!* 在背景如果不平铺的情况,可以选择让背景位置移动 *!*/
        /*background-position: 100px -300px; !* 背景定位: 距离左边的位置100px 距离顶部的位置-300px *!*/
        /*background-color: #bbbbbb; !* 背景颜色 *!*/
        /* 缩写 */
        /*background: 背景颜色 背景图片 背景位置/背景大小 背景平铺方式;*/
        background: url("./image/timg.jpg") #bbbbbb 100px 300px/100px 200px no-repeat;
    }
    </style>
</head>
<body>
    <p class="p1">这是一段很长的的很长的告白!!!!</p>
    <img src="./image/icon.png" alt="">
</body>
</html>

5、边距属性(一)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box1{
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-bottom: 20px; /* 距离下方元素的边距: 20px; */
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 20px; /* 距离顶部元素的边距: 20px; */
    }
    .img1{
        background-color: orange;
    }
    .img2{
        background-color: red;
    }
    .img1{
        margin-right: 10px; /* 距离右边元素的边距: 10px; */
    }
    .img2{
        margin-left: 10px; /* 距离左边元素的边距: 10px */
    }
    </style>
</head>
<body>
    <div class="box1">
        <div class="son"></div>
    </div>
    <div class="box2"></div>

    <img class="img1" src="./image/icon.png" alt=""><img class="img2" src="./image/icon.png" alt="">
</body>
</html>

6、边距属性(二)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box1{
        width: 300px; /* 元素宽度 */
        height: 300px; /* 元素高度 */
        background-color: orange;
        padding-top: 10px;/* 设置内部元素距离当前元素的顶部之间的空白高度 */
        padding-left: 20px; /* 设置内部元素距离当前元素的左边之间的空白高度 */
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    </style>
</head>
<body>
    <div class="box1">
        <div class="son"></div>
    </div>
</body>
</html>