2.1 CSS基础知识_HTML视频教程

- 灬无言 - 阅 1,629

小小课堂网HTML视频教程零基础入门首选。

下方为HTML视频教程,如视频不能正常播放,请安装flash或更换浏览器。请记得在视频右下角选择“超清”,然后点击“全屏”,效果更加。

2.1.1 CSS简介

CSS:层叠样式表,英文全称为 Cascading Style Sheets。

CSS作用:样式定义如何显示HTML元素。

CSS优点:HTML的内容和表现分离,提高工作效率。

2.1.2 CSS语法

基本语法

CSS语法规则由两个主要部分构成:选择器,以及一条或多条声明,多声明“;”隔开。

选择器 {

声明1;

声明2;

声明N;

}

选择器(selector)通常是需要改变样式的HTML元素,例:p、#div1、.div2等。

每条声明由一个属性和一个值组成,属性和值被冒号分开。

声明格式如下

属性:值;  注:属性值和单位之间不要留有空格。100  PX是不正确的写法。

例:p {

color:red;

width:100px;

font-size:10px;

}

扩展

选择器分组,多个选择器共享声明。用逗号将多个选择器分开。

例:h1,h2,h3{

color:red;

}

继承,子元素从父元素继承属性。

2.1.3 CSS的创建

样式表有三种方式:

  • Ø 行间样式(内嵌模式):<p style=”声明1;声明2”>

行间样式无需选择器和大括号

就像div的一个属性,用=和“”来标识。 多个声明“;”隔开。

例:

<p style=”color:red;font-size:10px”></p>

  • Ø 内部样式:<head><style type=”text/css”>选择器{声明1;声明2}</style></head>

<style></style>写在<head></head>之间。

Type=”text/css”指明 类型是css文本。

告诉浏览器:本文内容(text)要当层叠样式表(CSS)来解析。规范写法。

例:

<head>

<style type=”text/css”>

P {

Color:red;

Align:left;

}

</style>

</head>

  • Ø 外部样式:<head><link rel=”stylesheet” type=”text/css” href=”1.css” /></head>

<link/>标签 定义文档与外部资源的关系。

<link>常用属性如下:

  • Ø 规定当前文档与被链接文档关系: rel

例:rel=”stylesheet” 规定当前文档(HTML)与被链接文档(href所指向文件【这里就是指CSS】)之间的关系。

  • Ø 类型: type规定被链接文档MIME类型。

例:type=”text/css”   指明类型是css文本。

  • Ø 文档链接地址URL:href

例:href=”1.css”

图文不够清楚?请观看小小课堂网HTML视频教程

扫描二维码关注“小小课堂网”

第一时间获取最新教程

二维码

2

本文转载 " https://www.xxkt.org/1500 "

原文地址 " 小小课堂网原创教程。未经许可,禁止转载。否则,将追究法律责任! "

相关文章!

发表评论

电子邮件地址不会被公开。 必填项已用*标注