【web】basic CSS（1）

来源：互联网发布：淘宝网名龙堂编辑：程序博客网时间：2024/06/05 01:53

1、介绍

HTML、CSS、JavaScript可以说是学习web的三门最基础的语言。是我们进入web世界的初始技能。

下面先分别介绍他们再说说他们之间的关系

1）、什么是HTML

HTML是Hypertext Markup Language超文本标记语言的英文缩写。
HTML 不是一种编程语言，而是一种标记语言 (markup language)。
web开发者使用HTML的一系列标签来描述网页。

2）、什么是CSS

CSS是Cascading Style Sheets指层叠样式表的英文缩写。
web开发者用CSS定义如何显示 HTML 元素。

3）、什么是JavaScript

JavaScript 是世界上最流行的脚本语言。
JavaScript 被设计为向 HTML 页面增加交互性。

4）、联系

总的来说最基本的是HTML，它首先定义了一个网页最基本的东西——网页的结构和内容，相当于一个人的骨架和组成部分；而CSS定义样式，即实现HTML元素的不同的外观，大小等，相当于决定一个人的外貌；JS则是保证了网页的交互性，相当于一个人与外界交际一样。

一般的文件组织形式是，html文件仅仅写最简单的结构和内容元素，元素的所有样式都写在CSS文件文件中。这样做的目的是为了让内容与表现分离，极大提高工作效率。

很明显，CSS和JS是基于HTML的，因此说最基本的是HTML。

本文先讲一讲部分基本的CSS元素,内容可能有点散，请见谅！

2、CSS样式的插入方式

CSS样式有两种插入方式，第一种是直接插入，用<style>标签直接在HTML文件中编写，第二种是额外写一个文件，然后用外链接插入。

外链接的基本语法是：

<link href="filename" type="text/css" rel="stylesheet" media="screen" />

注意<link>在<head>中定义。

出于关注点分离的目的，永远不要写第一种。
因为样式和结构是两种不同的东西，必须放在不同的位置。

3、basic CSS element

1）、基本语法

selector {    property 1: value 1;    …    property n: value n;}

2）、color property:

定义被选择元素的颜色。color有三种表示方式，分别是用名字、RGB值和#十六进制值

3）、background-color property：

定义被选择元素的背景色

4）、关于font字体的一些基本性质：

font-family——字体类型（注：一些泛的字体类型：serif, sans-serif, monospace, cursive）
font-size——字体大小（单位：pixels (px)指像素，point(pt)指打印的点数，m-size(em)值相对于m的大小）
font-style——是否斜体
font-weight——是否粗体

5）、关于text字体的一些基本性质：

text-align——字体位置，可选值有left, right, center, 和justify
text-decoration——划线，可选的值有overline、line-through、blink和none，可叠加。
还有诸如line-height,word-spacing,letter-spacing，text-indent等性质，顾名思义。

6）、list-style-type property：

定义有序列表的序号样式，可选的值有decimal、square、circle、disc、lower-roman、upper-roman和none等。

7）、body选择器

定义整个body的性质。

8）、关于背景的一些性质

定义在body选择器中。

background-color;background-image：url("");background-repeat: repeat-x, repeat-y和no-repeat;background-position: xxpx, xxpx;

9）、Favorites icon收藏图标

定义收藏图标的基本语法是：

<link href="filename" type="such as image or gif" rel="shortcut icon" />

0 0