CSS 学习笔记

最新推荐文章于 2024-07-25 15:44:34 发布
最新推荐文章于 2024-07-25 15:44:34 发布
阅读量297 收藏
点赞数 8
分类专栏： 前端 文章标签： css html html5 前端 javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/learner_syj/article/details/120497797
版权

文章目录

什么是CSS

  • Cascading Style Sheet 层叠级联样式表

  • CSS:表现（美化网页）

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动

CSS的导入方式：

  • 链接式：

    html

外部样式：
<link rel = "stylesheet" href = "css/style.css">

  • 导入式

    @import是CSS2.1特有的！

    <style>
	@import url("css/style.css");
<style/>

CSS的基础语法：

  • CSS的语法非常简单
选择器{
声明1；
声明2；
声明3；
}	注意每个声明都要以分号结尾

选择器设定方式：

  • 标签选择器：选择一类标签
<标签名>{
声明1；
声明2；
声明3；
}
<h1>..
<h2>..
<h1>..
  • 类选择器：选择一类名
.class(名称){
    声明1；
    声明2；
    声明3；
}
<h1 class = "...">..
<h2 class = "...">..
<h3 class = "...">..

  • id选择器，选择唯一的标签

    注意id的值全局唯一，且不能以数字开头

    #idname{
声明1；
声明2；
声明3；
}
<h1 id = "...">..
<h1 id ="。。。">..

优先级：id>class>标签

层次选择器：

1.后代选择器

/*后代选择器*/
body p{
background:red;
}

2.子选择器

/*子选择器,此处指body 标签下的第一级p标签才会置为红色*/
body>p{
background:red;
}

3.相邻兄弟选择器（只有一个：向下（相邻））

.classname + p{		/*特指某些类的标签*/
background:red;
}

4.通用兄弟选择器，当前选中元素的向下的所有兄弟元素

.classname ~ p{
background:red;
}

结构伪类选择器：

所有带冒号的都是伪类

  • 一个选择器可以同时选择多个元素
 <style>
        ul li:last-child{
            background:chartreuse;
        }
        ul li:first-child{
            background:red;
        }
    </style>

  <link rel="stylesheet" href="Demo01.css">
    <style>
        /*ul 的第一个子元素*/
        ul li:last-child{
            background:chartreuse;
        }
        /*ul 的最后一个子元素*/
        ul li:first-child{
            background:red;
        }

        /*选中p标签父元素的第一个子元素（迂回）
        选择当前p元素的父级元素的第一个，并且是当前元素才生效！

        */
        p:nth-child(3){
            background: #1260d4;
        }
        p:nth-of-type(1){
            background: #12d494;
        }
    </style>

在这里插入图片描述

属性选择器：

  • 属性选择器是前端部分的重中之重

  • 改进：将id 和 class 结合，使选择器更加强大

  • 可以结合正则表达式来使用属性选择器

    
    = 绝对等于
    *= 包含这个元素
    ^= 这个开头
    $= 以这个结尾
    
    属性名，属性名 = 属性值（正则）
    存在id属性的元素       a[]{}
   a[id]{*/
     background: yellow;
   }

  id = first的元素
  a[id = first]{
    background:yellow;
  }

   class 中有links的元素：
   a[class *= "links"]{
      background: yellow;
    }

  选中href中以http开头的元素
  a[href^=http]{*/
    background: #12d494;
  }

美化网页元素

为什么要美化网页

  • 有效传递页面元素
  • 美化页面元素
  • 凸显主题
  • 提高用户体验

span标签： 一些重点的字，用span标签容纳

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面元素美化</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>

欢迎学习
<span id ="title1">java</span>

</body>
</html>

字体样式：

<style>
  body{
    font-family: 楷体;
  }
  h1{
    font-size: 50px;
  }
  p{
    font-weight: bold;
    color: blue;
  }
</style>

