蓝旭第二周预习（CSS伪类与伪类元素，关系选择器，CSS布局，盒模型，调试CSS）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* 未访问的链接 */
a:link {
  color: red;
}
 
/* 已访问的链接  */
a:visited {
  color: green;
}
 
/* 鼠标悬停链接  */
a:hover {
  color: hotpink;
}
 
/* 已选择的链接*/
a:active {
  color: blue;
}
/*键盘输入焦点的元素*/

input:focus {
  background-color: yellow;
}
</style>
</head>
<body>
    <p><a href="https://mp.csdn.net/mp_blog/creation/editor/137126884?spm=1001.2014.3001.4503">这是蓝旭第二周预习作业</a></p >
<form>
        名: <input type="text" name="fname"><br>
        姓: <input type="text" name="lname"><br>
        <input type="submit" value="保存">
      </form>
</body>
</html>

运行结果：

注*：这几个伪类同时出现在一个元素的操作上，顺序不能改变，否则很大程度上会产生紊乱，造成效果失效！a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效。(意思是必须先写a:link 和 a:visited再写 :hover）a:active 必须在 CSS 定义中的 a:hover 之后才能生效。(意思是必须先写a:hover再写 :active）另外伪类名称对大小写并不敏感

伪类与CSS类：

实例（2）

当鼠标悬停在类hightlight上时，会改变颜色：

a.highlight:hover {
  color: red;
}

当悬停在div上

div:hover {
  background-color: blue;
}

当悬停在div元素<h1>元素（类似工具提示的效果）

h1 {
  display: none;
  background-color: green;
  padding: 25px;
}
 
div:hover h1 {
  display: block;
}

运行结果：

结构性伪类

利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

:first-child 选择某个元素的第一个子元素；
:last-child 选择某个元素的最后一个子元素；
:nth-child(n) 匹配属于其父元素的第 n个子元素，不论元素的类型；
:nth-last-child() 从这个元素的最后一个子元素开始算,选匹配属于其父元素的第 n个子元素，不论元素的类型；
:nth-of-type() 规定属于其父元素的第n个指定元素；
:nth-last-of-type() 从元素的最后一个开始计算,规定属于其父元素的指定元素；\n :first-of-type 选择一个上级元素下的第一个同类子元素；
:last-of-type 选择一个上级元素的最后一个同类子元素；
:only-child 选择它的父元素的唯一一个子元素；
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:checked匹配被选中的input元素，这个input元素包括radio和checkbox。
:empty 选择的元素里面没有任何内容。\n :disabled匹配禁用的表单元素。
:enabled匹配没有设置disabled属性的表单元素。
:valid匹配条件验证正确的表单元素。
:in-range选择具有指定范围内的值的 \u003Cinput> 元素。
:optional选择不带 \"required\" 属性的 \u003Cinput> 元素。
:focus选择获得焦点的 \u003Cinput> 元素。

实例：

选择器匹配p元素的第一个子元素：

:first-child { color: rgb(29, 74, 236); }

匹配所有<p>元素中的的<i>元素：

i:first-child { color: blue; }

匹配所有首个 <p> 元素中的所有 <i> 元素

:first-child i { color: rgb(28, 217, 35); }

CSS - :lang 伪类

:lang 伪类允许您为不同的语言定义特殊的规则。

在下面的例子中，:lang 为属性为 lang="en" 的 <q> 元素定义引号：

二.CSS元素

1.什么是伪元素？

伪元素的定义

CSS伪元素用于设置元素指定的部分样式。

伪元素实际使用场景举例

设置元素的首字母、首行的样式；在元素的内容之前或之后插入内容

2.css伪元素的种类有几种？怎么应用？

语法

selector::pseudo-element {
  property: value;
}

种类

实例：

::first-line 伪元素用于向文本的首行添加特殊样式。

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

注*：以下属性适用于 ::first-line 伪元素：

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

::first-letter 伪元素用于向文本的首字母添加特殊样式。

p::first-letter {
  color: #06e5bc;
  font-size: xx-large;
}

注*：::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

字体属性
颜色属性
背景属性
外边距属性
内边距属性
边框属性
text-decoration
vertical-align（仅当 "float" 为 "none"）
text-transform
line-height
float
clear

伪元素可以与 CSS 类结合使用：

p.intro::first-letter {
  color: #b31195;
  font-size: 200%;
}
.intro{
    width: 10px;
}

::before 伪元素可用于在元素内容之前插入一些内容。

h1::before {
  content: url(微信截图_20240330193303.png);
  height: 10px;
  width:10px;
}

::after 伪元素可用于在元素内容之后插入一些内容。

h1::after{
    content:url(微信截图_20240330195712.png);
}

::selection 伪元素匹配用户选择的元素部分。

p::selection{
    color: red; 
  background: yellow;
    
}

注*: 以下 CSS 属性可以应用于 ::selection：

color
background
cursor
outline

三.关系选择器

1.关系选择器是是什么？

关系选择器的定义

能够根据其它元素的关系选择适合的元素选择器。

2.关系选择器的种类有哪些？

子元素选择器

作用：通过制定的元素指定的子元素

语法：父元素>子元素{}

实例：

p>span{
    color:#c4103d;
    font-weight:bold;
    font-size: 20px;

后代选择器

作用：通过指定的祖先元素找到指定的子元素。

语法:父元素子元素{}（父元素与子元素之间有空格）

h4 span{
            background-color:rgb(134, 65, 65);
        }

下一个兄弟选择器

作用：选择于当前元素紧挨着的下一个同级元素。

语法：兄+弟{}

h5+h6{
    background-color: aqua;
    color:aliceblue;
}

所有兄弟选择器

作用:选择与当前元素下的所有元素。

语法：兄~弟

h5~span{
    background-color: #ff0000;
    color:rgb(204, 132, 37);
}

四.css布局

1.css布局是什么？

CSS的定义

指网页内容的组织和呈现方式。

2.CSS布局的种类有哪些？怎么应用?

HTML表格（Table）

在HTML中，表格可以用来创建复杂的布局，但这种方法并不推荐，因为它主要用于数据的展示，而不是布局。

CSS布局

CSS提供了多种布局技术，包括：

Flexbox（弹性盒子）：一种现代的布局方式，可以很容易地在水平或垂直方向上对齐元素。

.flex-container {
  display: flex;
  justify-content: space-between;
  background: #0ab058;
}
.flex-item{
  background: #cd3030;
  padding: 10px;
  margin: 10px;
}

Grid：一种更加强大的布局方式，可以创建复杂的网格布局。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #a13737;
  padding: 10px;
}
.grid-item {
  background: #791a61;
  padding: 10px;
}

浮动（Float）：可以使元素向左或向右浮动，然后其他元素会围绕它排列。

.left-float{
  float:left;
  width:30%;
  background: #3cb49e;
  padding: 10px ;

}
.right-float {
  float: right;
  width: 30%;
  background: #a31e8f;
  padding: 10px;}

定位（Positioning）：包括 static 、 relative 、 absolute 、 fixed 和 sticky 等属性，用于精确控制元素的位置。

 .positioned {
  position:static;
  top: 30px;
  left: 3px;
  background: #02f4f8;
  padding: 10px;
}

注*：使用 position  属性可以将元素相对于其正常位置进行偏移。
  static  （默认）: 不进行定位。
  relative  : 相对于其正常位置进行偏移。
  absolute  : 相对于最近的已定位（非 static  ）祖先元素进行偏移。
  fixed  : 相对于视口（viewport）进行偏移。
  sticky  : 结合了 relative  和 fixed  的特性，当元素在视口中时表现得像 relative  ，当滚动超出某个阈值时表现得像 fixed  。

盒模型（Box Model）：包括 margin 、 border 、 padding 和 content 等属性，用于控制元素的间距和大小。

.element {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid #eb6a01;
  margin: 10px;
  box-sizing: border-box; /* 使用 border-box 计算盒模型 */
}

注*：
内容区域（Content Area）:
这是盒模型的中心部分，包含了元素的文本和内联内容。它的大小可以通过 width  和 height  属性来设置。
内边距（Padding）:
内边距位于内容区域的周围，它扩展了内容区域的背景，但不包含边框。内边距的大小可以通过 padding  属性来设置，也可以分别使用 padding-top  、 padding-right  、 padding-bottom  和 padding-left  来设置四个方向的内边距。
边框（Border）:
边框围绕着内边距，可以设置边框的样式、宽度和颜色。边框的大小可以通过 border  属性来设置，也可以分别使用 border-top  、 border-right  、 border-bottom  和 border-left  来设置四个方向的边框。
外边距（Margin）:
外边距位于边框的外围，用于控制元素与其他元素之间的间距。外边距的大小可以通过 margin  属性来设置，也可以分别使用 margin-top  、 margin-right  、 margin-bottom  和 margin-left  来设置四个方向的外边距。

盒模型的总宽度和总高度可以通过以下公式计算：

总宽度 =   width   +   padding-left   +   border-left   +   margin-left   +   padding-right   +   border-right   +   margin-right
总高度 =   height   +   padding-top   +   border-top   +   margin-top   +   padding-bottom   +   border-bottom   +   margin-bottom
content-box  （默认值）: 根据上述公式计算总宽度和总高度。
  border-box  : 总宽度和总高度包括了内容、内边距和边框，但不包括外边距。这意味着 width  和 height  属性定义了元素的总高度和总高度，包括内容、内边距和边框。

响应式设计：使用媒体查询（Media Queries）和弹性布局技术，使得网页能够在不同大小的设备上自适应显示。

.responsive-container{
  display:flex;
  flex-wrap: wrap;

}
.responsive-item {
  flex: 1 1 300px;
  background: #685151;
  padding: 10px;
  margin: 10px;
}
@media (max-width:600px) {
  .responsive-item{
    flex:1 1 100%;
  }