Web前端学习——CSS

最新推荐文章于 2023-02-10 11:25:35 发布

XUPT-前端在逃工程师

最新推荐文章于 2023-02-10 11:25:35 发布

阅读量145

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/Dimuzero/article/details/109154701

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Web前端学习day2

一、CSS的基本介绍
二、CSS的几种使用方法
三、CSS选择器
四、CSS优先级
五、CSS里面的盒子模型
六、CSS伪类
六、CSS基本样式

一、CSS的基本介绍

网页分为几种表现形式：视图层（html层）表现层（css层）行为层（js）
表现层（CSS 层叠样式表）
CSS的作用：对html元素进行修饰
CSS特点： 1.丰富的样式定义 2.易于使用和修改 3.多页面使用 4.可层叠（一个元素可具有多个css样式）5.页面压缩（尽量多次复用同样的css，减小css文件体积，提高网页性能）
CSS样式属性写法：属性：值；

二、CSS的几种使用方法

1.行内样式（在元素标签上的style属性上面直接修饰）
代码如下（示例）：

<p style="">
	
</p>

2.内嵌样式（在网页的body或者head标签内修饰）
代码如下（示例）：

<style>
	内部放CSS
</style>

3.外部样式（CSS写在外部文件网页直接调用）
代码如下（示例）：

<link rel="stylesheet" href="CSS文件路径">

三、CSS选择器

1. * 匹配器： 匹配当前网页里面的所有元素

代码如下（示例）：

<style>
*{
	css修饰内容
 }
</style>

2.元素匹配器： 根据当前元素的名称来匹配

代码如下（示例）：

<style>
p{
	css修饰内容
 }
div{
	css修饰内容
 }
</style>

3.class类名匹配器： 根据元素的class属性名称来匹配（一个元素可能拥有多个类名）用.来选择class

代码如下（示例）：

<!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>
    两个class类btn和butn
        .btn {
            css修饰内容
        }
        .butn {
            css修饰内容
        }
    </style>
</head>
<body>
    <button class="btn butn">按钮</button>
</body>
</html>

4.id名称匹配器： 根据当前元素的id属性来匹配（一个元素一个不重名使用）使用#来选择id

代码如下（示例）：

<!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>
        #btn{
            css修饰内容
        }
    </style>
</head>
<body>
    <button id="btn">按钮</button>
</body>
</html>

5.组合选择器：

(1)子父关系选择器：

a.空格选择(匹配当前元素里面所有的后代元素)

代码如下（示例）：

<style>
ul li{
           color: red;
     }
</style>

b.>选择（指匹配当前元素里面的直接子元素）

代码如下（示例）：

<style>
#menu（id选择器）>li（元素选择器）{
           border: 1px solid red;
        }
</style>

c.相邻元素选择器（同级元素匹配）
+匹配:(匹配当前元素之后紧跟的元素)
代码如下（示例）：

<!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>
        .li1+li {
            color: brown;
        }
    </style>
</head>

<body>
    <ul>
        <li class="li1">内容</li>
        <li class="li2">内容</li>
        <li class="li3">内容</li>
    </ul>
</body>
</html>

效果：
在这里插入图片描述

~匹配:(匹配当前元素之后的所有元素)

代码如下（示例）：

<!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>
        .li1~li {
            color: brown;
        }
    </style>
</head>
<body>
    <ul>
        <li class="li1">内容</li>
        <li class="li2">内容</li>
        <li class="li3">内容</li>
    </ul>
</body>
</html>

效果：
在这里插入图片描述

6.子集选择器（伪类选择器）：

子集里面的第一个p元素

<style>
  p:first-child{
                       color: red;
                   }
</style>

子集里面的最后一个p元素

<style>
 p:last-child{
                       color: red;
                   }
</style>

子集里面的第三个p元素

<style>
 p:nth-child(3){
                       color: red;
                   }
</style>

7.属性选择器（根据元素的属性匹配）：

(1)多个属性匹配

<style>
button[type][class]{
                        color: red;
                    }
</style>

(2)属性值匹配

<style>
 button[class=info][type=button]{
                        color: red;
                    }
</style>

(3)根据属性值名称匹配
以谁开头

<style>
 button[class^=a]{
                        color: red;
                 }
</style>

以谁结尾

<style>
 button[class$=m]{
                      color: red;
                  }
</style>

包含那个字母

<style>
  button[class*=f]{
                      color: red;
                  }
</style>

8.分组选择：

<style>
  button,p,span{
                   color: red;
               } 
  div>#menu,ul>li.info{
  				   color: red;
               }
