9.16选择器,文本属性

来源:互联网 发布:ant for mac 下载 编辑:程序博客网 时间:2024/05/19 00:56

CSS选择器

元素选择器

元素{属性,值;}

类别选择器

.class命名{属性,值;}

ID选择器

#ID命名{属性,值;}

伪类选择器

:link{}   ----未访问的链接选择器:visited{}----已访问的链接选择器:hover{}----鼠标移至的链接选择器:active{}----被点击的链接选择器:foucs{}----获得焦点链接选择器:first child{}----向文本的第一个子元素添加特殊样式:lang{}----向带有指定 lang 属性的元素添加样式。

伪元素

:first-letter{} -----向文本的第一个字母添加特殊样式。 :first-line{} -----向文本的首行添加特殊样式。  :before{} -----在元素之前添加内容。 :after{}---- 在元素之后添加内容。 

选择器补充

交集选择器

例如:p.p1{} p.pi.first-child{}--------表示的是选中的区域既满足是p区域的,又是p1区域的

并集选择器

例如:ul,ol,li,p{}--------表示的是选中的区域满足ul,ol,li,p的所有选项 *{}------表示的满足body内所有区域内容

其他:

[]{}----属性选择器  [attribute=value] 用于选取带有指定属性和值的元素。 例如:[attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。

选择器作用优先级(熟练掌握)

选择器类型相同时

内联>内部>外部(link)

不同的选择器

!important>内联>ID>伪元素>伪类>类别>元素

选择器混合时

!important  值  10000   内联      值  1000   ID       值  100   类别      值  10   元素      值  1

举例:

.c1{color:red} .c2{color:blue} ................................. <p class=“red blue”>

下面class的值无影响,主要看上面,c2覆盖c1从而显示c2的命值blue

文本属性

color 设置文本颜色

direction 设置文本方向

ltr 默认。文本方向从左到右。 rtl 文本方向从右到左 

line-height 设置行高

设置数值 百分比

letter-spacing 设置字符间距

text-align 对齐元素中的文本

left 把文本排列到左边 right 把文本排列到右边 center 把文本排列到中间 justify 实现两端对齐文本效果

text-decoration 向文本添加修饰。

underline 定义文本下的一条线 overline 定义文本上的一条线line-through 定义穿过文本下的一条线 blink 定义闪烁的文本 

text-indent 缩进元素中文本的首行。

设置数值 百分比  rem/em

text-transform 控制元素中的字母。

capitalize 每个单词以大写字母开头uppercase 仅有大写字母 lowercase 仅有小写字母 

white-space 设置元素中空白的处理方式。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 pre-wrap 保留空白符序列,但是正常地进行换行。 pre-line 合并空白符序列,但是保留换行符。 

word-spacing 设置字间距。

字体

font 简写属性。作用是把所有针对字体的属性设置在一个声明中

必须按照以下顺序排列:font-style font-variant font-weight font-size/line-height font-family 

font-family 设置字体系列

黑体,楷体等

font-size 设置字体的尺寸。

数值, smaler larger等

font-style 设置字体风格。

倾斜 italic/oblique

font-variant 以小型大写字体或者正常字体显示文本。

small-caps 小型的大写字母/normal 

font-weight 设置字体的粗细。

100-900的数值/bolder/bold/lighter
0 0