CSS样式表操作及选择器定义

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lx_ros/article/details/88938507

1.操作样式表

(1)html中引入css的三种方式:外部样式表嵌入式样式表内联样式表。首选外部样式表,引入的方式为<link rel="stylesheet" href="base.css" />,可以使用多个link标签,引入多个样式表。浏览器将其保存到了缓存中,只需一次加载。

(2)当且仅当style元素出现在link元素后面时,嵌入式样式表的样式才会覆盖外部样式表。

(3)内联样式的优先级高于其他所有样式。除非其他样式有!important

(4)使用了@import时,若引入的样式之后有与之冲突的样式时,则后出现的样式会覆盖这些引入的样式。

(5)可设置一个只用于特定输出的样式表,如只用于打印media="print",只用于在浏览器查看屏幕的media="screen"。在html文件中定义与媒体相关的样式表时,写为@media print {}

2.选择器的定义

(1)定义选择器的5个标准

  • 元素的类型和名称
  • 元素所在的上下文
  • 元素的类或ID
  • 元素的伪类或伪类
  • 元素是否有某些元素

为指出目标元素,可将上述标准任意组合。

(2)选择器的选择元素的常用方法

  • a[title]{...}指的是所有具有title属性的a元素。尽量避免使用ID选择器.

  • .architect p{}表示这个选择器会寻找任何作为architect类元素后代(无论是第几代)的所有p元素,空格必不可少。

  • .architect > p,按父元素选择要格式化的子元素,这个选择器仅选择architect类元素的子元素的p元素。

  • architect p+p,+是相邻同胞结合符只选择直接跟在同胞p元素之后的元素。h1~h2~是普通同胞结合符,会让任何属于同一父元素的同胞h1后面的h2元素显示指定的样式。

  • li:first-child{}选择父元素的地第一个子元素的li元素,借用:first-childlast-child伪类,选择第一个或最后一个子元素。伪类选择的是作为第一个或最后一个子元素的元素。

  • p:first-letter只选择每个p元素的每一个字母。:first-line只选择第一行,这里的“第一行”指的是浏览器中的第一行,html文件中是看不出来的。只有某些特定的CSS属性能使用:first-letter伪元素,如fontcolorbackgroundtext-decorationvertical-aligntext-transformline-heightmarginpaddingborderfloatclear。伪元素:::first-line::first-letter::before::after。伪类::first-child:link等。

  • a:linka:visiteda:focusa:hovera:active使用伪类的方法按链接的状态来选择链接元素,a:link设置从未被激活或指向,a:visited设置以激活过的链接,a:focus通过键盘如Tab键获得焦点的链接外观,a:hover设置光标指向链接时的外观,a:active设置激活过的外观。也可对其他类型的元素使用activehover伪类。链接设置时按LVFHA顺序。

  • 按属性选择属性值:

    选择器 属性值
    [attribute] 匹配指定属性,不论值是什么
    [attribute=“value”] 完全匹配指定属性值
    [attribute~=“value”] 属性值是以空格分隔的多个单词,需有一个完全匹配
    [attribute|=“value”] 属性值以value-开头
    [attribute^=“value”] 属性值以value开头,value为完整的单词或单词的一部分
    [attribute$=“value”] 属性值以value结尾,value为完整的单词或单词的一部分
    [attribute*=“value”] 属性值包含指定值的子字符串

    (3)指定元素组,h1,h2{}中间以逗号隔开,有时候可能需要组合使用选择器。

猜你喜欢

转载自blog.csdn.net/lx_ros/article/details/88938507