CSS学习笔记_css什么是分区元素-CSDN博客

本文链接：https://blog.csdn.net/m0_60451737/article/details/124660984

CSS

1.介绍(层叠样式表)

是一组样式设置的规则，用户控制页面的外观样式

Q:为什么使用CSS

A:实现内容和样式的分离，便于开发。样式复用，便于网站的后期维护。页面的精准控制，让页面更精美。利用SEO，容易被搜索引擎搜录

2.用法

1.语法

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
      (选择器)  p{
            (属性名)color: red(属性值);
            background: white;
        }
        h2{
            color: blue;
        }
    </style>

</head>
<body>
<h2>
    CSS程序
</h2>
<p> 主要内容</p>
</body>
</html>

style里面不能写注释，注释是HTML的(<!–>)

2.应用方式

内部样式

在页面头部通过style标签定义，对当前页面中所有符合样式选恶气的标签都起作用

行内样式(嵌入样式)

使用HTML标签的style属性定义，只对设置style属性的标签起作用

<h1 style="color: red"> 123</h1>

外部样式

使用单独的.css文件定义，然后在页面中使用link标签或@import指令引入

使用link标签(style外部引入) html标签

<link rel="stylesheet" href="First.css">

import导入(内部引入) css样式，css 2.1特有

@import url("First.css");

导入的缺点:容易先显示框架再进行渲染

优先级：(就近原则)

3.基本选择器

作用：选择页面上的某一个或者某一类元素

1.标签选择器

<style>
    h1{
        
    }
</style>

2.类选择器

可以跨标签，选择所有class属性一致的标签

<style>
    .zqy
    {
        
    }
</style>
<h1 class="zqy">
    
</h1>

3.id选择器

<style>
    #zqy
    {
        
    }
</style>
<h1 id="zqy">//权证全局唯一
    
</h1>

4.层次选择器

1.后代选择器

body p
{
    color:red;
}

body下所有p

2.子选择器()

body>p
{
    
}
div:nth-of-type(1)>input
{
    //div下第一个元素里面的input
}

3.相邻兄弟选择器

（当前选择元素的下面一个元素)

.zqy+p
{
    xx
}
<p class="zqy">123<p>
<p>234<p>

4.通用选择器

（当前选择元素的下面所有相同元素) 但是它本身不变

.zqy~h1
{
    color: red;
}

5结构伪类选择器

根据HTML页面中元素之间的关系来定位HTML元素，从而减少对HTML元素的id属性和class属性的依赖。

    ul li:first-child
    {
        background: red;
    }
    ul li:last-child
    {

    }
    /*选中p1:定位到父元素，选择当前的第一个元素
    选择当前p元素的父级元素，选中父级元素的第一个*/
    p:nth-child(1)
    {
        background: blue;
    }
    /*选中父级元素下的p元素的第二个，分类型*/
    p:nth-of-type(2)
    {
        background: red;
    }
	p::first-line { }/*伪元素选择器*/
	::first-line是会选择一个元素（下面的情况中是<p>）中的第一行
<p>zqy</p>
<p>jwj</p>
    <ul>
        <li>123</li>
        <li>234</li>
        <li>345</li>
    </ul>

6.属性选择器

1.a[target]
{

}
2.a[target=xxx]
3.a[target~=xx] 包含xx的所有元素 a[target*=xx]
4.a[target|=xx]以xx开头的元素，元素必须是完整或独立的单词
5.a[target^=xx]同上，但元素不必是完整或独立的单词
6.a[target$=xx]以xx结尾的元素值不必是完整单词！ 

    h1,.zqy//选择器列表
    {
        color: red;
    }

3.美化网页元素

1.有效传递页面信息

2.美化网页，网页漂亮，吸引用户

3.凸显页面主题

4.提高用户的体验

span标签:突出句子的重点

1.字体样式

<!--font-family 字体样式
    font-size 大小
    font-weight 字体粗细-->

1em 等于我们设计的当前元素的父元素上设置的字体大小

2.文本样式

 text-align:center;//左右排版
text-indent:2em 缩进

text-decoration:none(超链接去下划线)修饰关键词

height:300px
line-height:300px 行高和块高度一致，就可以实现上下居中

上中下划线
underline
line-through
overline

文本图片对齐需要参照物
image,span
{
    vertical-align:middle
}

关于line-height

3.文本阴影及超链接伪类

:visited - CSS（层叠样式表） | MDN (mozilla.org)

:visited
表示用户已访问过的链接(注意清除浏览器的记录)
:link
用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接
:hover
鼠标悬浮的状态
:active
鼠标点击的状态

元素在X和Y方向的偏移量、模糊半径和颜色值组成
text-shadow
text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;可以写多个demo混合

