Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一

简介: Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一

HTML5新增标签

<body>
    <!-- 旧标签的实现方式-->
  <div id="header"></div>
    <div id="nav"></div>
    <div id="article">
      <div id="section"></div>
    </div>
    <div id="silder"></div>
    <div id="footer"></div>
    
    
    <!-- 新标签的实现方式-->
    <header></header>
    <nav></nav>
    <article>
      <section></section>
    </article>
    <aside></aside>
    <footer></footer>
</body>

<header></header>头部

<nav></nav>导航

<section></section>定义文档中的节,比如章节、页眉、页脚

<aside></aside>侧边栏

<footer></footer>尾部

<article></article>代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等。

CSS简介

CSS概念

CSS(Cascading Style Sheets)层叠样式表,又叫级联样式表,简称样式表。

CSS文件后缀名为.css

CSS用于HTML文档中元素样式的定义。

CSS的作用

使用css的目的就是让网页具有美观一致的页面。

语法

CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。


选择器通常是你需要改变样式的HTML元素。

每条声明由一个属性和一个值组成。

属性(property)是你希望设置的样式属性(style attribute)。每个属性都有一个值。属性和值被冒号分开。

<style>
  h1{
    color:blue;
    font-size:9px;
  }
</style>

CSS的引入方式

内联样式(行内样式

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style属性可以包含任何CSS属性。

缺乏整体性和规划性,不利于维护,维护成本高。

<p style="background:orange; font-size:24px;">CSS</p>

内部样式

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用标签在文档头部定义内部样式表。

单个页面内的CSS代码具有统一性和规划性,便于维护,但是在多个页面之间容易混乱。

<head>
    <style>
      h1{
        color:blue;
        font-size:9px;
      }
    </style>
</head>

外部样式(推荐)

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件夹来改变整个站点的外观。每个页面使用标签链接到样式表。标签在文档的头部。

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

选择器

CSS语法规则由两个主要的部分构成:选择器,以及一条或多条声明(样式)。

全局选择器

可以与任何元素匹配,优先级最低,一般做样式初始化。

<style>
    *{
      margin:0;
      padding:0;
    }
</style>

元素选择器

HTML文档中的元素,p、b、div、a、img等。

也可以叫标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”。

<style>
    p{
      font-size:9px;
    }
</style>

注意:

1.所有的标签,都可以是选择器。比如说ul、li、dt、dl、input、div等等。

2.无论这个标签藏的多深,一定能够被选择上。

3.选择的所有,而不是一个。

类选择器

规定用圆点 . 来定义,针对你想要的所有标签使用。优点是十分灵活。

<head>
    <style>
      .oneclass{
        width:800px;
      }
    </style>
</head>
 
<body>
  <h2 class="oneclass">hello</h2>
</body>

class属性的特点

  1. 类选择器可以被多种标签使用。
  2. 类名不能以数字开头。
  3. 同一个标签可以使用多个类选择器。用空格隔开。
<body>
  <h2 class="classone classtwo">hello</h2> <!--正确-->
    <h2 class="classone" class="classtwo">hello</h2> <!--错误-->
</body>

ID选择器

针对某一个特定的标签来使用,只能使用一次css中的ID选择器#来定义。

注意:

1.ID是唯一的。

2.ID不能以数字开头。

<body>
  <p id="text">hello1</p>
    <p id="text">hello2</p>         <!--  在ID选择器中这样是不规范的,尽管能够实现效果-->
    
    <p class="classone">Hello1</p>  <!--  在类选择器中是可以的-->
    <p class="classone">Hello2</p>
</body>

合并选择器

语法:选择器1,选择器2,...{}

作用:提取共同的样式,减少重复代码。

<style>
  h1{
    color:blue;
    font-size:9px;
  }
  p{
    color:blue;
    font-size:9px;
  }
  
  <!--  相当于上面两个选择器-->
  h1,p{
    color:blue;
    font-size:9px;
  }
</style>

选择器的优先级

CSS中,权重用数字衡量:

  • 元素选择器的权重为:1
  • 类选择器的权重为:10
  • id选择器的权重为:100
  • 内联样式的权重为:1000



Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二:https://developer.aliyun.com/article/1530974

目录
相关文章
|
25天前
|
移动开发 前端开发 HTML5
2024.3.30-认识 CSS (文本样式、复合选择器)
2024.3.30-认识 CSS (文本样式、复合选择器)
|
22天前
|
前端开发
CSS选择器详解与应用实例
CSS选择器详解与应用实例
116 44
|
14天前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
11 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
22天前
|
前端开发 开发者
CSS伪类选择器:增强内容表现力的利器
CSS伪类选择器:增强内容表现力的利器
16 4
|
29天前
|
前端开发 容器
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
|
29天前
|
前端开发 容器
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
|
12天前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
15 0
|
18天前
|
前端开发
前端 CSS 经典:好用的 CSS 选择器
前端 CSS 经典:好用的 CSS 选择器
15 0
|
18天前
|
前端开发
CSS2(一):CSS选择器(2)
CSS2(一):CSS选择器(2)
11 0
|
18天前
|
前端开发
CSS2(一):CSS选择器(1)
CSS2(一):CSS选择器(1)
11 0