文本样式

  • 颜色 color rgb rgba
  • 文本对其方式 text-align:center
  • 首行缩进 text-indent:2em(两个字符长度)
  • 行高 （line-height）：单行文字上下居中：line-height = height :行高等于height !
  • 装饰（text-decoration）
  • 文本图片水平对齐： certical-align:middle (注意选择器中要有两个选项，位置是相对的，应该是相对对齐)

超链接伪类

    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: aqua;
        }
        /*鼠标悬停后的颜色*/
        a:hover{
            color: red;
            font-size: 50px;
        }
        a:active{
            color: #12d494;
        }
        a:visited{
            color: antiquewhite;
        }
        /*阴影颜色 水平偏移 垂直偏移 阴影半径*/
        #name{
            text-shadow:peru 10px 10px 2px;
        }
    </style>
</head>
<body>
<a href="123132321">
    <img src="../Source/img/a.png" alt="">
</a>
<p>
    <a href="#"id="name">麦克斯奥特曼</a>
</p>
<p>
    <a href="#">M78星云</a>
</p>

</body>

列表

#nav{
    width: 500px;
}
li[data-cid = "0"]{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: #12d494;
}
/*
list-style:none:去掉列表前面的点
*/
ul li{
    background: #12d494;

    height: 50px;
    list-style: square;
    text-indent: 1em;
}
li:hover{
    color: orange;
}

背景图片

背景颜色
backgroundcolor
背景图片
#nav{
    width: 500px;
}
li[data-cid = "0"]{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: #12d494;
}
/*
list-style:none:去掉列表前面的点
*/
ul li{
    background: #12d494;
    background-image:url("../Source/img/a.png") ;
    background-repeat: no-repeat;
    background-postion:50px 2px ;
    height: 50px;
    list-style: square;
    text-indent: 1em;
}
li:hover{
    color: orange;
}
渐变

url :Gradient Hunt - Beautiful Color Gradients (一个渐变材料的开源网站)

  • 我们可以直接从这个网站挑选自己喜欢的渐变颜色复制代码到我们的css中
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(14,174,87,1) 0%, rgba(12,116,117,1) 90% );

效果演示：

在这里插入图片描述

盒子模型

在这里插入图片描述

什么是盒子模型

Margin: 外边距

Padding:内边距

Border:边框

边框

  • 边框的粗细
  • 边框的样式
  • 边框的颜色
  <style>
    /*border: 粗细，样式，颜色*/
    body{
      margin: 0;
    }
    #box{
      width: 300px;
      border:1px solid red ;
    }
    form{
      background:olivedrab;
    }
    div:nth-of-type(1) input{
      border:3px solid blue;

    }
    div:nth-of-type(2) input{
      border:3px dashed purple;

    }
  </style>

盒子模型Html:（原则就是尽量的使用div标签来分块）

<div id="box">
  <h2>登录界面</h2>
  <form action = "#">
    <div>
      <span>用户名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码：</span>
      <input type="text">
    </div>

  </form>

</div>

外边距

    /*margin的顺序是顺时针顺序： 上右下左*/    
h2{
      background: aqua;
      color: antiquewhite;
      line-height: 30px;
      margin: 1px 1px 2px 3px;
    }

圆角边框

边框有4个脚

  <style>
    /*左上、右上、右下、左下 角的顺序是顺时针的四个角
    圆圈： 圆角= 半径
    */
div{
  width: 100px;
  height: 100px;
  border: 10px solid blue;
  border-radius: 100px 100px 100px 100px;
}
    img{
      border-radius: 100px 100px 100px 100px;
    }
  </style>

盒子阴影：

div{
  width: 100px;
  height: 100px;
  border: 10px solid blue;
    box-shadow: 10px 10px 100px yellow;
}
    img{
      border-radius: 100px 100px 100px 100px;
    }
  </style>

浮动

标准文档流：

在这里插入图片描述

块级元素：独占一行

h1~h5 div p

行内元素：不独占一行

  • 行内元素可以被包含在块级元素中，但是不能包含块级元素

