【web】basic CSS(1)

1 篇文章 0 订阅

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-imageurl("");
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" />
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值