CSS基本用法

CSS基本用法

  • 链接外部样式文件
  • 导入外部样式文件
  • 使用内部样式定义
  • 使用内联样式

CSS基本用法_第1张图片

链接外部样式文件

outer.css

/* 设置整个表格的背景色 */
table {
    background-color: darkgoldenrod;
    width: 400px;
}
/* 设置单元格的背景色,字体等 */
td {
    background-color: aliceblue;
    font-family: "楷体_GB2312";
    font-size: 20pt;
    text-shadow: -8px 8px 2px #568;
}

link_css.html

DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Context-Type" content="text/html; charset=utf8" />
        <title>链接外部CSS样式单title>

        
        <link type="text/css" rel="stylesheet" href="outer.css">
    head>
    <body>
        <h2>通过link链接外部CSS样式单文件h2>
        <table>
            <tr>
                <td>Javatd>
            tr>
            <tr>
                <td>Java EEtd>
            tr>
            <tr>
                <td>Androidtd>
            tr>
        table>

    body>
html>

CSS基本用法_第2张图片

导入外部样式文件

DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Context-Type" content="text/html;"/>
        <title>导入外部样式单title>
        
        <style>
            /* import 导入外部样式单有两种写法 */
            /* @import "outer.css"; */
            @import url("outer.css");
        style>

    head>
    <body>
        <h2>通过link链接外部CSS样式单文件h2>
        <table>
            <tr>
                <td>Javatd>
            tr>
            <tr>
                <td>Java EEtd>
            tr>
            <tr>
                <td>Androidtd>
            tr>
        table>
    body>
html>

CSS基本用法_第3张图片

使用内部样式定义

DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;"/>
    <title>内部样式单title>
    <style type="text/css">
        table {
            background-color: blue;
        }
        td {
            background-color: aqua;
            font-family: "楷体_GB2312";
            font-size: 25px;
            text-shadow: -8px 6px 2px #897;
        }
        .title {
            font-size: 18px;
            color: brown;
            height: 30px;
            width: 200px;
            border-top: 3px solid #458758;
            border-bottom: 3px solid #ff0000;
            border-left: 3px solid #ff00ff;
            border-right: 3px solid #00ff0f;
            text-align: center;
        }
    style>
head>
<body>
    <div class="title">标题样式效果div> <br>
    <table>
        <tr>
            <td>HTML教程td>
            <td>CSS教程td>
            <td>Javascript教程td>
        tr>
        <tr>
            <td>FreeRTOStd>
            <td>uCostd>
            <td>RT-Threadtd>
        tr>
    table>
body>
html>

CSS基本用法_第4张图片

使用内联样式

DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;"/>
        <title>使用内联样式单title>
    head>
    <body>
        <div style="font-size: 18px;
                    color: blue;
                    height: 30px;
                    width: 200px;
                    border-top: 5px solid #98f789;
                    border-bottom: 5px solid #ff0089;
                    border-left: 10px solid #00ff22;
                    border-right: 10px solid #0000ff;">
        内联样式单效果            
        div> <br>
        <table style="background-color: chocolate;">
            <tr>
                <td style="background-color: aqua;
                font-family: '楷体楷体_GB2312';
                font-size: 20px;
                text-shadow: -8px 6px 2px #ff0ff0;">Java EE td>
                <td>HTMLtd>
            tr>
            <tr>
                <td style="background-color: blueviolet;
                font-family: '楷书楷体_GB2312';
                font-size: 20pt;
                text-shadow: -9px 5px 2px #333;">Ajaxtd>
                <td>Javascripttd>
            tr>
        table>
    body>
html>

CSS基本用法_第5张图片

你可能感兴趣的:(CSS,HTML5,css,css3,html)