html css 术语 和 基本语法

2018年11月1日14:09:01 发表评论

html css 术语 和 基本语法

术语 语法 介绍

在学习之前区别html和css之间不同,语法和常用的术语。

Html语言是被创建用于给予网页内容结构和语义信息的超文本语言。

CSS语言是被创建用于给予网页内容样式的层叠样式表。

Html决定网页内容的结构和语义信息,css决定网页内容的样式和表现。而且css不应该在html文件中。

更进一步说就是,用<p>用来展示一段文字。

<p>元素被用来专门表示一段文字,他会给内容提供更多的价值(便是这段文字就是一段文本),具有语义特征。Css用一种选择器,可以决定段落的颜色,文字的大小文字粗细和其他的样式属性

常用的html术语

下面我们将熟悉三个重要和html有关的术语

元素

元素就是一个表示符,他定义网页中的一个对象,对象包括结构和内容。

一些比较常用的元素比如h1 到h6, p, a, div, span, strong, 和em.

标签

一个元素有像个标签组成,一个开始标签和一个结束标签,

比如<a>…………</a>

属性

 属性就是给元素提供更多的信息,常用的属性有 id name class

title,或者是给多媒体元素一个src属性,为超链接属性提供href属性。

<arel="external nofollow" target="_blank" href="https://www.lixiongzhao.com/wp-content/themes/begin/to.php?url=aHR0cDovL3d3dy5zaGF5aG93ZS5jb20v">Shay Howe</a>

 

Html文档结构和语法

Html文档有统一的结构,包括下面的声明和标签:doctype Html head body。

Doctype声明被用来告诉浏览器,我们用的是哪个版本的html文档,他被放在文档开始。紧跟其后的是html标签,表示文档的开始和结束。文档的head元素用来提供文档的一些元数据,比如文档的title,外部文档的链接,css和javascript等。在head标签中的内容在网页中是看不见的。能看见的内容都是在<body>中的。

一般的html文档的结构如下

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Hello World</title>
  6. </head>
  7. <body>
  8. <h1>Hello World</h1>
  9. <p>This is a website.</p>
  10. </body>
  11. </html>

 

常用的css术语

除了html常用的术语外,还需要了解css的常用术语

选择器

用来决定那个或者是哪些元素应用相应的样式。选择器使用不同的id  Class 标签或者是其他的属性组成的。

p { ... }

 

属性

属性决定你应用在元素上的样式

  1. {
  2. color: #ff0;
  3. font-size: 16px;
  4. }

属性值

属性值决定属性的行为,属性可以被指定在“:”和“;”之间

  1. p {
  2. color: #ff0;
  3. font-size: 16px;
  4. }

Css的结构和语法

Css用来应用指定的样式到选择的元素上。

所有的样式叠加,多个元素将继承不同的样式。

例如可以设置一个样式给一个页面的所有的文本,特定的颜色大小 粗细。我们也可以应用一个具体的选择器为指定的元素应用特定的样式,来覆盖一个特定元素的样式。

下面的语法表示将下面的样式应用到所用的段落上。

  1. p{
  2. color:#ff0;
  3. font-size:16px;
  4. }

Long vs.Short Hand

在css中提供多种方式为属性设置值。

应用long hand方式,你将堆叠多个声明,一个接着一个的声明

属性和值。应用short hand,声明一个属性,设置多个值。

如果想少些代码,可以应用short hand

  1. /* Long Hand */
  2. p {
  3. padding-top: 10px;
  4. padding-right: 20px;
  5. padding-bottom: 10px;
  6. padding-left: 20px;
  7. }
  8. /* Short Hand */
  9. p {
  10. padding: 10px 20px;
  11. }
  12. /* Short Hand */
  13. p {
  14. padding: 10px;
  15. }

Html 和css 的注释

注释不会被浏览器渲染,我们看不见,只用于交流

Html 的注释在<!-- -->css 的注释在/*  */之间

 

选择器

选择器决定那个元素将被应用样式。理解怎样用选择器很重要。

常见的选择器有id class 元素或者是三者的结合。

Type Selectors(元素选择器)

通过元素的名称选择

HTML

<p>...</p>

CSS

p { ... }

Class Selectors

通过元素的class属性选择元素,可以通过给不同的元素指定相同

Class 值,应用相同的样式。

HTML

<div class="awesome">...</div>

CSS

.awesome { ... }

Id选择器

通过元素的元素属性选择元素,和class选择器不同的是,

元素的id在每个网页中是唯一的,所以id选择的样式只能

应用到唯一一个元素。

HTML

<divid="shayhowe">...</div>

CSS

#shayhowe { ... }

混合的选择器

Css的魅力就在于它能组合选择和样式继承。可以组合多个

选择器,逐渐缩小元素的范围。

  1. ul#social li {
  2. padding: 0 3px;
  3. }
  4. ul#social li a {
  5. height: 17px;
  6. width: 16px;
  7. }
  8. ul#social li.tumblr a {
  9. background: url('tumblr.png') 0 0 no-repeat;
  10. }

附加选择器

选择器可以是非常强大的,上面概述的选择器仅仅是开始。许多更先进的选择器存在并易于获得。在随机元素上删除类或ID之前,检查是否有更好的选择器来完成任务。还值得一提的是,并非所有高级选择器都适用于所有浏览器,尤其是CSS3中引入的新选择器。如果一个选择器似乎不能正常工作,请检查它的浏览器支持。

 

引用css

 

一旦准备好了html,我们就要用css修饰内容,有多种方式应用css

,最好的方式是将css存放在一个单独的文件中,在html文件的

Head中应用样式应用标签引入,好处css易维护。

  1. <!-- External CSS File -->
  2. <link rel="stylesheet"href="file.css">
  3. <!-- Internal CSS -->
  4. <style type="text/css">
  5. p {
  6. color: #f60;
  7. font-size: 16px;
  8. }
  9. </style>
  10. <!-- Inline CSS -->
  11. <p style="color: #f60; font-size:16px;">Lorem ipsum dolor sit amet...</p>

引入外部样式边的方法,在head中引用<link> 的href属性知道那个

Css文件存放的地址。

[html] view plain copy
  1. <code class="language-html"><head>
  2.  <link rel="stylesheet"href="styles/file.css">
  3. </head></code>
weinxin
我的微信
这是我的微信扫一扫