9.16选择器,文本属性

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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值