DisPlay

<!--
        block 块元素
        inline 行内元素
        inline-block 是块元素但是保持着行内元素的特性
        

-->
    div{
      width: 100px;
      height: 100px;
      border: 1px solid black;
      display: inline-block;
    }
    /*inline-block -->即是行内元素也是块元素*/

    span{
      width: 100px;
      height: 100px;
      border:1px solid black;
      display:none;/*行内元素和块元素的转换 是块元素，但是可以内联在一行*/
        /*转为块元素*/
    }

浮动 Float

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 2px #000 solid;
}
.layer01{
    border: 2px #F00 dashed;
    display: inline-block;
    float: right;

}
.layer02{
    border: 2px #00F dashed;
    display: inline-block;
    float: right;

}
.layer03{
    border: 2px #060 dashed;
    display: inline-block;
    float: right;

}
/*
    clear:right 右侧不允许有浮动
    clear:left 左侧不允许有浮动
    clear:both 两侧不允许有浮动

*/
.layer04{
    border: 2px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
    clear: right;

}
  • 对应的Html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link rel="stylesheet" href="float.css" type="text/css">
</head>
<body>
<div id="father">
  <div class="layer01"><img src="../Source/img/1.png" alt=""></div>
  <div class="layer01"><img src="../Source/img/2.png" alt=""></div>
  <div class="layer01"><img src="../Source/img/3.png" alt=""></div>
    <div class="layer04">
    浮动的盒子可以向右浮动也可以向左浮动，直到它的外边缘触碰到包含边框在内的块元素
    </div>
</div>
</body>
</html>

父级边框塌陷

clear:

/*
    clear:right 右侧不允许有浮动
    clear:left 左侧不允许有浮动
    clear:both 两侧不允许有浮动
*/

解决方案：

1.增加父级元素的高度

2.增加一个空的div

    <div class="clear"></div>
.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3.Overflow

在父级元素中增加一个overflow属性: hidden

4.父类添加一个伪类

#father:after{
    content: "";
    display: block;
    clear: both;
}
.layer

可以避免空div的情况

小结

  • 浮动元素后加空的div

    简单，但是代码中尽量避免空div

  • 设置父级标签的的高度

    简单，但元素假设有了固定的高度，就会被限制

  • Overflow

    简单，下拉了一些场景（尽量避免使用）

  • 父类下面添加一个伪类

    简单、有效（非常推荐、没有副作用）

对比

  • display: 方向不可控制
  • float : 要解决父级边框塌陷的问题

定位

相对定位

相对于原来的位置进行指定的偏移：

top、left、bottom、right

由于是相对位置进行移动，所以移动的方向是和显示 的方向是相反的

  <style>
    div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;

    }
    #father{
      border:2px solid #12d494;
    }
    #first{
      border:2px dashed #12d494;
      background: yellow;
      position: relative;
      top:-20px;
      left: 20px;
    }
    #second{
      border:2px dashed #12d494;
      background: yellow;

    }
    #third{
      border:2px dashed #12d494;
      background: yellow;
      bottom: -20px;

    }
  </style>

练习题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .father{
      width: 300px;
      height: 300px;
      border: 2px solid black;
      padding: 10px;
    }
    a{
      width: 100px;
      height: 100px;
      text-decoration: none;
      background: #12d494;
      line-height: 100px;
      text-align: center;
      display: block;
    }
    a:hover{
      background: antiquewhite;
    }
    #a2 {
      position: relative;
      left: 200px;
      top: -100px;

    }
    #a4 {
      position: relative;
      left: 200px;
      top: -100px;

    }
    #a5{
      position: relative;
      left: 100px;
      top: -300px;
    }

  </style>
</head>
<body>
<div class="father">
  <a href="#" id="a1">链接1</a>
  <a href="#" id="a2">链接2</a>
  <a href="#" id="a3">链接3</a>
  <a href="#" id="a4">链接4</a>
  <a href="#" id="a5">链接5</a>

