CSS基础之简单介绍
网页诞生初期,没有描述样式的语言,创建了很多用于描述样式的标签。但这些标签破坏了html作为一门结构语言的表现。
于是,W3C在1995年开始起草CSS,提出将结构和样式分离的解决方案。
元素
元素是文档结构的基础,在CSS中,每个元素都会生成一个框(或者说盒)
表现形式
替换元素:替换元素的内容并非有浏览器直接生成,典型的莫
过于img元素了;
非替换元素:大部分html元素都是非替换元素,如div元素、p元素等
块级元素:填充父元素的内容区
行内元素:在文本行内生成元素框
声明CSS
[1] 外部样式表
永久样式表(persistent style sheet)
如果指定rel属性为stylesheet,没有指定title属性,那么它
将成为一个永久样式表
<link rel="stylesheet" href="/style.css">
候选样式表(alternate style sheet)
如果为link标签指定一个title属性,那么它将成为一个
候选样式表
<link href="/style1.css" title="mystyle1">
首选样式表(preferred style sheet)
在link标签已经指定rel为stylesheet的情况下,再指定
title属性,那么它将成为一个首选样式表
<link href="stylesheet" href="/style1.css" title="mystyle1">
```
其他属性:
media:
all //所有媒体
screen //屏幕媒体
handheld //手持设备
aural //语音合成器
tv //电视
tty //固定间距环境
print //打印设备
embossed //Braille打印设备
braille //Braille设备
projection //投影设备
```
[2] 文档样式表
在文档中使用style标签包含样式表,成为文档样式表
(document style sheet)或内嵌样式表(embedded style sheet)
<style>
div {
color: #f60;
}
</style>
在style标签内可以使用@import加载外部样式表
@import url(style2.css) screen;
@import与link标签相比较:
声明必须放在所有样式前面
无法指定候选样式表,所有声明的样式都会被加载
[3] 内联样式
使用style属性为单个元素设置属性,inline在这里翻译为内联
,而不是行内,意为内部自带
<p style="color:#f60">天若有情</p>
注意:不推荐使用,一个内联样式只能放一个声明快,不能放整个样式表
,因此不能使用诸如@import之类的规则,style属性的值只能是出现
在大括号之间的部分。
CSS基础之简单介绍的更多相关文章
- 利用Python进行数据分析(4) NumPy基础: ndarray简单介绍
一.NumPy 是什么 NumPy 是 Python 科学计算的基础包,它专为进行严格的数字处理而产生.在之前的随笔里已有更加详细的介绍,这里不再赘述. 利用 Python 进行数据分析(一)简单介绍 ...
- iOS开发基础-KVC简单介绍
一.KVC介绍 键值编码(Key Value Coding,KVC):使开发者不必进行任何操作就可以进行属性的动态读写. KVC操作方法由 NSKeyValueCoding 协议提供,而 NSObje ...
- ActiveMQ基础教程----简单介绍与基础使用
概述 ActiveMQ是由Apache出品的,一款最流行的,能力强劲的开源消息总线.ActiveMQ是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,它非常快速,支持多 ...
- [01]HTML基础之简单介绍
1.前言 现如今科技进步,足不出户尽晓天下事,一转身便仿若隔世茫然.科技绽放时代,网络技术对人们的触变无疑是深远而重大的,隐于缤纷绚丽的网页背后,是前端的蜕变更新. 如今,随意点开页面,绚丽华彩的特效 ...
- css基础学习---简单理解
1:在css中定义图片相对路径 #primary-nav { //相对路径 background: url(../images/alert-overlay.png) repeat-x; height: ...
- CSS基本样式简单介绍
具体详情内容请查阅<css参考手册> 一.基本结构样式 width 宽度 height 高度 background 背景 border 边框 padding 内边距 margin 外边距 ...
- JSON基础,简单介绍
JSON(JavaScript Object Notation(记号.标记)) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - ...
- SpringMVC总结二:Controller的请求映射方式(RequestMapping)简单介绍
在SpringMVC总结一:快速入门的基础上简单介绍一下请求映射的方式: 1,标准映射规则 1. @RequestMapping可以设置在类上,也可以设置在方法上 2. 请求的映射规则是:类上的Req ...
- HTML&CSS基础-前端免费开发工具Hbuilder介绍
HTML&CSS基础-前端免费开发工具Hbuilder介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 工欲善其事必先利其器,想要干好活得有一个好的工具. 一.文本编辑工 ...
随机推荐
- jsonp跨域封装
一.什么是同源政策? 同源策略是指在Web浏览器中,允许某个网页脚本访问另一个网页的数据,但前提是这两个网页必须有相同的URI.主机名和端口号,一旦两个网站满足上述条件,这两个网站就被认定为具有相同来 ...
- js数组对象的一些常用方法
pop:删除数组最后一个元素 语法: array.pop(); 如 var array = ['1','2','3']; array.pop(); 返回结果:[‘1’,‘2’]此方法会改变数组的长度 ...
- 跳出初学MySQL知识的原理整理(一)
一.基础架构 MySQL 可以分为 Server 层和存储引擎层两部分. Server 层包括连接器.查询缓存.分析器.优化器.执行器等,所有跨存储引擎 的功能都在这一层实现,比如存储过程.触发器.视 ...
- [PHP学习教程 - 文件]001.高速读写大数据“二进制”文件,不必申请大内存(Byte Block)
引言:读写大“二进制”文件,不必申请很大内存(fopen.fread.fwrite.fclose)!做到开源节流,提高速度! 每天告诉自己一次,『我真的很不错』.... 加速读写大文件,在实际工作过程 ...
- [Objective-C] 006_Protocol(协议)
学过java的同学都知道Interface(接口),那么在Objective-C中有没有接口呢?其实 Objective-C中用Protocol(协议)来实现的,在Objective-C具体怎么用,我 ...
- Spring boot Sample 012之spring-boot-web-upload
一.环境 1.1.Idea 2020.1 1.2.JDK 1.8 二.目的 spring boot 整合web实现文件上传下载 三.步骤 3.1.点击File -> New Project -& ...
- Python实现批量MD5加密
#!/usr/bin/python # -*- coding: utf-8 -*- import hashlib def md5(str): hl = hashlib.md5() hl.update( ...
- Java实现 LeetCode 778 水位上升的泳池中游泳(二分+DFS)
778. 水位上升的泳池中游泳 在一个 N x N 的坐标方格 grid 中,每一个方格的值 grid[i][j] 表示在位置 (i,j) 的平台高度. 现在开始下雨了.当时间为 t 时,此时雨水导致 ...
- Java 第十一届 蓝桥杯 省模拟赛 合法括号序列
合法括号序列 题目 问题描述 由1对括号,可以组成一种合法括号序列:(). 由2对括号,可以组成两种合法括号序列:()().(()). 由4对括号组成的合法括号序列一共有多少种? 答案提交 这是一道结 ...
- Java实现 蓝桥杯 算法训练 Anagrams问题
算法训练 Anagrams问题 时间限制:1.0s 内存限制:512.0MB 问题描述 Anagrams指的是具有如下特性的两个单词:在这两个单词当中,每一个英文字母(不区分大小写)所出现的次数都是相 ...