CSS 快速入门
- 特点: CSS 将网页内容和显示样式进行分离,提高了显示效果的功能.
- CSS 和 html 相结合的四种方式:
- style 属性的方式
- 每个 html 标签中都有一个 style 样式属性, 该属性的值就是 css 代码.
- 格式: style="键:值; 键:值"
- 属性与属性之间用分号隔开, 属性与属性值之间用冒号连接
- style 标签的方式
- 一般都定义在 head 标签中
- style 属性的方式
// CSS 和 html 属性结合的四种方式:
// 方式一: style 属性的方式
<div style="color:#FF0000; background-color:#0066FF">这是一个 div 区域</div>
// 方式二: style 标签的方式
<html>
<head>
<style type="text/css">
div{
background-color: #000000;
color: #FFFFFF;
}
</style>
</head>
<body>
<div>这是一个 div 区域</div>
<div>这是一个 div 区域</div>
<span>span 区域1</span>
</body>
</html>
// 方式三: @import 方式引入 .css 文件
<html>
<head>
<style type="text/css">
@import url(css 文件地址)
</style>
</head>
<body>
<div>这是一个 div 区域</div>
<div>这是一个 div 区域</div>
<span>span 区域1</span>
</body>
</html>
// 方式四: link 连接的方式
<html>
<head>
<link rel="stylesheet" href="css 文件地址" type="text/css" />
</head>
<body>
<div>这是一个 div 区域</div>
<div>这是一个 div 区域</div>
<span>span 区域1</span>
</body>
</html>
选择器
- 就是指定 CSS 要作用的标签, 那个标签名就是选择器. 意为: 选择哪个容器
- 选择器共有三种:
- html 标签名选择器. 使用的就是 html 的标签名, 例如,
div, span, p - class 选择器, 使用的是标签中 class 属性
- id 选择器, 使用的是标签中 id 属性
- 备注: 多个标签的 class 属性值可以相同, 而 id 值在页面中是唯一的
- html 标签名选择器. 使用的就是 html 的标签名, 例如,
- 样式优先级: 标签名选择器 < class 选择器 < id 选择器 < style 属性
// 示例: 选择器的使用
<html>
<head>
<style type="text/css">
// html 标签名选择器
div{
background-color: #0099FF;
color: #FFFFFF;
}
// class 选择器
// 可以理解为: div 的名字叫做 haha 的 class 选择器
div.haha{
background-color:#FFFF33;
color:#00CC00;
}
// 所有类名叫做 haha 的选择器
.haha{
background-colr:#FFFF33;
color:#00CC00;
}
// 样式已经定义好, 但是网页中还未调用
// 预定义样式, 可以实现动态的加载.
.hehe{
background-color: #0000EE;
color: #0000FF;
}
// id 选择器
div#qq{
background-color: #FFFF00;
color: #FF0000;
}
</style>
</head>
<body>
<div id="qq">这是一个 div 区域</div>
<div class="haha">这是一个 div 区域</div>
<span>span 区域1</span>
</body>
</html>
扩展选择器
- 关联选择器 : 选择器中的选择器
- 组合选择器 : 对多种选择器进行相同样式的定义
- 伪元素选择器 : 就是在 html 中预先定义好的一些选择器
- 格式: 标签名: 伪元素或者 类名: 伪选择器
- 如超链接状态: 未访问, 悬停, 点击效果, 访问后效果
- 段落: p:first-line: 段落的第一行; p:first-letter: 段落中的第一个字母
- :focus 具有焦点的元素
// 示例:关联选择器
<html>
<head>
// span 中的 b 标签
span b{
background-color: #0099FF;
color: #FFFFFF;
}
</head>
<body>
<div>这是一个 div 区域</div>
<div>这是一个 div 区域</div>
<span>CSS 可以静态地<b>修饰网页</b></span>
</body>
</html>
// 示例: 组合选择器
<html>
<head>
// 多个选择器, 使用逗号分隔
div,p{
background-color: #000000;
color: #CC0000;
}
</head>
<body>
<div>这是一个 div 区域</div>
<div>这是一个 div 区域</div>
<p>
CSS提供了丰富的文档样式外观，以及设置文本和
背景属性的能力；允许为任何元素创建边框.
</p>
</body>
</html>
// 示例: 伪元素选择器
// 如超链接的状态: 未访问(a:link) 悬停(a:hover) 点击效果(a:active) 访问后效果(a:visited)
// 使用顺序: L V H A
<html>
<head>
// 未访问
a:link{
background-color: #0066FF;
color:#FFFFFF;
text-decoration: none; // 去除超链接中的下划线
font-size: 18px;
}
// 鼠标悬停
a:hover{
background-color: #FFFFFF;
color: #FF0000;
font-size:24px;
}
// 点击效果
a:active{
background-color:#000000;
color:#FFFFFF;
fong-size:36;
}
// 访问后效果
a:visited{
background-color:#FFFF99;
color:#000000;
text-decoration:line-through;
}
// 焦点
input:focus{
background-color:#0099FF;
}
</head>
<body>
<a href="http://www.cnblogs.com/linkworld/" target="_blank"></a>
<input type="text"/>
</body>
</html>
// html+css 综合应用
<html>
<head>
<style type="text/css">
// 设置表格样式
table{
border-bottom:#00cc00 double 3px;
border-left:#ff0000 solid 3px;
border-right:#ffff00 dashed 3px;
border-top:#00cc00 groove 3px;
width:500px;
}
// 设置表格中的单元格
table td{
border:#00ccff dotted 1px;
padding:20px;
}
// 设置 input 格式
input {
border:none;
border-bottom:#000000 solid 3px;
}
</style>
</head>
<body>
<table>
<tr>
<td>单元格一</td>
<td>单元格一</td>
</tr>
<tr>
<td>单元格二</td>
<td>单元格二</td>
</tr>
</table>
<br/>
<hr/>
姓名:<input type="text"/>成绩<input type="text"/>
</body>
</html>
盒子模型
- 布局方式: div + css
- 盒子模型: content, padding, border, margin
- CSS 布局方式
- 漂浮 float : none, left, right
- 漂浮清除 clear :
- none(默认值, 允许两边都可以有浮动对象)
- left(不允许左边有浮动对象), right, both
- 定位 position : static(默认值), absolute, relative
// 示例一: 漂浮
<html>
<head>
<style type="text/css">
div{
border:#0099ff solid 1px;
height:100px;
width:200px;
}
#div_1{
background-color:#FF9900;
float:left;
}
#div_2{
background-color:#00ccff;
float:left;
}
#div_3{
background-color:#33ff00;
clear:left;
}
</style>
</head>
<body>
<div id="div_1">
这是第一个盒子
</div>
<div id="div_2">
这是第二个盒子
</div>
<div id="div_3">
这是第三个盒子
</div>
</body>
</html>
// 示例二: 定位 position
// absolute: 绝对定位, 从当前文档流中拖出,漂浮在空中.
// 使用 left, right, top, bottom 等属性相对于其最接近的一个
// 具有定位设置的父对象进行绝对定位. 如果不存在这样的父对象, 则依据 body 对象.
// relative: 不拖出文档流.
<html>
<head>
<style type="text/css">
div{
border:#0099ff solid 1px;
height:100px;
width:200px;
}
#div_1{
background-color:#FF9900;
position:absolute;
}
#div_2{
background-color:#00ccff;
width: 300px;
}
#div_3{
background-color:#33ff00;
}
</style>
</head>
<body>
<div id="div_1">
这是第一个盒子
</div>
<div id="div_2">
这是第二个盒子
</div>
<div id="div_3">
这是第三个盒子
</div>
</body>
</html>
图像签名
<html>
<head>
<style type="text/css">
#text{
font-family:Courier New;
font-size:24px;
color:#0000EE;
position:absolute;
top:220px;
left:10px;
}
#imgtext{
border:#ff6600 dotted 1px;
width:500px;
position:absolute;
}
</style>
</head>
<body>
// 将图片和文字作为整体封装
<div id="imgtext">
// 使用 div 将图片封装起来
<div id="img">
<img src="1.jpg" height="300" width="500"/>
</div>
// 使用 div 将文字封装起来
<div id="text">
乐在其中
</div>
</div>
</body>
</html>
**参考资料**
- [JavaSE 基础视频(毕向东)](https://www.bilibili.com/video/av3137994/#page=1)
- [CSS2 参考手册](http://tool.oschina.net/apidocs/apidoc?api=css2)
CSS 快速入门的更多相关文章
- CSS快速入门（四）
目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...
- Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...
- Html与CSS快速入门02-HTML基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...
- Html与CSS快速入门03-CSS基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...
- Html与CSS快速入门04-进阶应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...
- HTML/CSS快速入门
Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...
- #001 CSS快速入门讲解
CSS入门讲解 HTML人+CSS衣服+JS动作=>DHTML CSS: 层叠样式表 CSS2.0 和 CSS3.0 版本,目前学习CSS2, CSS3只是多了一些样式出来而已 CSS 干啥用的 ...
- CSS快速入门例子
CSS入门应用 01-结合方式01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- CSS快速入门基础篇，让你快速上手（附带代码案例）
1.什么是CSS 学习思路 CSS是什么 怎么去用CSS(快速上手) CSS选择器(难点也是重点) 网页美化(文字,阴影,超链接,列表,渐变等) 盒子模型 浮动 定位 网页动画(特效效果) 项目格式: ...
- 02-03 CSS快速入门
css四种引入方式:test.html: p{ color: gold; font-size: 20px; } title.html: <!DOCTYPE html> <html l ...
随机推荐
- .Net MVC ViewBag
ViewBag用来做视图的值绑定,我不清楚是不是这么称呼.之前看过安卓的值绑定做法,mvc直接动态类型,瞬间逼格满满 Controller: public class HomeController : ...
- 将json数组字符串转换为json数组对象(值是json对象的数组)
var str1 ='[{"name":"kevin","age":18},{"name":"rose&quo ...
- Android App常规测试内容
转自:https://mp.weixin.qq.com/s?__biz=MzU0NjcyNDg3Mw==&mid=2247484053&idx=1&sn=116fe8c7eed ...
- linux之mail
使用该命令自动把系统发给root用户的邮件发送到自己的邮箱 #vi /etc/aliases # 编辑该文件并在最后一行添加即可,如图所示
- Linux多条指令之间;和&&
Linux 中经常使用到一个命令,如 make && make install,这里也可以使用 make ; make install,那么在 Linux 中执行命令 ; 和 & ...
- 微信小程序2 - 扩展Page参数
官方默认的Page初始代码为 var option = { /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 * */ onLoad: function ...
- 一个共通的viewModel搞定所有的分页查询一览及数据导出（easyui + knockoutjs + mvc4.0)
前言 大家看标题就明白了我想写什么了,在做企业信息化系统中可能大家写的最多的一种页面就是查询页面了.其实每个查询页面,除了条件不太一样,数据不太一样,其它的其实都差不多.所以我就想提取一些共通的东西出 ...
- ubuntu 14.04 中安装R和Rstudio
1. 安装R 1.1 首先添加镜像源 sudo gedit /etc/apt/sources.list # 加入新镜像源: deb http://cran.rstudio.com/bin/linux/ ...
- 什么是 AJAX ？
什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...
- noip模拟题题解集
最近做模拟题看到一些好的题及题解. 升格思想: 核电站问题 一个核电站有N个放核物质的坑,坑排列在一条直线上.如果连续M个坑中放入核物质,则会发生爆炸,于是,在某些坑中可能不放核物质. 任务:对于给定 ...