3. 前端学习- css-01

最新推荐文章于 2024-08-05 17:07:25 发布

小俞的大宝贝

最新推荐文章于 2024-08-05 17:07:25 发布

阅读量40

点赞数

分类专栏：前端学习文章标签：前端学习 css

本文链接：https://blog.csdn.net/dashuaigeyyds/article/details/132725179

版权

前端学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. CSS语法组成

1. css的作用：修饰显示样式，美化页面
2. css的写法：选择器{ 属性1：属性值；属性2：属性值2 }
3. 语法组成的解释
选择器：选中当前需要修饰的标签
声明（包含属性和属性值）必须要写在大括号内部
属性和属性值之间需要使用冒号隔开
属性值结束后面需要加一个分号（视情况而定）
有多个声明的时候分号一定要加，只有一个可写可不写

2. css样式表

css样式表的创建方式：行内式，内部式，外部式

1. 行内样式表的创建方式
- 行内式需要在标签的内部书写样式既然在标签的内部进行修饰，所以当前选择器就可以省略
- 需要在标签内部书写一个style属性，an 把css中的声明当做属性值去使用
- 注意：把html标签和css属性写在一起很不方便，后期维护麻烦，不建议使用
2. 内部样式表的创建方式
- 第一步需要设置修饰的标签
- 第二步在head区域内书写一个style标签
- 第三步在style标签中书写规范的css语法组成即可
- 注意：内部式结构清楚，方便修改，适合用于小的案例
3. 外部样式表的创建方式
- 第一种：重点常用的方式 link
  - 第一步需要在当前文档的外面去创建一个css文件
  - 第二步需要在css文件中书写规范的css代码
  - 第三步需要使用link标签引入外部的样式表
- 第二种：只需要了解即可
  - 第一步书写style标签
  - 第二步需要再标签内 @import url('')
- 注意
  - 工作中写项目用的最多的一种样式表的创建方式，方便维护，版本更新等
  - link和@import之间的区别是
    - link同时加载html和css， @import方式先创建结构后加载样式
    - link是标签，可以被js操控，而@import不行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 规范的css语法:选择器{属性:属性值} */
        p{
            color: pink
        }
    </style>
    <link rel="stylesheet" href="css/style.css">
    <!-- <link rel="icon" href="images/icon.ico"> -->
    <!-- link引入导入 rel表示文档关联 -->
    <!-- <style>
        @import url('css/style.css')
    </style> -->
</head>
<body>
    <!-- 第一种:行内式使用css样式改变当前字体颜色 需要使用css属性color:英文单词 -->
    <div style="color: green">刘阳同学你真帅!</div>
    <!-- 第二种:内部式使用css样式改变当前字体颜色 需要使用css属性color:英文单词 -->
    <p>这是一段文本</p>
    <!-- 第三种:内部式使用css样式改变当前字体颜色 需要使用css属性color:英文单词 -->
    <span>这是一个span标签</span>
</body>
</html>

3，样式表的优先级

1.行内样式表的优先级高于内部样式表
2.行内样式表的优先级高于外部样式表
3.内部和外部的优先级取决于书写顺序，在下面的优先级更高
总结:行内样式表的优先级是最高的,内部和外部书写顺序决定优先级 - 就近原则

4，选择器

选择器有很多:基本选择器、层级选择器、伪类选择器、结构选择器、属性选择器、伪对象选择器...

4.1，基本选择器

基本选择器的使用:标签选择器、类选择器、id选择器、群组选择器、通配符

一.标签选择器的使用
- 1.语法:可以直接选择标签名称作为选择器来使用
二:类选择器(class)
- 1.语法:
  - 需要在标签的内部去添加一个class属性和属性值
  - 在css样式表中可以使用 .class的属性值{声明}
- 2.作用:可以使用class给一个或者一类添加样式
三:id选择器
- 1.语法:
  - 需要在标签的内部去添加一个id属性和属性值
  - 在css样式表中可以使用 #id的属性值{声明}
- 2.作用:可以使用id给一个添加样式建议id只写一个表示网页的最外围结构
四:群组选择器
- 1.语法
  - 选择器1,选择器2,选择器3{相同的声明}
- 2.作用:把相同的声明可以写在一起
五:通配符
- 1.语法:
  - 固定语法 *选择到当前文件中的全部
  - *{margin:0;padding:0} 边距/间距
- 2、作用
  - 浏览器中是有默认间距的上下左右默认间距为8px

4.2，层级选择器

层级选择器:可以通过符号选择到想要的标签加以修饰

一.后代选择器
- 1.语法:父级选择器子级选择器{声明}
- 2.作用:可以通过父级选择器选择器子级选择器选择到的是父级下面的所有子级元素
二.子级选择器
- 1.语法:父级选择器>子级选择器{声明}
- 2.作用:可以通过父级选择器选择到子级选择器选择到的是父级选择器下面的直接子级元素
三:需要了解的选择器
- 1.相邻一个选择器 +
- 2.相邻全部选择器 ~

4.3，css选择器的权重

权重
- 1.标签选择器 0001
- 2.类选择器 0010
- 3.id选择器 0100
- 4.行内样式表 1000
- 5.通配符 0000
- 6.群组选择器各自计算 a,.b,#c
- 7.后代选择器相加

css层叠样式表中的层叠性是什么?
- 1.每个标签都是可以设置多个选择器的如果说选择中的属性是相同的就会根据选择器的权重进行选择修饰
- 2.如果选择器中属性是不相同的就会进行叠加

4.4 ，动态伪类选择器

动态伪类选择器(伪类选择器:0010)