4.列表

<div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何
将内容写进div，然后对div进行区域的划分

5.背景

背景颜色
背景图片

<style>
    div
    {
        width: 1000px;
        height: 500px;
        border: red solid 1px;
    background-image: url("/image/箭头.png") ;
    background-repeat: no-repeat;///重复方式 repeat-x 水平平铺 repeat-y 垂直平铺
    background-position: 150px 50px;//图片位置
    background-size: 50px 50px;//图片大小
        
      或者直接background:在里面设置属性
    }

    .zqy
    {
        background-repeat: no-repeat;
    }
</style>
<body>
<div class="zqy">

6.渐变

Grabient渐变网站

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。

4.盒子模型

1.盒子

2.边框

注意系统默认盒子外边框为8，所以要记得更改
body{
margin:0;
}

3.内外边距，div居中

/* 应用于所有边 */
margin: 1em;
margin: -3px;

/* 上边下边 | 左边右边 */
margin: 5% auto;(auto 自动移动 但是一般都是居中)

/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;

/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;

/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;

问题1;

div:nth-of-type(1) 选中的内容会影响到后面的

<div id="box">
    <h2>会员登陆</h2>
    <form action="#">
        <div>
        <span>用户名</span>
        <input type="text">
    </div>
        <div>
            <span>密码</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱</span>
            <input type="email">
        </div></form>
</div>//外层div也被算进 div:nth-of-type(1)里面，但是后面无误

整个盒子模型的大小根据四个部分进行计算 margin+border+padding+content

4.圆角边框及盒子阴影

        /*左上 右上 右下 左下 顺时针*/
        border-radius: 50%;//圆形

X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

5.单独元素居中

display:block就是将元素显示为块级元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
        background-size: 50px 50px;
        //width:xx
        //  margin:0 auto
    }
    img
    {
        border-radius: 50%;
        box-shadow:10px 10px 100px red;
        display: block;
        margin: 0 auto;
    }
  </style>
</head>
<body>
<div>
    <img src="/HTML/1.jpg" alt="">
</div>
</body>
</html>
或者采用设置div的宽度，然后通过移动div来设置图片居中，但问题是0 auto是根据自身宽度来决定，所以不推荐

7.display，浮动

display:none
      /*display:
      block 块元素
      inline 行内元素
      inline-block是块元素，但是可以内联，在一行*/

CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，尽管仍然保持部分的流动性（与绝对定位相反）。
float:right..
浮动会根据窗口的变化而进行变动

clear:right 右侧不允许有浮动元素
clear:left 左侧不允许有浮动元素
clear:both 两侧不允许有浮动元素

父级边框塌陷的问题

原因:父级元素边框塌陷的原因是，当父元素没有设置足够的大小时，父元素的高度是由父元素中最高子元素的高度决定的。一旦子元素浮动，脱离了文档流不再占据原本的位置，父元素中没有非浮动的可见子元素，父元素的高度就会塌陷。

解决方案;

1.增加父级元素的高度:这种方式不推荐使用，太不灵活。

2.增加一个空的div标签，清除附近的浮动

3.overflow 给父元素设置overflow：hidden

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

4.4.在父类添加一个伪类after可避免父级边框塌陷的问题（很重要）

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

 .kuang:after{

content: "";

display: block;

clear: both;

}

8.定位

相对定位

原来的位置任然在标准文档流中，位置依然被保存

        #first
        {
            background: cyan;
            border:2px red solid;
            position: relative;/*相对定位,相对自己原来的位置*/
            top: -10px;/// 原来的位置相对于现在的位置,即现在的位置在原来的位置的上面10px
            left: 20px;
        }

绝对定位

绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。

1.在没有父级元素，则根据浏览器定位
2.假设父级元素存在定位，我们通常会相对于父级元素定位
3.在父级元素范围内移动
相对于父级或者浏览器的位置，进行指定的便宜，绝对哦定位的话，不在标准文档流中，原来的位置不会被保留

3.固定定位

    div:nth-of-type(1)
    {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    div:nth-of-type(2)
    {
        width: 50px;
        height: 50px;
        background: yellow;
        position: fixed;//固定在浏览器中，不移动
        right: 0;
        bottom: 0;
    }

4.z-index

z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。（类似图形)默认是0，最高是999，设置显示次序

9.动画

less：是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

5.继承

css父类设置的元素，子类也会继承。

如设置ul，那么ul下面的li也会有相同的元素

0px;
        background: red;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    div:nth-of-type(2)
    {
        width: 50px;
        height: 50px;
        background: yellow;
        position: fixed;//固定在浏览器中，不移动
        right: 0;
        bottom: 0;
    }

4.z-index