html css 术语 和 基本语法

时间：2022-12-31 13:36:17

术语 语法 介绍

在学习之前区别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属性。

<ahref="http://www.shayhowe.com/">Shay Howe</a>

 

Html文档结构和语法

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

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

一般的html文档的结构如下

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Hello World</title>
 </head>
 <body>
   <h1>Hello World</h1>
   <p>This is a website.</p>
 </body>
</html>

常用的css术语

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

选择器

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

p { ... }


属性

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

p {
  color: #ff0;
  font-size: 16px;
}

属性值

         属性值决定属性的行为，属性可以被指定在“：”和“；”之间

p {
  color: #ff0;
  font-size: 16px;
}

 
 
 
 
 
 
 

 

Css的结构和语法
 

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

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

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

 

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

 

p{
  color:#ff0;
  font-size:16px;
}
 

 

Long vs.Short Hand
 

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

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

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

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

 
 

/* Long Hand */
p {
 padding-top: 10px;
 padding-right: 20px;
 padding-bottom: 10px;
 padding-left: 20px;
}
/* Short Hand */
p {
 padding: 10px 20px;
}
/* Short Hand */
p {
 padding: 10px;
}
 

 

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的魅力就在于它能组合选择和样式继承。可以组合多个
 

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

 

ul#social li {
 padding: 0 3px;
}
ul#social li a {
 height: 17px;
 width: 16px;
}
ul#social li.tumblr a {
 background: url('tumblr.png') 0 0 no-repeat;
}
 

 

Additional Selectors
 

 
 

Selectors can be extremely powerful and theselectors outlined above are only the beginning. Many more advanced selectorsexist and are readily available. Before dropping classes or IDs on randomelements check and see if there might be a better selector to do the job foryou. It is also worth mentioning that not all advance selectors work in everybrowser, particularly with new selectors introduced in CSS3. If a selectordoesn’t seem to be working properly check its browser support.



 
 

引用css
 

 
 

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

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

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

 

<!-- External CSS File -->
<link rel="stylesheet"href="file.css">
<!-- Internal CSS -->
<style type="text/css">
p {
 color: #f60;
 font-size: 16px;
}
</style>
<!-- Inline CSS -->
<p style="color: #f60; font-size:16px;">Lorem ipsum dolor sit amet...</p>
 

 

 

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

Css文件存放的地址。
 

 

<head>
 <link rel="stylesheet"href="styles/file.css">
</head>
 

 参考：http://learn.shayhowe.com/ 

 

标签：
相关文章