0

我正在尝试学习 CSS，到目前为止，将 HTML 更改为 CSS 似乎更多地只是将字体、颜色、文本大小、表格和背景更改为一些 CSS 语句。

我的问题是我不确定我还需要什么 HTML 以及要删除什么。我在哪里放 CSS 的东西？尝试通过这个简单的 HTML 来学习基本的 HTML：

<html>
<head>
<title>CSS practice</title>
</head>

<body style="background-color:white;">

<table border="1" width="990" bgcolor="#99CCFF">
  <tr>
    <td width="990"><p align="center"><font face="Arial Black" size="6" color="#680000">DDDD</font></td>
</tr>
</table>
<table border="0" width=990 bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="990"><font color="#FFFFFF" face="Arial" size="2"><b> Personal Portfolio</b>    </font></td>
</tr>
</table>
<table border="0" width=990 cellspacing="0" cellpadding="0">
<tr>
<td width="18%" bgcolor="#99CCFF" valign="top">&nbsp;
  <p style="margin-left: 20"><b><font face="Arial" size="2" color="#000000">
  <a href="index.html"> Home </a><br><br>
  <a href="about.html"> About Me </a><br><br>
  <a href="outreach.html"> Outreach </a><br><br>
  <a href="contact.html"> Contact Me </a><br><br>
  <a href="experience.html"> Experience </a><br><br>
  <a href="education.html"> Education </a><br><br> 
  <a href="skills.html"> Skills </a><br><br>

<td width="61%" valign="top">
  <blockquote>
    <p><br>
    <font face="Arial" size="5">Welcome</font></p>
    <p><font size="2" face="Arial"> Aspiring CSS programmer </font></p>
    <img src="me.jpg" alt="US"/>
  </blockquote><br><br>
  <p align="center"><font face="Arial" size="1">© COPYRIGHT 2012 ALL RIGHTS
  RESERVED </font></td>

<table border="0" width="990" bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><font size="1">&nbsp;</font></td>
</tr>
</table>

</body>

</html>
4

6 回答 6

4

白手起家。构建语义 HTML只关注内容，您会发现它比制作 ol'table HTML 要容易得多。

无表的语义 HTML

您的新 HTML 应如下所示：

<html>
  <head>
    <title>CSS practice</title>
    <link rel="stylesheet" href="css-file.css" type="text/css">
  </head>

  <body>
    <span>DDDD</span>
    <h1>Personal Portfolio</h1>
    <nav>
      <a href="index.html"> Home </a>
      <a href="about.html"> About Me </a>
      <a href="outreach.html"> Outreach </a>
      <a href="contact.html"> Contact Me </a>
      <a href="experience.html"> Experience </a>
      <a href="education.html"> Education </a>
      <a href="skills.html"> Skills </a>
    </nav>
    <p>Welcome <span>Aspiring CSS programmer</span></p>
    <img src="me.jpg" alt="US"/>
    <span>© COPYRIGHT 2012 ALL RIGHTS RESERVED</span>
  </body>
</html>

看？只是内容，与样式无关。简单多了！

因此，在那之后，您可以开始使用新分隔的 CSS（查看 标签css-file.css 内的 css 声明head） 。

CSS 样式

CSS 就是找到 HTML 元素的路径，然后对其进行样式设置。这真的很容易。

例如，您可以像这样发现和设置标题的样式：

h1 {
  font-family: "Verdana";
  font-weight: bold;
}

...您的菜单按钮，例如：

nav a {
  color: blue;
  text-style: italic;
}

nav a意味着您要为a标签内的每个标签设置样式nav，而将未设置样式的标签留在标签a外nav。

嗯……这是一条路！自由构建路径，只要它们满足各自的目标（HTML 元素）。

类和 ID

HTML 中的每个标签都可以同时具有 aclass和id属性。将它们自由地应用到您的 HTML 标签中，以帮助您发现您的元素。像这样使用它们：

<span class="class_name" id="id_name">content</span>

在您的 CSS 中，您可以通过在名称前加一个点来引用一个类，例如：

nav a.class_name {
  color: blue;
  text-style: italic;
}

因此，样式将应用于每个a具有class-name类的标签，位于nav标签内。

