Css+Html
CSS样式
<style type="text/css">
tt.tt1 {
<style type="text/css">
p {
background-color:yellow;
font-size:xx-small;
}
</style> <p style="background:red;font-size:xx-large">今天天气好晴朗，处处好风光</p>
<p>今天天气好晴朗，处处好风光</p>
<p>今天天气好晴朗，处处好风光</p>
<p>今天天气好晴朗，处处好风光</p> <tt>床前明月光，疑是地上霜。举头望明月，我叫郭德纲</tt>
样式2 . 是Class选择器
background-color:red;
}
tt.tt2 {
font-size:xx-large;
}
tt.tt3 {
background-color:red;
}
</style>
<body>
<tt class="tt1">床前明月光，疑是地上霜。举头望明月，我叫郭德纲</tt>
<tt class="tt1">床前明月光，疑是地上霜。举头望明月，我叫郭德纲</tt>
<tt class="tt2">床前明月光，疑是地上霜。举头望明月，我叫郭德纲</tt>
<tt class="tt3">床前明月光，疑是地上霜。举头望明月，我叫郭德纲</tt>
</body>
样式3
<style type="text/css">
p { background-color:yellow;
}
tt { background-color:green;
}
</style> <p>今天天气好晴朗，处处好风光</p>
<p>今天天气好晴朗，处处好风光</p>
<p>今天天气好晴朗，处处好风光</p>
<p>今天天气好晴朗，处处好风光</p>
<tt>床前明月光，疑是地上霜。举头望明月，我叫郭德纲</tt>
I的选择器 #是ID 选择器
<style type="text/css">
.p1 {
background-color:red;
}
#p2 {
background-color:green;
}
#p3 {
background-color:blue;
}
#p4 {
background-color:black;
} <p class="p1">今天天气好晴朗</p>
<p class="p1">今天天气好晴朗</p>
<p id="p2">今天天气好晴朗</p>
<p id="p3">今天天气好晴朗</p>
<p id="p4">今天天气好晴朗</p>
关联选择器
<style type="text/css">
p em {
background-color:red;
}
</style> <p><em>今天天气好晴朗</em></p>
伪元素选择器
a:link {color: #FF0000} /* 未访问时的状态 */ text
a:visited {color: #00FF00} /* 已访问过的状态 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上时的状态 */
a:active {color: #0000FF} /* 鼠标按下去时的状态 */
first-letter 伪元素,匹配了第一个字母(
P::first-line {第一行
<style type="text/css">
A:active {
text-decoration:none;
}
A:hover {
font-size:xx-large;
}
P::first-letter { font-size:xx-small;
}
P::first-line { font-size:xx-large;
}
</style>
<p>晋太元中，武陵人捕鱼为业，缘溪行，绕路之远近，忽逢桃花林，夹岸数百步<br/>
晋太元中，武陵人捕鱼为业，缘溪行，绕路之远近，忽逢桃花林，夹岸数百步
</p>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</
组合选择器
<style type="text/css">
h1, h2, h3, h4, h5, h6, td {
background-color:red;
}
<h1>我是一个粉刷匠</h1>
<h2>我是一个粉刷匠</h2>
<h3>我是一个粉刷匠</h3>
<h4>我是一个粉刷匠</h4>
<h5>我是一个粉刷匠</h5>
<h6>我是一个粉刷匠</h6>
Css+Html的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- Python实现排序算法之快速排序
Python实现排序算法:快速排序.冒泡排序.插入排序.选择排序.堆排序.归并排序和希尔排序 Python实现快速排序 原理 首先选取任意一个数据(通常选取数组的第一个数)作为关键数据,然后将所有比它 ...
- 【Lintcode】069.Binary Tree Level Order Traversal
题目: Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to ri ...
- CF1076E：Vasya and a Tree
浅谈树状数组与线段树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:https://codeforces.com/problemset/prob ...
- Mysql常用命令行大全（二）
#登录数据库mysql -hlocalhost -uroot -p;#修改密码mysqladmin -uroot -pold password new; #显示数据库show databases;#显 ...
- Jmeter-调整占用内存解决内存溢出
启动jmeter.从启动jmeter的输出就可以看到,Modify HEAP “” in the jmeter batch file -Xmx512m -Xms512m -Xms是初始内存,-X ...
- JS---分解质因数
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- SQL Server(三)
一.数据库操作 create database 数据库名称 ——创建drop database 数据库名称 ——删除use 数据库名称 ——使用go 两条SQL语句之间分隔 二.表的操作 create ...
- 利用URL重写隐藏复杂的URL
第一步:模拟映射页面 我们想在一个页面上点击guid.html链接,跳转到比较复杂URL的guid_{492f3e0b-848e-11da-9550-00e08161165f}.html页面.即定义一 ...
- 核心容器的两个接口（ApplicationContext和BeanFactory）引发出的问题
BeanFactory 才是Spring 容器中的顶层接口.ApplicationContext 是它的子接口. ApplicationContext 它在构建核心容器时, 创建对象采取的策略是采用立 ...
- http://blog.csdn.net/wujunokay/article/details/44783383
最近2周面试了一些人,有一些感触. 有的人工作几年,面向对象有几大特性.各特性之间的区别也不清楚:有的人,问他时,他说,这个简单,只是我不会,这些理论的东西在平时工作中,用的少:有的人,不清楚重载和重 ...