</div>

</body>
</html>

在这里插入图片描述

绝对定位

基于XXX定位 上下左右…

1、没有父级元素定位的前提下、相对于浏览器定位

2、假设父级元素存在定位，我们通常会对父级元素进行偏移

    #first{
      border:2px dashed #12d494;
      background: yellow;
      position: absolute;
      top:-20px;
      left: 20px;
    }
z-index

在这里插入图片描述

  • 透明度可以直接用opacity设置

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #content{
      margin: 0px;
      padding: 0px;
      overflow: hidden;
      font-size: 12px;
      line-height: 25px;
      border: 2px #0000FF solid;
    }
    ul,li{
      padding: 0px;
      margin: 0px;
      list-style: none;
    }
    /*父级元素相对定位*/
    #content ul{
      position: relative;
    }
    .tiptext,tipbg{
      position: absolute;
      width: 300px;
      border: 2px black solid;
    }
  </style>
</head>
<body>
<div id="content">
  <ul>
    <li><img src="../Source/img/1.png" alt=""></li>
    <li class="tiptext">黑丝真好看</li>
    <li class="tipbg">时间： 2099 年 老色皮</li>
    <li>地点： 海南大学</li>

  </ul>
</div>
</body>
</html>
穆青_
关注
  • 8
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
css学习笔记
12-20
本人自己学习CSS过程中亲自总结的思维导图，结构清晰，重点突出，便于记牢
CSS学习笔记
m0_58761900的博客
09-18 3051
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
css学习笔记1
qq_42236791的博客
12-12 919
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 2255
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
CSS学习笔记目录
wz_1992的博客
05-30 445
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
前端css基础学习笔记
a_big_panda的博客
01-22 918
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
【CSS学习笔记】
weixin_45037690的博客
08-12 770
Cascading Style Sheet 层叠样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动CSS1.0CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1：浮动，定位CSS3.0：圆角、阴影、动画…浏览器兼容性。
h5+css学习笔记
m0_62410752的博客
03-15 396
个人学习笔记，自己看的
黑马程序员pink老师_CSS学习笔记
热门推荐
weixin_46764819的博客
03-07 1万+
CSS参考手册网址 一、CSS字体样式属性 font-size：字号 相对长度单位 说明 em 相当于当前对象内文本的字体尺寸 px 像素【最常用，推荐使用】 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 font-family：字体样式 p { 　　font-family: "宋体"；／＊可以写多个字体，用英文逗号隔开，表示找不到１字体去找２字体，.
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
flex：1
m0_47999208的博客
07-25 285
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 376
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
CSS相关记录
oThrowsException的博客
07-24 639
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
HOW - CSS 定义颜色值
weixin_58540586的博客
07-22 1237
使用 CSS 提供的预定义颜色名。示例：color: red;/* 红色 *//* 蓝色 *//* 浅灰色 */综合利用这些颜色定义方式，可以根据项目需求选择最合适的颜色表示方法。/* 十六进制颜色 *//* RGB 颜色 *//* HSL 颜色 *//* 预定义颜色名 *//* 透明的 RGBA 颜色 *//* LCH 颜色 *//* Lab 颜色 *//* HWB 颜色 *//* CSS4 颜色模块 */
Vue 3 + Vite 项目中安装 Tailwind CSS
lq099526的专栏
07-22 419
安装 Tailwind CSS步骤，失效，样式不加载
Programming in the Large CSSE2002
最新发布
w976j_的博客
07-25 492
❼❼❼SheePComponents❼❼Savingnotnot).TheandSeeSee。
CSS学习笔记：从入门到精通
"这是一份关于CSS学习的文档，作者参考了狂神的课程，旨在深化前端技术理解，特别是为了更好地学习Vue.js。文档详细介绍了CSS的基础知识，包括CSS的概念、发展历史、快速入门方法、选择器、网页美化、盒子模型以及...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值