crrntld

css选择器的运用技巧andhtml文本标签以及样式的设置

选择器

选择器会告诉浏览器：网页上的哪些元素需要设置什么样的格式

1、元素选择器：根据标签的名字来从页面中选取指定的元素

语法：标签名{ }

2.类选择器：根据元素的class属性值选取元素

语法：.className{ }

3.ID选择器：根据元素的id属性值选取元素

语法：#id{ }

4、复合选择器：可以同时使用多个选择器， 这样可以选择同时满足多个选择器的元素。

例如div.box1会选中页面中具有box1这个
class的div元素。

5、群组选择器：可以同时使用多个选择器， 多个选择器将被同时应用指定的样式。

比如p,.hello,#box会同时选中页面中p元素，class为hello的元素，id为box的元素。

6、 通用选择器：可以同时选中页面中的所有元素

语法：*{ }

7、后代选择器：可以根据标签的关系，为处在 元素内部的代元素设置样式。

语法：祖先元素 后代元素 后代元素

8.子元素选择器
子元素选择器可以给另一个元素的子元素 设置样式。

语法：父元素 > 子元素{ }

比如body > h1将选择body子标签中的所 有h1标签。

9、兄弟选择器
除了根据祖先父子关系，还可以根据兄弟 关系查找元素。

语法:
查找后边一个兄弟元素
兄弟元素 + 兄弟元素{}
查找后边所有的兄弟元素
兄弟元素 ~ 兄弟元素{}

标签之间的关系

祖先元素
直接或间接包含后代元素的元素。
后代元素
直接或间接被祖先元素包含的元素。
父元素
直接包含子元素的元素。
子元素
直接被父元素包含的元素。
兄弟元素
拥有相同父元素的元素。

给链接定义样式

有四个伪类可以让你根据访问者与该链接的交 互方式，将链接设置成4种不同的状态。

正常链接
a:link
访问过的链接
a:visited（只能定义字体颜色）
鼠标滑过的链接
a:hover
正在点击的链接
a:active

给的段落定义样式

首字母
:first-letter
首行
:first-line

继承

就像父亲的财产会遗传给儿子一样，在CSS中祖先元素的样式 同样也会被子元素继承。

继承是指应用在一个标签上的那些CSS样式会同时被应用到其 内嵌标签上。

比如为父元素设置了字体颜色，子元素也会应用上相同的颜色。

文本标签

1.<em>和<strong>
em标签用于表示一段内容中的着重点。
strong标签用于表示一个内容的重要性。这两个标签可以单独使用，也可以一起使用。
通常em显示为斜体，而strong显示为粗体。

2.<i>和<b>
i标签会使文字变成斜体。b标签会使文字变成粗体。

这两个标签和em和strong类似，但是这两 个标签没有语义。
所以根据html5标准，当我们只想设置文本特殊显示，而不需要强调内容时就可以使 用i和b标签。

3、 <small>

small标签表示细则一类的旁注，通常包括 免责声明、注意事项、法律限制、版权信 息等。浏览器在显示small标签时会显示一个比父 元素小的字号。

4.<cite>
使用cite标签可以指明对某内容的引用或参考。例如，戏剧、文章或图书的标题，歌 曲、电影、照片或雕塑的名称等。
<p>
<cite>《七龙珠》</cite>讲的是召唤神龙的故事。
</p>

5、<blockquote>和<q>
blockquote和q表示标记引用的文本。blockquote用于长引用，q用于短引用。
在两个标签中还可以使用cite属性来表示引 用的地址。

6、sup和sub用于定义上标和下标。

上标主要用于表示类似于103中的3。
下标则用于表示类似余H2O中的2。

7.<ins>和<del>
ins表示插入的内容，显示时通常会加上下划线。
del表示删除的内容，显示时通常会加上删除线。

8.<code>和<pre>
如果你的内容包含代码示例或文件名，就 可以使用code元素。
pre元素表示的是预格式化文本，可以使用。pre包住code来表示一段代码。

列表

使用ol和li来创建一个有序列表。
使用ul和li来创建一个无序列表。
使用dl、dd、dt来创建一个定义列表

文本格式化

1、单位

px
如果我们将一个图片放大的话，我们会发现一个图片 是有一个一个的小色块构成的，这一个小色块就是一 个像素，也就是1px，对于不同的显示器来说一个像素 的大小是不同的。
百分比
也可以使用一个百分数来表示一个大小，百分比是相 对于父元素来说的，如果父元素使用的大小是16px，则100%就是16px，200%就是32px。
2、em
em和百分比类似，是相对于font-size说的 1em = 1font-size

3、颜色
在CSS中可以直接使用颜色的关键字来代表 一种颜色。
十六进制颜色
用的最多的颜色是十六进制符号。一个颜色值， 比如：#6600FF实际上包含了三组十六进制的 数字。
4、RGB值
也可以使用计算机中常用的RGB值来表示 颜色。可以使用0~255的数值，也可以使 用0%~100%的百分比数。
– RGB(100%,0%,0%)
– RGB(0,255,0)
第一个数表示红色的浓度，第二个数表示 绿色浓度，第三个数表示蓝色的浓度。
RGBA
RGBA表示一个颜色和RGB类似，只不过比
RGB多了一个A（alpha）来表示透明度， 透明度需要一个0-1的值。0表示完全透明，1表示完全不透明。
– RGBA(255,100,5,0.5)

5、文字大小
font-size用来指定文字的大小。

例如：p{font-family:Arial}

字体分类
font-style用来指定文本的斜体。

指定斜体：font-style:italic
指定非斜体：font-style:normal

font-weight用来指定文本的粗体。

指定粗体：font-weight:bold
指定非粗体：font-weight:normal

小型大写字母
font-variant属性可以将字母类型设置为小 型大写。在该样式中，字母看起来像是稍 微缩小了尺寸的大写字母。

font-variant:small-caps

6.行间距
ine-height用于设置行高，行高越大则行 间距越大。

行间距 = line-height – font-size

7、大写化
text-transform样式用于将元素中的字母全都变成大写。

大写：text-transform:uppercase
小写：text-tansform:lowercase
首字母大写：text-transform:capitalize
正常：text-transform:none

8.字母间距和单词间距

letter-spacing用来设置字符之间的间距。
word-spacing用来设置单词之间的间距。

这两个属性都可以直接指定一个长度或百 分数作为值。正数代表的是增加距离，而 负数代表减少距离。

9.对齐文本
text-align用于设置文本的对齐方式。
可选值：

left：左对齐
right：右对齐
justify：两边对齐
center：居中对齐

10.首行缩进
text-indent用来设置首行缩进。
该样式需要指定一个长度，并且只对第一 行生效。