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的动 ...
随机推荐
- 7th
2017-2018-2 20179212<网络攻防技术>第7周作业 课本学习 Windows操作系统基本框架 1.windows基本结构分为运行于处理器特权模式的操作系统内核以及运行在处理 ...
- BZOJ1758：[WC2010]重建计划
浅谈树分治:https://www.cnblogs.com/AKMer/p/10014803.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem. ...
- poj2823Sliding Window——单调队列
题目:http://poj.org/problem?id=2823 单调队列模板. 代码如下: #include<iostream> #include<cstdio> usin ...
- KCF+Opencv3.0+Cmake+Win10 测试
配置 需要的文件下载 安装CMake,安装opencv3.0.0 在KCFcpp-master 目录下新建一个文件夹,命名为build 打开CMake-GUI配置如下: 点击Configure,编译器 ...
- warning: conflicting types for built-in function 'puts'
warning: conflicting types for built-in function 'puts' [编译器版本] arm-linux-gcc 3.4.1 [问题描述] 在做嵌入式底层开发 ...
- Java虚拟机学习 - 体系结构 内存模型（转载）
一:Java技术体系模块图 二:JVM内存区域模型 1.方法区 也称"永久代” .“非堆”, 它用于存储虚拟机加载的类信息.常量.静态变量.是各个线程共享的内存区域.默认最小值为16MB, ...
- 双击jar不能运行的解决方法
1.问题描述 使用eclipse导出jar.双击jar文件弹出一个内容为“a java exception has occurred”的错误警告提示! 但是在命令行用 java -jar Em ...
- day11会话管理
会话管理入门 2.1 生活中会话 我: 小张,你会跳小苹果码? 小张: 会,怎么了? 我: 公司年会上要表演节目,你教教我把 小张:没问题,一顿饭而已. 我: OK. ........ 在这次生活中的 ...
- Web 字体的选择和运用
首先来看一则设计师和前端小白的日常,这是使用 Mac OS 的设计师给的效果图 这是使用 Windows 开发的实际产品页面 我跟你们说,设定字体要按照基本法! (PS: 以上截图不代表网站真实面貌, ...
- 关于 == 和 equals() 的区别
对于正在学习java的,以及入行不久的小伙伴们,在面试中经常会被面试官问到 " == 和 equals() 的区别 ?"的问题,你是否回答好了呢? 示例一: //两个基本类型数据 ...