HTML+CSS基础知识（2）-CSDN博客

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>This is title</title>
    </head>
    <body>
        <p style="font-size: 16px; color: red;">热疯啦！</p>
    </body>
</html>

结果示例：

（二）、内部样式表

内部样式需要写到 <style> 标签中。

代码示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
    <style>
        p{ color: skyblue;}
    </style>
    </head>
    <body>
        <p>我要回宿舍</p>
    </body>
</html>

结果示例：

（三）、外部样式表

链接式：将样式写到单独的文件中，文件的扩展名为 .css 。例如， index.css 文件中有如下代码：

p{
    color: green;
}

然后通过 <link> 元素将 index.css 文件引入到html页面中，代码示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
        <link rel="stylesheet" href="/*所创建的CSS文件名*/">
    </head>
    <body>
        <p>我要回宿舍吹空调</p>
    </body>
</html>

结果示例：

三、CSS选择器

（一）、标签选择器

选择页面中所有的 <p> 元素，给它们设置字体大小和颜色。

p {
    font-size: 16px;
    color: red;
}

（二）、class选择器

选择页面中 class 属性值中包含 box 类名的所有元素，给它们设置字体大小和颜色。

代码示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
    .s1 {
        font-size: 20px;
        color: green;
        }
        </style>
    </head>
    <body>
        <div class="s1">今天星期五了，好开心!</div>
    </body>
</html>

结果示例：

（三）、ID选择器

选择页面中 id 属性值是 nav 的元素，给它设置字体大小和颜色。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 给id为red的，定义CSS样式 */
        #red {
            color: blue;
        }
        #green {
            color: blue;
        }
    </style>
</head>     
<body>    
    <p id="red">杰克逊</p>
    <h1 id="green">加比勒海盗</h1>
</body>
</html>

结果示例：

1.所有标签都有id值。

2.id属性值类似于身份证号码，在一个页面中是唯一的值，不可重复。

3.一个标签上只能有一个id属性值。

4.一个id属性值，只能选择一个标签。

（四）、伪类选择器

:hover /* 鼠标悬停 */ 鼠标移动到链接上会变色。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
            text-decoration: none;
        }
        .p1:hover{
            color: red;
            text-decoration: underline;
        }
    </style>
</head>     
<body>
    <a href="aa" class="p1">加比勒海盗和杰克逊</a>
</body>
</html>

结果示例：

四、CSS外观样式

（一）、设置行间距 line-height：

行间距即是文本垂直方向的距离，会让文本在当前行的最中间。而若想让文本垂直居中在一个盒子中间，行高设置为盒子高度。

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .s1{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /* 为了使更明显的展示此处设置了一个盒子边框 */
            line-height: 200px;
            /* 垂直方向设置行高，会让文本在当前行的最中间 */
            /* 若想让文本垂直居中在一个盒子中间，行高设置为盒子高度 */
        }
    </style>
</head>
<body>
    <div class="s1">今天星期五了，好开心</div>
</body>
</html>

结果示例：

（二）、水平对齐 text-align：

内容在水平方向对齐方式有三种：left（左）、center（中间）、right（右）；对齐方式，任何元素都可以设置。

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .s1{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /* 为了使更明显的展示此处设置了一个盒子边框 */
            line-height: 200px;
            /* 垂直方向设置行高，会让文本在当前行的最中间 */
            /* 若想让文本垂直居中在一个盒子中间，行高设置为盒子高度 */
            text-align: center;
            /* 内容在水平方向对齐方式有三种：left（左）、center（中间）、right（右） */
        }
    </style>
</head>
<body>
    <div class="s1">今天星期五了，好开心</div>
    <div class="s1"> <input type="text"></div>
</body>
</html>

结果示例：

（三）、对文本进行缩进 text-indent:

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .s3{
            text-indent: 2em;
            /* 让文本缩进 */
        }
    </style>
</head>
<body>
    <div>第一项。。。。</div>
    <div class="s3">第二项。。。。</div>
    <div class="s3">第三项。。。。</div>
</body>
</html>

结果示例：

（四）、大小写转换 text-decoration:

（五）、设置字符间距 letter-spacing:

（六）、设置单词间距 word-spacing:

注意这种样式是通过空格来识别每个词，所以不仅仅是代表的英语单词，也就是增加或减少空格的大小，可以为负值。

（七）、文字阴影 text-shadow:

值 h-shadow（水平） v-shadow（垂直） blur（模糊程度） color（颜色）。

前两项必写，后两项选写，可用逗号隔开设置多重阴影。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .od{font-size: 50px;
            text-shadow: 1px 1px 1px rgb(255, 0, 4),-1px -1px 1px skyblue;
            /* 值 h-shadow v-shadow blur color 前两项必写，后两项选写*/
            /* 可用逗号隔开设置多重阴影*/
        }
    </style>
</head>
<body>
    <div class="od">今天周五</div>
</body>
</html>

结果示例：