html进阶css(1)
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html";
charset="utf-8">
<title>html和css的关系</title>
<style type="text/css">
h1{
font-size:12px;
color:#930;
text-align:center;
}
span{
color:yellow;
}
</style>
</head>
<body>
<h1><span>Hello</span> World</h1>
</body>
</html>
css的组成:选择器,声明=属性与属性值
css的语法:选择器{属性:属性值;}
说明:1)属性和属性值之间用:连接,声明必须要在花括号内
2)一个选择器可以有多个属性,属性和属性之间用;分号隔开。
3)一个属性可以用多个属性值,属性值与属性值之间用空格隔开
meta标签支持html中的全局属性。
http-equiv属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先要传送给浏览器的mime文档头部包含名称/值对。
当服务器向浏览器发送文档时,会先发送很多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一格:content-type:text/html。这将告诉浏览器准备一个接受的html文档。(当然现在大多数浏览器都能自动识别HTML文档)
style type="text/css" 这段代表中间内容的风格是css格式。
例如:font-size:12px 是控制字体的大小
color:#930 是控制字体的颜色
text-align:center 是控制文字居中
span标签没有语义的它的作用就是为了设置单独的样式。在两种颜色或更多种颜色中它会选择最下面那种颜色。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css之中的三种语法</title>
<link href="css的文件地址.css" rel="stylesheet" type="text/css" />
<style type="text/css">
span{
color:blue;
font-size:20px;
}
</style>
</head>
<body>
<p style="color:red;font-size:12px">这里的颜色是红色</p>
<p>这是另外的<span>一个段落</span></p>
</body>
</html>
以上是3种css的格式: 1)内联样式表就是<p style="color:red;font-size:12px"></p>
css内联样式表就是把css代码直接写在现有的html标签中。
2)嵌入式样式表<style type="text/css"></style>
嵌入式css样式就是可以把css样式代码写在style标签之中。一般情况下嵌入式css样式写在<head></head>之间。
3)外联样式表
<link href="css的文件地址.css" rel="stylesheet" type="text/css" />
外联css样式就是把css代码写在一个单独的外部文件中,这个css样式文件以".css"为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到html文件内。
注意:rel="stylesheet"type="text/css"是固定写法不可修改,使用外联样式的好处可以让用户打开网页的速度有所提升。
三种样式表如果在同一个标签内,它们的优先级:内联>嵌入>外联。
html进阶css(1)的更多相关文章
- html进阶css(5)
css定位机制 css有三种基本的定位机制:普通流,浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在html中的位置决定. 块级框从上到下一个接一个的 ...
- html进阶css(4)
盒子模型-边框 首先请看下图 <!doctype html> <html> <head> <meta charset="utf-8"> ...
- html进阶css(3)
css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许格式不仅应用于某个特定html标签元素,而且应用于其后代. <!doctype html> <html> ...
- html进阶css(2)
选择器的类型 <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...
- HTML5总结整理
(仅供大家学习分享交流) 一.简介 1.前端开发最核心技术 我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最 主要由3部分组成:结构.表现和行为.网页现在新的标准 ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 【CSS进阶】试试酷炫的 3D 视角
写这篇文章的缘由是因为看到了这个页面: 戳我看看(移动端页面,使用模拟器观看) 运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 ...
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
随机推荐
- 黑马程序员——String类
------<a href="http://www.itheima.com" target="blank">Java培训.Android培训.iOS ...
- c# 代码执行时间
Stopwatch sw = new Stopwatch(); sw.Start(); Thread.Sleep(2000); sw.Stop(); System.Diagnostics.Trace. ...
- Android开发环境的搭建之(一)Java开发环境的安装
(1) 安装JDK(Java Developer Kit).下载JDK1.8并安装jdk-8u60-windows-i586.exe.下载官方链接http://www.oracle.com/tech ...
- 试用Let's encrypt
终于等到 https://letsencrypt.org beta了,马上下载试用,发现过程超简单. 1.首先需要下载letsencrypt的客户端,官方给的介绍是 The Let’s Encrypt ...
- 《第一行代码》学习笔记21-Git
Git(1) 1.Git是一个开源的分布式版本控制工具,其开发者是Linux操作系统的作者Linus Torvalds. 2.仓库(Repository)是用于保存版本管理所需要信息的地方,所有本地提 ...
- 变量a的定义
1.一个整型数 int a; 2.一个指向整型数的指针 int *a; 3.一个指向指针的指针,它指向的指针是指向一个整形数 int **a; 4.一个有10个整型数的数组 ]; 5.一个有10个指针 ...
- pfile,spfile 初始化参数文件顺序【weber出品】
一.初始化参数文件 启动实例时会读取初始化参数文件.参数文件有两种类型: 1.服务器参数文件:这是首选类型的初始化参数文件.这是一个由数据库服务器写入或读取的二进制文件,不得手动进行编辑.此文件驻留在 ...
- 定义了重复的system.web.extensions/scripting/scriptResourceHandler怎么办
今天移转系统,都配置好之后,系统报错说我的web服务下的web.config 定义了重复的 system.web.extensions/scripting/scriptResourceHandler ...
- javascript作用域和作用域链
1.作用域 作用域,它是指对某一变量和方法具有访问权限的代码空间.当我们在定义变量的时候,会定义两种变量,一种是在全局环境下定义的变量,叫全局变量,一种是在函数中定义的变量叫局部变量.全局变量的作用域 ...
- FFT与多项式、生成函数题目泛做
题目1 COGS 很强的乘法问题 高精度乘法用FFT加速 #include <cstdlib> #include <iostream> #include <algorit ...