CSS学习笔记一

专心搞技术

已于 2023-09-03 21:34:51 修改

阅读量58

点赞数

文章标签： css 学习前端

于 2023-09-03 21:31:27 首次发布

本文链接：https://blog.csdn.net/m0_59837456/article/details/132643357

版权

一、什么是css？

css指的是层叠样式表（Cascading Style Sheets）
css描述了如何在屏幕、纸张或其他媒体上显示HTML元素
css节省了大量工作。它可以同时控制多张网页的布局

二、css语法

css规则集（rule-set）由选择器和声明块组成：

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

多条 CSS 声明用分号分隔，声明块用花括号括起来。

实例：

将所有的<p>标签元素都居中对齐，并带有红色文本颜色：

p{
    color:red;
    text-align:center;
}

三、css选择器

css选择器用于“查找”（或选取）要设置样式的HTML元素。

css选择器分为五类：

简单选择器（根据标签名、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

1、简单选择器

（1.）元素选择器

元素选择器根据元素名称来选择HTML元素。

实例

页面上的所有<p>元素都居中对齐，并且文本颜色为红色：

p{
    text-align:center;
    color:red;
}

（2.）id选择器（#）

id选择器使用HTML元素的id属性来选择特定元素。

元素的id在页面中是唯一的，因此id选择器用于选择一个唯一的元素！

要选择具有特定id的元素，请写一个井号（#），后跟该元素的id。

实例

html代码

<div id="para1">id选择器</div>

css代码

#para1{
    text-align:center;
    color:red;
}

注意：id名不能以数字开头！

（3.）类选择器（ . ）

类选择器选择有特定class属性的HTML元素。

如需选择拥有特定class的元素，请写一个英文句号（.），后面跟类名。

实例

<div class="center">css类选择器</div>

.center{
    text-align:center;
    color:red;
}

注意：类名不能以数字开头！

（4.）通用选择器（*）

通用选择器（*）选择页面上的所有HTML元素。

*{
    text-align:center;
    color:red;
}

2、组合器选择器

css中有四种不同的组合器：

后代选择器（空格）
子代选择器（>）
相邻兄弟选择器（+）
后续兄弟选择器（~）
交集选择器
并集选择器（ , ）

（1.）后代选择器（空格）

后代选择器匹配属于指定元素后代（里边嵌套的元素）的所有匹配元素。

定义的时候用空格隔开。

实例

为div标签下所有h1节点设置为红色文本样式

div h1{
        color：red；
}

<div>
        <h1>儿子标题</h1>
        <span><h1>孙子标题</h1></span>
        <h1>儿子标题</h1>
</div>

（2.）子代选择器（>）

子代选择器可以选择当前元素的所有儿子元素。定义的时候用 > 隔开。

实例
为div标签下所有h1儿子节点设置为红色文本样式

div>h1{
        color：red；
}

<div>
        <h1>儿子标题</h1>
        <span><h1>孙子标题</h1></span>
        <h1>儿子标题</h1>
</div>

（3.）相邻兄弟选择器（+）

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        div + p {
          background-color: yellow;
        }
    </style>
</head>
<body>

    <h1>相邻兄弟选择器</h1>
    <p>相邻的同胞选择器（+）选择所有作为指定元素的相邻的同级元素。</p>

    <div>
      <p>div 中的段落 1。</p>
      <p>div 中的段落 2。</p>
    </div>

    <p>段落 3。不在 div 中。</p>
    <p>段落 4。不在 div 中。</p>

</body>
</html>

该实例中只有“段落3。不再div中。”的背景颜色为黄色。

（4.）后续兄弟选择器（~）

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
定义的时候用 ~ 隔开。

实例
为div之后的所有p标签元素设置为黄色文本样式

div ~ p {
    background-color: yellow;
}

<div>
    <p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。</p>
<p>DIV 之后的第二个 P 元素。</p>

（5.）交集选择器

选择的元素必须同时满足多个条件才可以被选择，交集选择器就是干这个的。
定义的时候用标签名.ID名/类名。

实例
为所有p标签且class为part的段落添加绿色文本样式

p.part {
    color: red;
}

<p class="part">段落</p>
<h1 class="part">标题</h1>

（6.）并集选择器

多种元素共享某种属性，这时候就可以使用并集选择器。
定义的时候用逗号隔开。

实例
为p标签、h1标签、class=‘link’、id='click’的这几种元素添加红色文本样式

p, h1, .link, #click {
    color: red;
}

<p>段落</p>
<h1>标题</h1>
<a href="https://www.baidu.com/" class="link">打开百度，你就知道！</a>
<button id="click">我是按钮</button>

3、伪类选择器

伪类用于定义元素的特殊状态。

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

（1.）锚伪类

         a:link {color:#FF0000;} /* 未访问的链接样式 */
        a:visited {color:#00FF00;} /* 已访问的链接样式 */
        a:hover {color:#FF00FF;} /* 鼠标划过链接样式 */
        a:active {color:#0000FF;} /* 已选中的链接样式 */

<a href="https://www.baidu.com/">打开百度，你就知道！</a>

注意：推荐使用顺序为link、visited、hover、active

（2.）input伪类

选择器	示例	示例说明
:focus	input:focus	选择元素输入后具有焦点
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:enabled	input:enabled	选择所有启用的表单元素
:in-range	input:in-range	选择元素指定范围内的值
:out-of-range	input:out-of-range	选择元素指定范围外的值
:invalid	input:invalid	选择所有无效值的元素
:valid	input:valid	选择所有有效值的元素
:optional	input:optional	选择没有"required"属性的元素
:required	input:required	选择含有"required"属性的元素
:read-only	input:read-only	选择只读属性的元素
:read-write	input:read-write	选择可写属性的元素

（3.）other伪类

选择器	示例	示例说明
:not(selector)	:not(p)	选择每个非 <p> 元素的元素
:empty	p:empty	选择所要没有子元素的p元素
:first-child	p:first-child	选择所有p元素的第一个子元素
:first-of-type	p:first-of-type	选择的每个p元素是其父元素的第一个p元素
:lang(language)	p:lang(it)	选择每个lang属性值以“it”开头的<p>元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其父元素的最后一个p元素
:nth-child(n)	p:nth-child(2)	选择所有p元素的父元素的正数第二个子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素正数的第二个为p的子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素的父元素的倒数第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:root	root	选择元素的根元素
:target	#news:target	选择当前活动的#news元素（单击包含该锚名称的URL）

4、伪元素选择器

选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

5、属性选择器

选择器	例子	例子描述
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target="_blank" 属性的所有元素。
[attribute~=value]	[title~=flower]	选择带有包含 "flower" 一词的 title 属性的所有元素。
[attribute\|=value]	[lang\|=en]	选择带有以 "en" 开头的 lang 属性的所有元素。
[attribute^=value]	a[href^="https"]	选择其 href 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]	a[href$=".pdf"]	选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。
[attribute*=value]	a[href*="w3school"]	选择其 href 属性值包含子串 "w3school" 的每个 <a> 元素。

专心搞技术

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记一

为p标签、h1标签、class=‘link’、id='click’的这几种元素添加红色文本样式。如需选择拥有特定class的元素，请写一个英文句号（.），后面跟类名。选择的元素必须同时满足多个条件才可以被选择，交集选择器就是干这个的。元素的id在页面中是唯一的，因此id选择器用于选择一个唯一的元素！后代选择器匹配属于指定元素后代（里边嵌套的元素）的所有匹配元素。子代选择器可以选择当前元素的所有儿子元素。id选择器使用HTML元素的id属性来选择特定元素。相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
复制链接

扫一扫