CSS Day04 css核心基础
1.在HTML中引入CSS的方法
（1）行内式
行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。
例如：
<h1 style=“color:white; background-color:blue”>这是一行文本/h1>
例1：
<html>
<head>
<title>行内式</title>
</head>
<body>
<h2 style="text-align: center;background-color: red;color: #eeeeee;">这是行内式</h2>
<p style="text-align: center;background-color: blue;color: green;width:500px;height:200px;line-height:200px;">这是一个段落!</p>
</body>
</html>
（2）嵌入式
嵌入式将对页面中各种元素的设置写在<head></head>之间。
例如：
<style type="text/css">
h1{
color:white;
background-color:blue；
}
</style>
例2：
<html>
<head>
<title>嵌入式</title>
<style type="text/css">
h2{
text-align: center;background-color: blue;color: green;
}
p{
text-align: center;background-color: red;color: #eeff11; width:300px;height:300px;line-height:300px;
} </style>
</head>
<body>
<h2>这是嵌入式</h2>
<p>这是一个段落!</p>
</body>
</html>
（3）导入式
<style type="text/css">
@import"mystyle.css";
</style>
例3： 1）
<html>
<head>
<title>嵌入式</title>
<style type="text/css">
@import"mystyle.css";
</style>
</head>
<body>
<h2>这是嵌入式</h2>
<p>这是一个段落!</p>
</body>
</html>
2）
@charset "utf-8";
/*css*/
h2{
text-align: center;background-color: blue;color: green;
}
p {
text-align: center;background-color: red;color: #eeff11; width:300px;height:300px;line-height:300px;
}
（4）链接式
<link href="mystyle.css" rel="stylesheet" type="text/css" />
例：
<html>
<head>
<title>链接式</title>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h2>这是链接式</h2>
<p>链接式的段落！</p>
</body>
</html>
mystyle.css
1 @charset "utf-8";
/*css*/
h2{background-color: red;color: blue;text-align: center;}
p{background-color: blue;color: red;text-align: center;width: 500px;height: 300px;line-height:300px;}
CSS Day04 css核心基础的更多相关文章
- css核心基础总结篇
今日这篇是整合前面的css补充知识的. 我觉得前面的关于css的知识补充进去有点乱,今日整理整理一下. 层叠样式表 层叠是什么意思?为什么这个词如此重要,以至于要出现在它的名称里. 层叠可以简单地理解 ...
- （1） css的核心基础
css的核心基础 1.css的基本语法在具体使用css之前,请各位兄弟姐妹先思考一个生活中的问题,一般情况下我们是如何描述一个人的呢? 小明{ 民族:汉族: 性格:温柔: 性别:男: 体重:68kg ...
- CSS 设计彻底研究（一）(X)HTML与CSS核心基础
第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...
- CSS学习篇核心之——盒子模型
概述 关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识. 盒子模型 元素框的最内部分是实际的内容(element),直接包围内容的是内边距 ...
- CSS——（1）基础
CSS(Cascading Style Sheets)层叠样式表 含义 一种计算机语言: 能够实现网页与内容分离: 用来表现文件样式,如HTML或XML: 比較 div与css 假设说div是容器的话 ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
- css简单的一些基础知识
css层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可 ...
- CSS学习笔记（基础篇）
CSS概念 CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表) Css是用来美化html标签的,相当于页面化妆. 样式表书写位置: <head> < ...
- 「CSS」css基础
1. 文字水平居中 将一段文字置于容器的水平中点,只要设置text-align属性即可: text-align:center; 2. 容器水平居中 先该容器设置一个明确宽度,然后将margin的水平值 ...
随机推荐
- JUnit test case 执行顺序
转自:JUnit中按照顺序执行测试方式 很多情况下,写了一堆的test case,希望某一些test case必须在某个test case之后执行.比如,测试某一个Dao代码,希望添加的case在最前 ...
- linux centOS 安装oracle
安装环境 Linux服务器:CentOS6.4-64位 oracle服务器:oracle11g-64位 基本要求 内存大小:至少2G 硬盘大小:至少6G 交换空间:一般为内存的2倍,例如:2G的内存可 ...
- phpstrom 快捷使用方式
file-settings--key map键映射-->collapse(代码折叠)---- ctrl (减减)2次全部折叠 (加加)2次全部展开 格式化代码 ctrl+alt+L 替换 c ...
- osg蝴蝶纹理
#include <osgViewer/Viewer> #include <osgDB/WriteFile> #include <osg/StateSet> #in ...
- Zeppelin使用spark解释器
Zeppelin为0.5.6 Zeppelin默认自带本地spark,可以不依赖任何集群,下载bin包,解压安装就可以使用. 使用其他的spark集群在yarn模式下. 配置: vi zeppelin ...
- CodeForces 701C They Are Everywhere 尺取法
简单的尺取法…… 先找到右边界 然后在已经有了所有字母后减小左边界…… 不断优化最短区间就好了~ #include<stdio.h> #include<string.h> #d ...
- BestCoder Round #86 A B C
这次BC终于不像上次一样惨烈 终于A了三题…… 终测ing…… 发一波题解…… A.Price List A题十分无脑 只要把所有数加起来存到sum里 询问的时候大于sum输出1 否则输出0就行了…… ...
- Gentoo 无线网络配置 wpa_supplicant
安装 安装net-wireless/wpa_supplicant包 emerge --ask wpa_supplicant 启动网络 为wpa_supplicant添加无线接口 在wpa_suppli ...
- HTML-input标签需设置的属性
<input placeholder="这里输入门店名称" autocomplete="off" id="" name="& ...
- Oracle Day05 集合与数据处理
1.集合 --集合操作: 并集.交集.差. select deptno,job,sum(sal) from emp group by deptno,job union select deptno,to ...