Id's 的工作方式相同，但在 CSS 中，您通过放置一个哈希 ( #) 而不是我们用于 class 的点来引用它们。

就是这样，你已经开始了。:)

我个人建议您从这里开始：如何制作网站。请记住...使用大量的Google。你很快就会到。

于 2013-01-11T23:21:31.517 回答
2

css 应该处理大小/位置/颜色/字体——简而言之，任何不是结构的东西。 w3schools是一个很好的资源。

使用jsfiddle来尝试测试实现。

这是一个粗略的剪辑，我用我的小提琴演奏了几分钟

html:

<html>

  <head>
    <title>CSS practice</title>
  </head>

  <body>
    <div class='header'>DDDD</div>
    <div class='subHeader'>Personal Portfolio</div>
    <div class='links'>
      <ul>
        <li><a href="index.html"> Home </a></li>
        <li><a href="about.html"> About Me </a></li>
        <li><a href="outreach.html"> Outreach </a></li>
        <li><a href="contact.html"> Contact Me </a></li>
        <li><a href="experience.html"> Experience </a></li>
        <li><a href="education.html"> Education </a</li>
        <li><a href="skills.html"> Skills </a></li>
      </ul>
    </div>
    <p class='welcome'>Welcome</p>
    <p class='welcome2'>Aspiring CSS programmer</p>
    <img src="me.jpg" alt="US" />
    <div class='copyright'>© COPYRIGHT 2012 ALL RIGHTS RESERVED</div>
  </body>
</html>

CSS：

:root{
    background-color:white;
    font-family: Arial;
  }
  .header {
    border: 1px;
    width: 990px;
    background-color: #99CCFF;
    text-align: center;
    font-size: 16pt;
    color: #680000;
  }
  .subHeader {
    background-color: black;
    color: white;
    font-weight: bold;
  }
  .links {
    width: 200px;
    background-color: #99CCFF;
    font-size: 12pt;
    padding-left: 20px;
    float:  left;
  }
  .welcome {
    font-size: 15pt;
  }
  .welcome2 {
    font-size:12pt;
  }
  .copyright {
    float: left;
    width: 990px;
    text-align: center;
  }
于 2013-01-11T23:05:49.150 回答
1

一般概念是 CSS 替换了 HTML 中的所有样式信息，因此 HTML 应该只作为一种“标记”语言存在，它只为您的内容提供数据结构。

所有涉及颜色/大小/位置等的属性都应重新制作为 CSS 语句，并将一个类添加到这些 HTML 元素中。

例如，表格标签将更改为<table class="mytable">.

于 2013-01-11T23:09:17.583 回答
0

如果我正确理解您的问题，您正试图用 CSS 替换 HTML 中的样式。

这是您添加 css 的地方（请注意，我正在给出示例，它们可能在语法上也不正确）

<head>
<title>CSS practice</title>
<style>
//Your CSS styles - e.g.:
.body {
attribute1: value1,
attribute2: value2
}

</style>
</head>

并且，删除 HTML 标记中的所有style, border,width等属性 - 基本上任何添加任何样式的东西，如高度、颜色、字体、宽度、边框等，都将被移到 CSS 代码中。

于 2013-01-11T23:08:50.737 回答
0

基本上，您几乎不再需要 HTML 标记上的任何属性，除了 id 和 class，有时还需要内联样式的样式（这不好，但如果您遇到麻烦并且没有时间，可以很方便）。

然后边框、宽度、背景颜色、字体大小和颜色等……都是通过 CSS 管理的，还有数百种其他东西。

对于唯一元素的基本内容，您可以使用 ID 属性，对于页面中重复的元素，使用类。

在 CSS 中，使用 ID 引用

#myID { 颜色：红色；}

, 上课

.myClass { 颜色：红色；}

以及具有元素名称的元素，例如

div {颜色：红色；}

祝你好运，玩得开心:)

于 2013-01-11T23:11:04.650 回答
0

上面提到的 w3schools 是一个非常好的资源。尝试将您的 css 代码放在单独的“css”文件中。此外，如果您只是想看看事物是如何交互的，浏览器上的开发人员工具非常方便，如果您在 windows/linux 上使用 firefox 或 chrome，您可以尝试 Ctrl+F12。希望这可以帮助。

于 2013-01-11T23:15:45.730 回答