首页 > 代码库 > html实践——IFE task 02（CSS选择器）

html实践——IFE task 02（CSS选择器）

2024-08-15 02:14:49   223人阅读

====任务描述====

【原链接】http://ife.baidu.com/task/detail?taskId=2

任务目的

  • 针对设计稿样式进行合理的HTML架构，包括以下但不限于：
    • 掌握常用HTML标签的含义、用法
    • 能够基于设计稿来合理规划HTML文档结构
    • 理解语义化，合理地使用HTML标签来构建页面
  • 掌握基本的CSS编码，包括以下但不限于：
    • 了解CSS的定义、概念、发展简史
    • 掌握CSS选择器的含义和用法
    • 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式

任务描述

  • 基于第一个任务“零基础HTML编码”的代码，参考 示例图（点击查看），在步骤一的代码基础上增加CSS样式代码的编写

任务注意事项

  • 只需要完成HTML，CSS代码编写，不需要写JavaScript
  • 示例图仅为参考，不需要完全实现一致，其中的图片、文案均可自行设定
  • 尽可能多地尝试不同的、更多的样式设定来实践各种CSS属性
  • HTML 及 CSS 代码结构清晰、规范

====总结====

一. CSS样式的创建

　　1. 外部样式表

　　　　当样式需要应用于很多页面时，外部样式表将是理想的选择。

　　　　每个页面使用 <link> 标签链接到样式表，具体的css文件加载方式如下：

<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

　　2. 内部样式表

　　　　当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head><style type="text/css">  hr {color: sienna;}  p {margin-left: 20px;}  body {background-image: url("images/back40.gif");}</style></head>

　　3. 内联样式

　　　　直接写在现有的HTML标签中。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

　　　　要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color: sienna; margin-left: 20px">This is a paragraph</p>

当三者同时存在时，运用的优先级遵循“就近原则”，即：内联样式>内部样式表>外部样式表

二. CSS选择器

　　1. 标签选择器

　　　　标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码：

　　　　p{font-size:12px;line-height:1.6em;}

　　2. 类选择器

　　　　类选择器在css样式编码中是最常用到的。语法：

    .类选器名称{css样式代码;}

　　3. ID选择器

　　　　在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：

　　　　(1)为标签设置id="ID名称"，而不是class="类名称"。

　　　　(2)ID选择符的前面是井号（#）号，而不是英文圆点（.）。   

　　　　　　#ID选择器名称{css样式代码;}  

　　4. 子选择器

　　　　还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如：

<ul class="food">    <li>水果        <ul>            <li>香蕉</li>            <li>苹果</li>            <li>梨</li>        </ul>    </li>    <li>蔬菜        <ul>            <li>白菜</li>            <li>油菜</li>            <li>卷心菜</li>        </ul>    </li></ul>子选择器的css代码：.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。

　　5. 后代（包含）选择器

　　　　包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如：

　　　　.first  span{color:red;}

【注意】>作用于元素的第一代后代，空格作用于元素的所有后代。

　　6. 通用选择器

　　　　通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

　　     * {color:red;}

　　7. 伪类选择符

　　　　伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

　　　　a:hover{color:red;}

　　8. 分组选择符

　　　　当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

　　　　h1,span{color:red;}

　

 

html实践——IFE task 02（CSS选择器）


联系
我们