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的水平值 ...
随机推荐
- spoj1811:Longest Common Substrin
题目链接:http://begin.lydsy.com/JudgeOnline/problem.php?id=2796 把一个字符串做出后缀自动机,另一个字符串与之匹配. #include<cs ...
- 二分法经典习题——HDU1969
#include <iostream>#include <cmath>#include <iomanip>using namespace std; double p ...
- Spring AOP实现声明式事务代码分析
众所周知,Spring的声明式事务是利用AOP手段实现的,所谓"深入一点,你会更快乐",本文试图给出相关代码分析. AOP联盟为增强定义了org.aopalliance.aop.A ...
- amazeui 搜索 动态
<!doctype html> <html class="no-js"> <head> <meta charset="utf-8 ...
- Lua手册中的string.len 不解
Lua手册中的string.len (s) 接收一个字符串,返回其长度. 空串 "" 的长度为 0 . 内嵌零也统计在内,因此 "a\000bc\000" 的长 ...
- RPC框架基本原理(二):客户端注册
客户端的注册流程如下 核心功能主要如下: 1.生成调用远程HSF服务的代理 此代理的效果为生成ServiceMetadata中指定的interface的代理,调用时可将代理转型为服务接口,并进行直接的 ...
- git容易被忽略的准备工作命令
安装git命令 $ apt-get install git-core 配置用户信息 $ git config --global user.name "wxw" $ git conf ...
- C语言_IP地址解析
#include<stdio.h> #include<stdlib.h> void main() { unsigned long input_IP; unsigned int ...
- html+javascript实现可拖动可提交的弹出层对话框效果
本文为大家介绍下使用html+javascript实现可拖动弹出层.对话框.可提交,具体代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC &quo ...
- ERROR 1406 : Data too long for column 解决办法
解决办法: 在my.ini里找到 sql-mode=”STRICT_TRANS_TABLES,NO_AUTO_Create_USER,NO_ENGINE_SUBSTITUTION” 把其中的STRIC ...