CSS基础学习手记

--------------------------------------------------------------------------------------

选择器

--------------------------------------------------------------------------------------

标签选择器

<p>Hello,World!</p>

ID选择器

<div id="topDiv">Hello,world</div>

类选择器

<div class="topDiv">Hello,world</div>

---------------------------------------------------------------------------------------

时间： 2024-10-25 18:37:47

CSS基础学习手记的相关文章

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.

HTML&CSS基础学习笔记13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: 1 2 3 4 5 <ul>     <li></li>     <li></li>     ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请

CSS基础学习十四：盒子模型补充之display属性设置

我在CSS基础学习十三:盒子模型的i博文只是阐释了CSS盒子模型,并没有过多的使用实例来演示.这篇博文 就来做一些盒子模型知识的补充.这一部分对于网页总体布局还是蛮重要的,过去大多数使用HTML中的table元素和 框架标签来进行网页的整体布局,现在我们使用最多的是DIV+CSS网页布局.所以一定要掌握好盒子模型,记住 content,border,padding和margin各自在盒子中的作用和使用方式. 先来看一个完整元素的盒子模型实例: <!DOCTYPE html PUBLIC "

CSS基础学习十五：盒子模型补充之外边距合并

今天继续接着CSS盒子模型补充,CSS基础学习十三:盒子模型和CSS基础学习十四:盒子模型补充之display属 性设置都是介绍了盒子模型中的内容概括.开始今天的主题:外边距合并. 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合 并的外边距的高度中的较大者. (1)外边距合并 外边距合并叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,外 边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的

CSS基础学习十一：选择器的优先级

在CSS基础学习的篇章中,从第四篇博客开始说选择器,到昨天基本已经说完了.今天我们总结一下,选择器作 用:告知浏览器需要设置哪个dom元素的样式.最后来说说选择器一个重要的问题,选择器的优先级.判断优先级的 方法就是尝试!!! 一简单选择器的优先级 简单的选择器包括我们在第四篇,第五篇,第六篇博客的元素选择器(标签选择器),类选择器和id选择器. 我们来试验: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

HTML&CSS基础学习笔记15-合并单元格

合并单元格 之前的文章中,我们已经能够创建一个简单地表格了,如果我们需要把横向的某两个相邻单元格<td>或者纵向的某两个相邻单元格<td>合并,我们该怎么做呢?我们要知道的知识点如下: 1.标签<td>的[colspan]属性规定单元格可横跨的列数,即横向合并的单元格数: 2.标签<td>的[rowspan] 属性规定单元格可横跨的行数,即纵向合并的单元格数: 3.这2个标签也可以同时使用. 样式示例: 现在就来试试合并单元格吧: <!DOCTYPE 

HTML&CSS基础学习笔记7-高亮文本及组合使用

HTML提供了<mark>标签可以让你的文本高亮,这样看起来更加醒目.<mark>标签内的文本会呈现特殊的样式,它和<em>,<strong>一样也是一个带有语义的标签. 代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高亮文本</title><

HTML&CSS基础学习笔记4-定义文档类型

定义HTML的文档类型 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面.这就是 <!DOCTYPE> 的用处. <!DOCTYPE> 声明不是 HTML 标签,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令.是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用置标语言解析器,它应该使用什么样的文档

HTML&CSS基础学习笔记14—有序列表及列表嵌套

我们上篇讲到了无序列表,那么今天就来看看有序列表和他们的组合嵌套使用吧. 有序列表 现在我们要做那堆杂事了,但是发现这么多杂事,先做哪个好呢?于是我们给这堆杂事弄个优先级排序,让我们能够按照顺序做下去.HTML里用<ol>标签来表示有序列表,<ol>标签的列表项依然是用<li>标签表示. 它的代码模板是这样的: <span style="font-family:Microsoft YaHei;"><ol>       <