1.选择器:link {color: red;} 未访问的链接状态,必须给a
2.选择器:visited {color: green;} 已访问的链接状态,必须给a
3.选择器:hover {color: blue;} 鼠标滑过链接状态,可以随便给
4.选择器:active {color: yellow;} 鼠标按下去时的状态,必须给a
注意:
- 如果要用动态伪类选择器的话,四个选择器的使用顺序不能颠倒、打乱
- 效果太花里胡哨,记住hover就可以了

5. 浮动属性

浮动属性的使用
- 1.作用:可以改变元素的位置(默认从上到下排列改变成从左到右/从右到左)
- 2.属性:float 使xx漂浮/浮动
- 3.属性值:left/right/none(默认值)
- 4.特点
  - 根据浮动的属性值可以观察得到浮动只能控制元素在水平方向上移动
  - 元素设置浮动,初始位置不存在,漂浮在当前浏览器的上方,后面的盒子就会自动的往上移动
  - 浮动元素的停止条件
    - 浮动元素不会飘出当前的父级元素,碰到父级元素的边框就会停止浮动
    - 还会碰到前面一个含有浮动属性的元素也会停止浮动
- 5.特殊情况:当子级元素的宽度大于父级元素宽度的时候,最后一个子级元素会像气球一样往下移动直至找到足够的空间
浮动的特殊情况:浮动元素只会覆盖住元素盒子大小,不会覆盖住文本内容(真实的DOM结构)
- 文本图片环绕效果

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 400px;
            background-color: pink;
        }
        .box1{
            width: 200px;
            height: 300px;
            background-color: blueviolet;
            float: left;
        }
        .box2{
            width: 300px;
            height: 110px;
            background-color: red;
            float: left
        }
        .box3{
            width: 350px;
            height: 300px;
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

文本图片环绕效果：

<style>
        div{
            width: 700px;
            height: 400px;
            background-color: pink
        }
        img{
            float: left;
        }
    </style>


    <div>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F07%2F20200707115919_ixfvo.thumb.100_100_c.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654930650&t=c6d4fea6c020f62dcfc1ff7ad0501f8f" alt="">
        <p>
            <b> 我是ikun</b> 我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun我是ikun
        </p>
    </div>

6. 盒模型

6.1，盒模型的概念

1.盒模型的作用:设置元素与元素之间的位置关系(调间距)
2.盒模型的组成:
- content 内容区域不做讨论盒子的宽高大小
- padding 内边距
- border 边框
- margin 外边距
3.盒模型的分类
- 标准的盒模型
- 怪异的盒模型

6.2，盒模型中的外边距margin的使用

1.属性:margin
2.作用:主要是用来设置同级元素之间的位置关系
3.特点
- 属性值要设置为数值加单位
- 属性值的设置方法
  - 一个值:上下左右
  - 两个值:上下左右
  - 三个值:上左右下
  - 四个值:上右下左(前端默认的顺序方向是顺时针)
- 属性值还可以添加方向
  - margin-top
  - margin-right
  - margin-bottom
  - margin-left
4.固定搭配
- *{margin:0;padding:0} 清除浏览器的外边距
- 版心的选择器{margin:0 auto} 版心居中
5.margin的常见bug
- 两个盒子上下排列,分别设置margin-top/bottom的时候,会错误的取之间的最大值
- 如果父级元素下面只有一个子级元素的时候,给自己元素设置margin-top会错误的解析到父级元素

  <style>
        .box1{
            width: 100%;
            height: 200px;
            background-color: greenyellow;
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color: red;
            margin-top: 50px;
        }
    </style>


    <div class="box1">
        <div class="box2"></div>
    </div>

效果：

6.3，盒模型中的内边距padding的使用

1.声明: padding数值加单位
2.作用: 设置父级元素与子级元素之间的位置关系
3.特点
- margin和padding之间可以换着用,使用灵活
- padding添加的位置
- 可以添加在父级元素上:padding会撑大当前父级元素的宽高大小, 为了不影响后面的布局需要在初始宽高上减去相应的padding值(控制所有的子级元素都会移动位置)
- 可以添加在子级元素上:padding会撑大当前子级元素的宽高大小(控制单个子级元素的位置)
4.方向属性值的设置

   <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* padding: 50px 宽高都加了50*2 */
            /* padding-top: 100px; */
        }
        .p1{
            padding-left: 50px;
        }
        .p2{
            padding-left: 100px;
        }
    </style>


    <div>
        <p class="p1">你的对象1</p>
        <p class="p2">你的对象2</p>
    </div>

效果：

6.4，盒模型的边框使用

1.属性:
- border-width 边框的宽度
- border-style 边框的样式
- border-color 边框的颜色
2.属性值
- 边框的宽度:数值+单位(像素px)
- 边框的样式:solid(实线) dashed(虚线) dotted(点线) double(双实线)
- 边框的颜色(背景颜色、字体颜色)
  - 英文单词:red、blue、green
  - 十六进制:
    - 以#开头的后面有六位字符数0123456789abcdef(ABCDEF)
    - 常见的十六进制:#000000 #cccccc #ffffff(当六位字符相同的时候可以省略三位)
  - rgb/rgba(red,green,blue,alpha)
    - 取值范围是0~255,,透明度的取值范围是0~1
3.复合属性/简写方式
- 属性:border
- 属性值:5px solid red (顺序可以互换)
4.边框的需求
- 需要改变上面边框的颜色:border-top-color:red
- 需要改变上面边框的所有:border-top:2px dashed green
- 需要清除边框:border:none
5.案例:面试题常见的图形绘制-三角形

<style>
    html{
         background-color: pink
    }
    div{
         width: 0px;
         height: 200px;
         border: 50px solid red;
         border-top-color: green;
         border-right-color: rgba(00, 00, 00, 0);
         border-bottom-color: transparent; /* 透明 */
         border-left-color: transparent;
    }
</style>

<body>
    <div></div>
</body>

效果：