前端管中窥豹之CSS篇

一、CSS简介CSS指层叠样式表(CascadingStyleSheets)样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一1.注释/*注释内容可多行注释*/2.语法选择器(属性:值;属性:值;……)3.三种引入方式head内style标签内部直接书写c...

一、CSS简介
  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一
1.注释

    /* 注释内容 可多行注释 */

2.语法

    选择器(属性:值;属性:值;……)

3.三种引入方式
  • head内style标签内部直接书写css代码
  • link标签引入外部css文件
  • 直接在标签被通过style属性书写css样式
  • 4.标签通常都必须有的属性:

        id 唯一标识标签
        class 标签类属性 可以有多个,类似python面向对象的继承

    二、如何查找标签1.基本选择器  1)标签选择器
    标签名{属性名:值}
      2)id选择器
    #id名{属性名:值}
      3)类选择器:相同类名的标签包括其嵌套的其他标签都更改样式
    .类名{属性名:值}
      4)通用选择器:匹配 html 中的所有元素标签
    *{属性名:值}
      5)共用选择器:多个标签更改样式(不同的选择器也可以共用一个样式)
    标签名1,标签名2,标签名3{属性名:值}
    2.组合选择器  1)后代选择器:A标签中嵌套的所有B标签都更改样式
    A B{属性名:值}
      2)儿子选择器:A标签中嵌套的子标签B(超过两层嵌套即非子标签)都更改样式
    A > B {属性名:值}
      3)毗邻选择器:A标签下面(非嵌套)的第一个B标签更改样式
    AB {属性名:值}
      4)弟弟选择器:A标签下面(非嵌套)的所有B标签更改样式
    A ~ B {属性名:值}
    3.属性选择器:你可以给任意标签加任意的属性名和属性值
    [属性名]{样式}:属性名符合的标签更改样式[属性名=属性值]{样式}:属性名及属性值都符合的标签会更改样式也适用组合选择器
    4.伪类选择器
    元素:伪类名{属性名:值}栗子:遵循爱恨原则,顺序不能变 a:link {color:gray;}/*链接没有被访问时前景色为灰色*/ a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/ a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/ a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
    5.伪元素选择器
    第一个字母 ::first-letter{属性名:值}第一行(以浏览器为准的第一行) ::first-line{属性名:值}被选中的字行(鼠标选择的字段) ::selection::before 和 ::after在内部内容的前面或者后面插入内容,必须带一个属性content
    选择器优先级

        相同选择器不同引用方式——就近原则 谁靠近标签谁生效
        不同选择器相同引入方式——行内样式 > id选择器 > 类选择器 > 标签选择器

    源文地址:https://www.guoxiongfei.cn/csdn/4673.html