【学习笔记】CSS_选中父元素div下类型为p元素的最后一个元素,文本颜色设置为黄色。-CSDN博客

本文链接：https://blog.csdn.net/qq_44190995/article/details/104157860

css学习

css简介

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

CSS 注释

CSS注释以 /*开始, 以 */结束

css常用选择器

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式（唯一）。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。

全局选择器

*选择器选择所有元素。
*选择器也可以选择另一个元素内的所有元素:

选择<div>元素内的所有元素
div *
{
background-color:yellow;
}

element 选择器

element 选择器选择指定元素名称的所有元素,几个元素具有相同的样式，用逗号分隔每个元素的名称:

选择所有<p>,<h1>元素 :
p,h1
{ 
    background-color:yellow;
}

element element选择器用于选择元素内部的元素:

选择<div>元素内的所有<p>元素:
div p
{
background-color:yellow;
}

element>element 选择器用于选择特定父元素。

选择所有父级是 <div> 元素的 <p> 元素：
div>p
{
background-color:yellow;
}

element+element 选择器用于选择（不是内部）指定的第一个元素之后紧跟的元素。

选择所有紧接着 <div></div> 元素之后的第一个 <p> 元素:
div+p
{ 
    background-color:yellow;
}

element1~element2 选择器匹配出现在 element1 后面的 element2。
element1 和 element2 这两种元素必须具有相同的父元素，但 element2 不必紧跟在 element1 的后面。

设置同一父元素下的 p 元素之后的每一个 ul 元素的背景颜色：
p~ul
{
background:#ff0000;
}

伪类

:link向未访问的链接添加特殊的样式, :link 选择器对已经访问的链接没有样式，
:visited 选择器设置访问过的页面链接的样式，
:hover选择器当有鼠标悬停在其上的链接样式，
:active 选择器设置当你点击链接时的样式，
链接伪类顺序：:link>:visited>:hover>:active(:hover必须置于:link和:visited之后才有效；:active必须置于:hover之后)

:focus选择器用于选择具有焦点的元素，
:first-child 选择器匹配其父元素中的第一个子元素，
:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。(n 可以是一个数字，一个关键字，或者一个公式。)

指定每个 p 元素匹配的父元素中第 2 个子元素的背景色：
p:nth-child(2)
{
    background:#ff0000;
}

CSS 伪元素

:first-line 伪元素：“first-line” 伪元素用于向文本的首行设置特殊样式。
:first-letter 伪元素：“first-letter” 伪元素用于向文本的首字母设置特殊样式。（ “first-letter” 伪元素只能用于块级元素。）
:before 选择器向选定的元素前插入内容，
:after 选择器向选定的元素之后插入内容，

CSS 创建

插入样式表的方法有三种:

外部样式表(External style sheet):每个页面使用<link>标签链接到样式表。 <link>标签在（文档的）头部。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表(Internal style sheet):使用 <style>标签在文档头部定义内部样式表。

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式(Inline style):在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性/4。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级

优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。

一般情况下，优先级如下（就近原则）：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

css优先级规则：

同一样式表中：

权值相同
就近原则
权值不同
根据权重来判断。
选择器权值：
标签选择器：1；
类选择器和伪类：10；
ID选择器：100;
通配符：0；
行内样式：1000；
！important最优先；添加在样式后，中间用空格隔开；
div{color:red !important;}

CSS背景

CSS 属性定义背景效果:

background-color：定义元素的背景颜色。
background-image：描述元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
background-repeat：
1. background-repeat:repeat-x——图像只在水平方向平铺
2. background-repeat:no-repeat——图像不平铺
3. background-repeat:repeat-y——图像只在垂直方向平铺
background-attachment：背景图像是否固定或者随着页面的其余部分滚动。

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。
initial	设置该属性的默认值。阅读关于 initial 内容
inherit	指定 background-attachment 的设置应该从父元素继承。

background-position:改变图像在背景中的位置

CSS文本格式

文本颜色：color：用来设置文字的颜色。
文本的对齐方式：text-align：文本排列属性是用来设置文本的水平对齐方式；文本可居中或对齐到左或右,两端对齐（当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸））。
文本修饰：text-decoration 属性用来设置或删除文本的装饰（从设计的角度看 text-decoration属性主要是用来删除链接的下划线）。
文本转换：文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}(大写)
p.lowercase {text-transform:lowercase;}（小写）
p.capitalize {text-transform:capitalize;}（首字母大写）

文本缩进:text-indent:指定文本的第一行的缩进(px)。
文本行高：line-height（px）。

CSS字体

