CSS快速入门(一)

x33g5p2x  于2022-02-07 转载在 CSS3  
字(4.1k)|赞(0)|评价(0)|浏览(331)


本文总结:什么是CSS,语法结构,以及如何使用多种选择器去匹配标签的内容,想快速入门看这篇就够了👆

CSS快速入门

简介

层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术。HTML用于定义内容的结构和语义,CSS用于设计风格和布局。比如,您可以使用CSS来更改内容的字体、颜色、大小、间距,将内容分为多列,或者添加动画及其他的装饰效果;

通俗理解为:CSS就是为了给HTML标签修改样式;

语法结构

语法结构:

选择器 {
        属性名1:属性值1;
        属性名2:属性值2
  }

如何注释

/*注释内容*/
快捷键:ctrl+? (pycharm)

引入方式

1.style内部直接编写css代码,平时学习、练习的时候推荐使用
2.link标签引入外部css文件,正式工作、实际生产环境推荐使用

选择器

简介

CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素,叫做“选择器的对象”;

css是用来调节标签样式的 那为什么需要学选择器呢?
因为同一个页面上有很多相似的标签 并且这些标签在不同的位置有不同的样式 所以为了能够区分 ,我们肯定先需要学习如何查找指定的标签

选择器列表

如果你有多个使用相同样式的CSS选择器,那么这些单独的选择器可以被混编为一个“选择器列表”,这样,规则就可以应用到所有的单个选择器上了。例如,如果我的h1.special类有相同的CSS,那么我可以把它们写成两个分开的规则。

/*方式一*/
h1 {
  color: blue;
}

.special {
  color: blue;
} 

/*方式二*/
h1, .special {
  color: blue;
} 

/*如果出现语法错误,那么样式不会生效*/
/*相同修改,优先级一般最下面的生效*/

选择器的优先级

  • 相同选择器不同导入方式

  • 选择器系统遵循就进原则,从上往下谁离标签更近谁说了算

通俗理解:
比如两个相同的选择器都要修改p标签,最下面那个,或者离p标签更近的选择器生效;
如果p标签自己使用style参数,那么p标签自己设定的参数生效;
  • 不同选择器不遵循就近原则>>>:优先级

  • 行内选择器 > id选择器 > 类选择器 > 标签选择器

基本选择器

标签选择器

通过标签名直接查找

/*查找所有的div标签*/
    div {  
            color: red;
        }
类选择器

类选择器的关键符号为.句点符号,是通过class值查找标签;

/*查找所有含有c1样式类的标签*/
    .c1 {
            color: red;
        }
id选择器

id选择器关键符号位#警号,通过id值查找标签;

/*查找id为d1的标签*/
    #d1 {
            color: orange;
        }
通用选择器(不重要)

修改body内所有的标签;

/*body内所有的标签*/
    * {
      color: darkgray;
    }

组合选择器

为了区分嵌套标签之间的关系,我们发明了一种称呼,如下:

<div>
<p>
<span></span>
</p>
</div>
/*
span是p的儿子 是div的孙子也可以说是div的后代
p是div的儿子也是div后代 是span的父亲
div是p的父亲是span的爷爷 也可以说是他们的祖先
*/
后代选择器

特征符号是空格

/*查找div内部所有的后代span*/
    div span {  
            color: red;
        }
儿子选择器

特征是>大于号

/*查找div内部所有的儿子span*/
    div > span { 
            color: greenyellow;
        }
相邻选择器

特征为+加号,这个查找的是同级别下面紧挨着的第一个span

/*查找同级别下面紧挨着的第一个span(不能有其他标签间隔)*/
    div + span {  
            color: pink;
        }
弟弟选择器

特征为~

/*查找同级别下面所有的span(不需要紧挨着)*/
    div ~ span {  
            color: deeppink;
        }

属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素;

语法
  • [attr]

表示带有以 attr 命名的属性的元素。

  • [attr=value]

表示带有以 attr 命名的属性,且属性值为 value 的元素。

  • [attr~=value]

表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少有一个值为 value。

  • [attr|=value]

表示带有以 attr 命名的属性的元素,属性值为“value”或是以“value-”为前缀("-"为连字符,Unicode 编码为 U+002D)开头。典型的应用场景是用来匹配语言简写代码(如 zh-CN,zh-TW 可以用 zh 作为 value)。

  • [attr^=value]

表示带有以 attr 命名的属性,且属性值是以 value 开头的元素。

  • [attr$=value]

表示带有以 attr 命名的属性,且属性值是以 value 结尾的元素。

  • [attr*=value]

表示带有以 attr 命名的属性,且属性值至少包含一个 value 值的元素。

  • [attr operator value i]

在属性选择器的右方括号前添加一个用空格隔开的字母 i(或 I),可以在匹配属性值时忽略大小写(支持 ASCII 字符范围之内的字母)。

  • [attr operator value s]

在属性选择器的右方括号前添加一个用空格隔开的字母 s(或 S),可以在匹配属性值时区分大小写(支持 ASCII 字符范围之内的字母)。

示例
/* 存在title属性的<a> 元素 */
a[title] {
  color: purple;
}

/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在href属性并且属性值包含"example"的<a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在href属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}
分组与嵌套

如果存在多个标签需要调整为同一样式,那么使用分组和嵌套可以减少代码的冗余;

匹配标签之间用逗号隔开,标签与标签是或的关系;

并列写可以标签和标签、标签和选择器、意思就是可以多个相同选择器或多个不同选择器都可以并列使用;

/*并列的情况*/
/* 多个相同选择器并列使用*/ 
div,span,p {  /*查找div或者span或者p*/
            color: red;
        }
/*多个不同选择器并列使用*/
div,#d1,.c1 {  /*标签查找div id查找d1 类查找c1*/
            color: red;
        }
/*不并列的情况*/
/*不并列同样可以使用组合选择器*/
.c1 p {   /*查找class为c1的后代p标签*/
            color: red;
        }
/*直接筛选*/
    div#d1 {  /*查找id为d1的div标签*/
    color: red;
  }
  div.c1 {  /*查找class为c1的div标签*/
    color: red;
  }

伪类选择器

CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。例如,:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

语法
selector:pseudo-class {
  property: value;
}
示例
/*鼠标悬浮在上面*/
a:hover {  
            color: orange;
        }
/*a标签默认的颜色会变化 第一次是蓝色 后面是紫色*/

input:focus {
            background-color: red;
        }
/*我们将input框被用户点击即将录入数据的过程看成是focus状态(聚焦状态)*/
标准伪类索引

选择器参考表

选择器示例学习CSS的教程
类型选择器h1 { }类型选择器
通配选择器* { }通配选择器
类选择器.box { }类选择器
ID选择器#unique { }ID选择器
标签属性选择器a[title] { }标签属性选择器
伪类选择器p:first-child { }伪类
伪元素选择器p::first-line { }伪元素
后代选择器article p后代运算符
子代选择器article > p子代选择器
相邻兄弟选择器h1 + p相邻兄弟
通用兄弟选择器h1 ~ p通用兄弟

网站分享

相关文章