</style>

四、CSS优先级

1.三大样式之间的优先级

行内样式>内部样式>外嵌样式

2.四个基本选择器之间的优先级

id>class>标签名>*

3.组合选择器优先级

匹配方案相同，看父级优先级（遵从四个基本选择器之间的优先级）

4.提高优先级

！important（优先级提升到最高）

五、CSS里面的盒子模型

作用：用来设计和布局的时候使用
内容：边距边框填充实际内容

div里面的css样式：

1.外间距margin：

a. 分离属性

margin-left: 50px;      左
margin-top: 50px;       上
margin-right: 50px;     右
margin-bottom: 50px;    下

b.复合属性

margin: 0px;           上左下右
margin: 0px 0px;         上下   左右
margin：0px 0px 0px;       上   左右   下
margin：0px 0px 0px 0px;     上  左  右  下

2.内监距padding：

a. 分离属性

padding-left: 50px;      左
padding-top: 50px;       上
padding-right: 50px;     右
padding-bottom: 50px;    下

b.复合属性

padding: 0px;                 上左下右
padding: 0px 0px;             上下   左右
padding：0px 0px 0px;         上   左右   下
padding：0px 0px 0px 0px;     上  左  右  下

3.浮动属性float

left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

4.元素转化

display:block;（转化块级）
display:inline-block;(转化行级快)
display:inline;（转化行级）

5.BFC(块级格式化上下文)

当两个盒子上下放置，设置外间距时，两个容器间的间距不会叠加，而是取两个间距里的最大值，所以会有BFC来解决这个问题。

BFC：是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

只要元素满足下面任一条件即可触发 BFC 特性：

 a.body 根元素
 b.浮动元素：float 除 none 以外的值
 c.绝对定位元素：position (absolute、fixed)
 d.display 为 inline-block、table-cells、flex
 e.overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC的作用：

 1.利用BFC避免margin重叠。
 2.自适应两栏布局。
 3.清除浮动。

六、CSS伪类

1. :hover 悬停伪类

当鼠标放在链接时颜色变为蓝色

a:hover{
         color: blue;
       }

2. :active激活伪类

当点击链接时颜色变为橘色

a:active{
         color: orange;
         }

3. :checked选择伪类

主要在input标签里面的radio和checkbox中使用
当选中勾选框，input标签后面的span盒子中的内容变成红色

 input:checked+span{
  			        color:red;
  			        }

4.:focus获得焦点伪类

获取焦点时链接变成红色

a:focus{
		color:red;
		}

5. 可用不可用伪类
表单元素添加disabled 为不可用

 input:disabled{
                color: blue;
               }

表单元素添加enabled 为可用

input:enabled{
               color: green;
              }

6.前后追加内容伪类

:after 给元素的内容之后追加内容

div:after{
          content: "";
         }

:before 给元素的内容之前追加内容

div:before{
           content: "";
          }

六、CSS基本样式

1.css修饰尺寸

width: ;宽度 height: ;高度 max-width: ;最大宽度 min-width: ;最小高度 max-height: ;最大宽度 min-height: ; 最小宽度 line-height: ;行高。

2.css文本对齐方式

text-align: ; left（左对齐） center（剧中） right（右对齐） inherit（默认继承父类）

3.css像素单位

px(固定单位像素) rem em %（百分比相对父容器走百分比）
rem 相对根节点如果给html设置字体大小16px 1rem =16px;
em 相对像素如果父元素没有设置字体大小，相对浏览器走默认像素
如果父容器设置字体大小，相对父容的字体大小

4.css边框

border

复合属性全部的边框样式 border : 边框宽度 样式 颜色;
border:1px solid red;

复合属性左边框样式
border-left:1px solid red;
               border-left-width: 10px;
               border-left-style: dashed;
               border-left-color: blue;
               
复合属性上边框样式
border-top:1px solid blue;

复合属性下边框样式
border-bottom: 1px solid orange;

复合属性右边框样式
border-right: 1px solid pink;

5.css字体

字体大小：font-size: 14px; 设置字体的大小
字体样式：font-family: ; 设置字体的样式
加粗样式：font-weight：；设置字体的粗细
字体颜色：color：；设置字体颜色
也可以子集自定义字体:需要自己导入字体文件：@font-face

6.背景

background-color: ;背景颜色
background-image: ;背景图像
background-size: ;背景图片大小
background-repeat: ;背景图像是否重复及如何重复
background-position：;背景图片的起始位置