(CSS)CSS基础(元素,选择器,基本特点)

最近要重新好好看书,扎实好基础,对于CSS一直处于一种捉摸不透的感觉,最近看书,感觉受益匪浅,所以就在github上开了一个仓库,专门记录自己的学习补充过程。

我的CSS记录github地址,喜欢就关注哈。
先扔一张图出来:

CSS权重分析图

)

CSS元素

CSS元素按照HTML元素,可以分为两种,

  • 块元素
  • 行元素(行内元素和行内块元素)

按照元素本身的特点来说,可以分为以下两种:

  • 替换元素
  • 非替换元素

替换元素和非替换元素

替换元素

是元素中内容可以被替换的元素,浏览器根据元素的标签和属性来决定元素的内容。

img元素input 元素,都是替换元素,因为 img 的内容是由图片的链接src决定的,而input 显示为什么样子,也是由其 type 值决定的。

<img src='test.url'>,<input type='radio'>, 这两个不是闭合标签,也没有由用户自定义填充的内容可言。

非替换元素

指的是内容不可以被替换的元素,一旦内容被用户填充了之后,就不可以被其他元素替代了。

<p>哈哈哈哈</p> 其中p标签内的内容已经确定了.也不能被替换了。

行元素和块元素

行元素

在文档中没有独占一行。一般的行内元素有span, a, strong都是典型的行内元素,当然,上面所提及到的替换元素也几乎都是行内元素。

块元素

在文档中独占一行,其左右没有别的元素。div, p, li``````h都是典型的块元素。.

当然,CSS中允许你通过display去改变一个元素的显示方式。

注意事项:行内元素可以作为块元素的后代,但是块元素不能作为行元素的后代。试想一想,

<span><div>这样子做肯定蜜汁尴尬</div></span>

这样肯定很尴尬。最好不要这样子做。

🤨 常见问题解释与区分点:

块元素因为自身就是独占一行的元素,所以可以给其设置widthheight
行内元素不能给其设置widthheight,只有通过设置display:block或者display:inline-block;才能设置。

替换元素如img,input其实是行内块元素,所以可以给其设置widthheight

2 🙃 为什么img标签的底部会有空白?

这个问题主要是因为图片是行内元素,行内元素是基于baseline去对其的,而其他如元素内的字体是以最低的线去对齐的,所以会有这种空隙问题。
可以使用vertical-align:middle来解决。

参考链接:参考链接,如何解决img下的空白问题

css选择器

  • id选择器 #test
  • class选择器 .test
  • 元素选择器 p
  • 属性选择器
    • p[attr='test'] 属性attr等于test的p标签
    • p[attr^='test'] 属性ttr是以test开头的p标签
    • p[attr$='test'] 属性attr是以test结尾的p标签
    • p[attr~='test'] 属性attr是包含有test的p标签
    • p[attr*='test'] 属性值中包含有test子串的p标签。

(属性选择器对于一些元素的选择很有帮助,容易混淆的是p[attr~='test']和p[attr='test'])。
举个例子,对于元素<div test-id='yesa no'></div>
其中div[test-id
='yes'] 即可以选择到元素,因为这个div元素的test-id属性包含有yes这个子串。而如果使用div[test-id~='yesa']才能获取到子串。

我的理解如下:

p[attr~='test']是部分属性值选择器,
p[attr*='test'] 是属性子串匹配选择器。

  • 后代选择器 p a
  • 子选择器 p > a
  • 相邻兄弟选择器 p + a
  • 兄弟选择器 p ~ a
  • 伪元素选择器 :first-letter ::before ::after
  • 伪类选择器 :first-line
    CSS3新增的一些选择器
  • first-child: 作为某一个父元素的第一个子元素
  • last-child : 作为某一个父元素的最后一个子元素
  • nth-child(n): 作为一个父元素的第n个子元素
  • nth-child(odd): 作为某一个父元素的奇数子元素

组合选择器:

如果需要同时对多个选择器设置相同的样式,可以使用组合选择器。如p,a,div.

多类选择器:

如果需要匹配同时拥有多个类的元素,就需要用到多类选择器。如 .test.success可以匹配以下元素。

<div class='test success'></div>

但是不能匹配<div class='test'></div>

相信我,CSS的选择器使用得当,真的可以很强大。后续会补上例子。

CSS的三大特点

  • 特殊性
  • 继承性
  • 层叠性

特殊性:

既然前面提到了那么多的选择器,那么要匹配到一个元素的方法其实有很多种,如果有多个选择器与元素匹配了,而且其内部的样式声明还冲突了,那么元素应该选择哪个选择器的匹配样式就显得非常重要。考虑如下

现在有一元素:
<div class='test' id='test'><h1>我是为测试而生的</h1></div>

以下由三个样式设置:
.test h1{color:red;}

#test h1{color:pink}

h1{color:yellow;}

那么,特殊性的重要性就在这里体现了,只有知道特殊性才能知道最终h1会显示什么颜色。

当然,后面会提及到继承样式,这里需要说明一点,继承的值根本没有特殊性,设置连0特殊性都没有。考虑以下情况:

*{color:red;}

h1#page{color:pink;}

<h1 id='page'>哈哈哈<em>虎虎虎</em></h1>

最终,em标签内的内容会显示为red颜色,因为通配符的特殊性为0,而从h1标签继承下来的颜色属性值是无特殊性的。

继承值没有特殊性这一点非常重要,因为浏览器会默认给一些元素设置一些样式属性,而如果仅仅想要通过继承属性去覆盖原有的样式,是不可能的。

例子如下:

<div class='test2'>
我是黑色的
<a href="">嘿嘿嘿,我还是蓝色的</a>
</div>

.test2 {
  color: black;
}

最终.test2内部的a标签还是显示蓝色,因为浏览器给其设定的默认样式颜色就是蓝色。而继承的样式是没有特殊性的。

继承性:

基于继承机制,样式不仅会应用到指定的元素,还会应用到它的后代元素。这个值会沿着树向下传播到后代元素,并一直持续,直到再没有更多的后台元素继承这个值为止。

继承的属性值有:

color
font
font-size
font-weight
font-style
text-indent
text-align
line-height
word-spacing
letter-spacing
text-transform

不能继承的属性值有:

border
padding
margin
background
verticle-align
text-shadow
white-space
display

大体上涉及到字体的都有继承性质。涉及到排版的和展示方式的就不能继承。

层叠性:

"层叠样式表"所提到的就是,CSS会样式层叠在一起,这是通过结合特殊性和继承做到的。总结下来就是下面这个图。

一般都是按权重,来源,特殊性和顺序来排序的。简单地说明一下,一般会先从权重来判断,就是先判断属性值有没有使用!important,有则优先级最高了。如果都有使用或者都没有使用的话,就要通过判断样式来源来决定其优先级。

再接着就是按照特殊性来判断,参照下面的特殊性图,分析特殊性。
如果特殊性权重都一样的话,再考虑样式的引入顺序。

来源的权重大小:

  • 1 读者的重要声明
  • 2 创作人员的重要声明
  • 3 创作人员的正常声明
  • 4 读者的正常声明
  • 5 用户代理说明

我总结了基本的判断顺序脑图,如下所示,希望可以帮到你。


CSS权重分析图

)

推荐阅读更多精彩内容