CSS字型
CSS中，有两种类型的字体系列名称（font-family里定义）：
1. 通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
2. 特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）
字体系列：font-family 属性设置文本的字体系列，如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。
字体样式：font-style主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
1. 正常 - 正常显示文本（normal）
2. 斜体 - 以斜体字显示的文字（italic）
3. 倾斜的文字 - 文字向一边倾斜（oblique）（和斜体非常类似，但不太支持）
字体大小：font-size 属性设置文本的大小，字体大小的值可以是绝对或相对的大小。
1. 绝对大小：
- 设置一个指定大小的文本
- 允许用户在所有浏览器中改变文本大小
- 确定了输出的物理尺寸时绝对大小很有用
1. 相对大小：
- 相对于周围的元素来设置大小
- 允许用户在浏览器中改变文字大小
  Remark：如果不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）（px/16=em）
字体加粗：font-weight指定字体的粗细。

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100, 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

CSS 链接

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
当设置为若干链路状态的样式，也有一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面

常见的链接样式

文本修饰:text-decoration 属性主要用于删除链接中的下划线。
背景颜色：background-color

CSS 列表

不同的列表项标记：list-style-type属性指定列表项标记的类型。
作为列表项标记的图像：list-style-image: url('sqpurple.gif');
浏览器兼容性解决方案:

ul
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
ul li
{
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 14px; 
}

例子解释：
ul:
设置列表类型为没有列表项标记
设置填充和边距0px（浏览器兼容性）
ul中所有li:
设置图像的URL，并设置它只显示一次（无重复）
您需要的定位图像位置（左0px和上下5px）
用padding-left属性把文本置于列表中

列表 -简写属性:list-style
标记位置：list-style-position：inside/outside（默认）

CSS 表格

表格边框：指定CSS表格边框，使用border属性。
折叠边框：border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。

CSS 盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容，盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

元素的宽度和高度

当指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。要知道，完全大小的元素，还必须添加填充边框和边距。
box-sizing：设定计算盒子宽高的方式

CSS 边框

边框样式：border-style

属性	值
none:	默认无边框
dotted:	定义一个点线边框
dashed:	定义一个虚线边框
solid:	定义实线边框
double:	定义两个边框。两个边框的宽度和 border-width 的值相同
groove:	定义3D沟槽边框。效果取决于边框的颜色值
ridge:	定义3D脊边框。效果取决于边框的颜色值
inset:	定义一个3D的嵌入边框。效果取决于边框的颜色值
outset:	定义一个3D突出边框。效果取决于边框的颜色值

边框宽度 : border-width 属性为边框指定宽度,为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。
边框颜色:border-color属性用于设置边框的颜色。
边框-单独设置各边: border-top/right/bottom/left

border-style：属性1，属性2，属性3，属性4
上->右->下->左
border-style：属性1，属性2，属性3
上->左右->下
border-style：属性1，属性2
上下->左右
border-style：属性1
上下左右属性相同

CSS 轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。(围在border外圈)
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
(outline是不占空间的，既不会增加额外的width或者height)
outline-color/outline-style/outline-width

CSS margin(外边距)

CSS margin(外边距)属性定义元素周围的空间。

CSS padding（填充）

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

CSS Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

CSS Display - 块和内联元素

可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。
display:inline：变为内联元素。
display:block：变为块级元素。
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性。

CSS Position(定位)

position 属性指定了元素的定位类型。
position 属性的五个值：static，relative，fixed，absolute，sticky。

static 定位：HTML 元素的默认值，即没有定位，遵循正常的文档流对象，静态定位的元素不会受到 top, bottom, left, right影响。
fixed 定位：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。（Fixed定位使元素的位置与文档流无关，因此不占据空间。）
relative 定位：相对定位元素的定位是相对其正常位置，移动相对定位元素，但它原本所占的空间不会改变。（未完全脱离文档流）相对定位元素经常被用来作为绝对定位元素的容器块。
absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关，因此不占据空间，absolute 定位的元素和其他元素重叠。
sticky 定位：粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
CSS z-index 属性：z-index 属性指定一个元素的堆叠顺序。

CSS 布局 - Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

CSS Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边。
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。

CSS 布局 - 水平 & 垂直对齐

元素居中对齐：要水平居中对齐一个元素(如<div>), 可以使用 margin: auto;。设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配。
文本居中对齐：如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center。
图片居中对齐：要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中。
左右对齐 - 使用定位方式：可以使用 position: absolute; 属性来对齐元素
左右对齐 - 使用 float 方式
垂直居中对齐 - 使用 padding：头部顶部使用 padding；如果要水平和垂直都居中，可以使用 padding 和 text-align: center。
垂直居中 - 使用 line-height：行高等于高度，文本垂直居中。
垂直居中 - 使用 position 和 transform。
多行文本可使用 vertical-align: middle; 来实现元素的垂直居中，但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。