CSS3------什么是css
什么是CSS
- 简化代码、提高编程效率
- 把样式添加到HTML中是为了解决内容与表现分离的问题
- 样式表的定义方式
- 嵌入式:在标签中以style属性出现
- 内联式:在head标签里添加 <style type="text/css"></style> 标签
- 外联式:以css扩展名的文件独立存在的方式 <link rel="stylesheet" href="test.css" type="text/css" />
- 外部样式表可以极大提高工作效率,外部样式表通常存储在 CSS 文件中
- 样式可以通过定义保存在外部.css文件中,同时控制多个网页的布局,这意味着开发者不必经历在所有网页上编辑布局的麻烦
- 多个样式定义可层叠为一个
- CSS被分为不同等级:CSS1现已废弃,CSS2.1是推荐标准,CSS3分成多个小模块且正在标准化中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {background-color:yellow;}
h1 {font-size:36pt;}
h2 {color:blue;}
p {margin-left:50px;}
</style>
</head>
<body>
<h1>这个标题设置的大小为 36 pt</h1>
<h2>这个标题设置的颜色为蓝色:blue</h2>
<p>这个段落的左外边距为 50 像素:50px</p>
</body>
</html>
CSS基础语法
- 选择器通常是需要改变样式的 HTML 元素
- 每条声明由一个属性和一个值组成
- 属性property是希望设置的样式属性style attribute。每个属性有一个值。属性和值被冒号分开。
CSS 注释
- 注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它
- CSS注释以 /* 开始, 以 */ 结束
/*这是个注释*/
p {
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
使用CSS
- <p style="color:blue;margin-left:20px;">这是一个段落。</p>
- <link rel="stylesheet" type="text/css" href="mystyle.css">
注意的问题
多重样式优先级
标签的本质
- 浏览器上如果是盒子跟盒子平级,对应的代码中,就是标签跟标签平级
- 浏览器上如果是盒子跟盒子嵌套,对应的代码中,就是标签跟标签嵌套
背景颜色
字体、字体颜色、字体大小
文本对齐方式
<div>标签
- <div> 是一个块级元素,也就是说,浏览器通常会在div元素前后放置一个换行符
- 使用 <div> 元素来组合块级元素,这样就可以使用样式对它们进行格式化
- <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的class或id应用额外的样式
- 不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处
- 可以对同一个 <div> 元素应用class或id属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class用于元素组(类似的元素或者可以理解为某一类元素),而id用于标识单独的唯一的元素。
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
<span> 标签
- <span> 标签被用来组合文档中的行内元素
- span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化
<p class="tip"><span>提示:</span>正常显示文本信息</p>
p.tip span {
font-weight:bold;
color:#ff9955;
}
标签之间的关系
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
1、div是标签名
2、style是指标签的属性,用来设置样式
3、“=”称为“赋值”,是设置的意思
4、赋值号右侧的内容,是属性的值
<div style="width:100px"></div>
给div设置样式为宽100像素
举例: <厨子 身体="体重:100公斤"></厨子>
厨子:是标签名
= : 是设置符号
身体:是属性
“体重:100公斤”是属性的值
给厨子的身体设置体重为100公斤
以下代码就是指,给div设置
宽度=>width:100px;
高度=>height:100px;
背景色=>background:red;
-->
<div style="width: 100px;height: 100px;background: red"></div>
</body>
</html>
![](/assets/blank.gif)
再看一个例子,我们将一个汽车商城中的所有超文本添加上一个边框
添加边框效果
从以上上图中我们可以得出以下结论
- 标签的本质:所有的标签在页面都是一个矩形盒子
- 盒子在网页上的结构关系:只有两种
- 盒子套盒子
- 盒子与盒子平级
盒子在网页上的分布关系
- 盒子从上到下排列
- 盒子从左到右排列
- 学习如果将设计图翻译成标签
- 再学习如何通过CSS给标签设置样式,最终完成整个页面的开发设置。
标签与标签平级
<div style="width: 100px;height: 100px;border:1px solid red">1</div>
<div style="width: 100px;height: 100px;border:1px solid red">2</div>
标签与标签嵌套
<div style="width: 200px;height: 200px;border:1px solid red">1
<div style="width: 100px;height: 100px;border:1px solid red">2</div>
</div>
- 浏览器上如果是盒子跟盒子平级,对应的代码中,就是标签跟标签平级
- 浏览器上如果是盒子跟盒子嵌套,对应的代码中,就是标签跟标签嵌套
盒子平级且同行排列
<style>
div{
/*html文档中的标签,不能通过回车符来实现换行或者不换行。只能通过代码控制其换行状
态,代码让两个叫div的盒子同行排列
*/
display: inline-block;
}
</style>
<!-- 标签与标签平级 -->
<div style="width: 100px;height: 100px;border:1px solid red">1</div>
<div style="width: 100px;height: 100px;border:1px solid red">2</div>
对比从上到下的情况,我们可以看出,当盒子跟盒子是平级的时候,盒子排列方式与标签到书写结构没有关系。但盒子的排列先后顺序与标签的书写先后顺序有关。
CSS3------什么是css相关推荐
- Php开源h5相册系统,HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
- html精灵图资源,知识分享:HTML5+CSS3基础之CSS Sprites(CSS精灵)
原标题:知识分享:HTML5+CSS3基础之CSS Sprites(CSS精灵) CSS Sprites介绍 Css sprites 可翻译为css精灵,也有人翻译为css雪碧,因为sprite也有雪 ...
- css3学习 之 css选择器(结构性伪类选择器)
同上篇:先说明下本机浏览器吧:opera 10 firefox 4.0 chrome 由于是公司机器xp的..所以ie版本为 ie8 另外有一个ietest 所谓伪元素选择器,是指并不是针对真正的元 ...
- css3学习 之 css选择器(css3 属性选择器)
这是上一篇css选择器介绍里面内容比较详细..大家可以看看 下面我将结合<HTML 5与css 3权威指南>这本书 对css选择器再进行记录下 里面有些个人见解如果看客觉得有问题.可以提出 ...
- 可以自动撑起的html样式,好好玩:CSS3抖动样式CSS Shake让你的网页酷炫起来
之前在一些网站发现了一个好玩的样式,就是鼠标移到网站LOGO上,logo会自动抖动起来,显得非常炫酷.我也是十分感兴趣.自从本站新添加了一个视觉设计的分类之后,我也是想起来有个抖动CSS样式CSS S ...
- 狂神css3笔记,【CSS】CSS3学习笔记(一)——选择器
✨CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
- css3 cheatsheet,Complete CSS Cheat Sheet
Using CSS day-to-day? Whether you're a super savvy web developer or just someone who wants to learn ...
- HTML5 CSS3专题 纯CSS打造相册效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时 ...
- 3d金字塔用css3动画,纯css实现旋转的金字塔
css是个神奇的东西,在学习的过程中你会发现绘画和艺术的美,金字塔是世界八大奇迹之一,设计精巧,计算精密,令世人赞叹.那么如何用CSS画一个金字塔呢? 人丑话不多,先看一下效果 ❐ 思路 金字塔是由5 ...
- css3透明度过度,CSS透明半透明与transition过渡效果
一.CSS透明与半透明 1.CSS3 整体透明 opacity : 1 ; 透明度 filter : alpha( opacity = 100 ); 老旧浏览器 IE8 - 2.CSS3 颜色透明 # ...
最新文章
- 关于C++中数组下标越界不报错的问题
- python逗号运算符_x,= ... - 这个尾随逗号是逗号运算符吗?
- 数据库模型设计PowerDesigner
- 我如何使用Python查找有趣的人来关注Medium
- edge android apk下载地址,edge app下载-edge完整版v7.2.0 安卓版 - 极光下载站
- UE4笔记-UStructToJsonObjectString首字母自动转换为小写的问题及解决方法
- 线程中这么调用类_一文学会 Python 多线程编程
- RabbitMQ集群和失败处理
- 深入理解JavaScript系列
- solidity import @是什么意思
- HFSS - WLAN双频单极子天线设计与仿真
- kindle导出电子书pc_在PC版Kindle上阅读Mobi电子书
- 计算机术语中的cpu是指什么意思是,什么叫cpu_cpu是什么意思_电脑cpu意思介绍 - 系统家园...
- python图片镜像翻转_OpenCV Python 翻转(镜像)图片 cv.flip
- voip 语音质量[摘]
- 网页瘦身方法-金瑞帆高端建站
- 一篇讲左偏树的好文章~
- 鸿蒙 悟空遥控,悟空遥控器(com.wukongtv.wkremote.client) - 3.9.3.0 - 应用 - 酷安
- jpeg图像压缩原理
- Quorum?Quorum!