码迷,mamicode.com
首页 > Web开发 > 详细

2、CSS选择器、单位、文本

时间:2020-01-06 13:00:15      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:梯度   html   集合   属性选择器   分辨率   参考   字体   特殊性   伪类   

一、HTML关联样式方式

(1)link标签引入
(2)style标签里编写
(3)在style里用@import引入
(4)内联样式——在标签的style属性里编写

二、选择器

1、类型

(1)元素选择器(可分组)

如:div,img,h1{color:red;}

(2)类选择器(.)

按照class属性选择,如.btn{...}

(3)ID选择器(#)

按照id属性选择,如#first{...}

(4)属性选择器([ ])

  • 按照元素的某个属性选择,如h1[class]{...};
  • 或具体属性值,如h1[class="aside"];
  • 或属性中的子字符串,如h1[class="asi"];

(5)后代选择器

按元素的后代元素选择,如h1 em{...}

(6)选择子元素(>)

h1>strong{...}

(7)选择相邻兄弟元素(+)

选择紧接着某个元素的后一个元素,如h1+p{...}

(8)伪类选择器(:)

  • 链接访问后a:visited{...};
  • 第一个子元素p:first-child{...}(p集合的第一个)

(9)伪元素选择器

??h2:before{...}

2、优先级

特殊性

  • 1,0,0,0——内联样式
  • 0,1,0,0——ID选择器
  • 0,0,1,0——类、属性或伪类选择器
  • 0,0,0,1——元素、伪元素选择器
  • 0,0,0,0(无特殊性)——结合符(,)、通配符(*)选择器

(1)特殊性值可累加,越靠左特殊性越高,越优先。
(2)若特殊性相同,则写在后面的优先。
(3)样式中带有!important标志的优先性最高。
优先级
!important > 内联样式 > ID选择器 > 类、属性、伪类选择器 > 结合符、通配符

三、值和单位

1、颜色表示方法

  • 命名颜色
  • rgb颜色
  • 16进制颜色:#FF0000
  • rgba

2、单位

(1)绝对长度

  • cm——厘米
  • mm——毫米
  • pt——点。标准印刷单位
  • pc——12点

(2)相对长度

  • em——相对于父元素字体大小
  • rem——相对于根元素(html)的字体大小
  • px——像素。取决于设备的分辨率。

3、其他单位

  • deg——度
  • grad——梯度
  • rad——幅度
  • s——秒
  • ms——毫米

四、文本属性

  • font-size——就是字体高度
  • line-height——行框高
  • vertical-align——垂直对齐方式

以上属性参考下图:

技术图片

2、CSS选择器、单位、文本

标签:梯度   html   集合   属性选择器   分辨率   参考   字体   特殊性   伪类   

原文地址:https://www.cnblogs.com/chd1994/p/12155607.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!