【狂神说JAVA】CSS(通俗易懂版)

最新推荐文章于 2023-09-21 11:36:32 发布
最新推荐文章于 2023-09-21 11:36:32 发布
阅读量232 收藏 2
点赞数 1
分类专栏： 前端 文章标签： 定位 html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SUN__CGJ/article/details/110144290
版权

1、CSS的3种导入方式

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

    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>

    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>

<!--优先级：就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">这是标签</h1>
</body>
</html>

2、选择器

2.1基本选择器

2.1.1标签选择器

选择一类标签 标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: aqua;
        }
    </style>
</head>
<body>
<h1>标签1</h1>
<h1>标签2</h1>
<h1>标签3</h1>
<h1>标签4</h1>
</body>
</html>

2.1.2类选择器(class)

选择所有class一致的标签，跨标签，格式：.类名{}

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

    <style>
        /*类选择器的格式 .class的名称{}
            好处：可以多个标签归类，是同一个class，可以复用
        */
        .demo1{
            color: blue;
        }
        .demo2{
            color: red;
        }
        .demo3{
            color: aqua;
        }
    </style>
</head>
<body>
<h1 class ="demo1">类选择器：demo1</h1>
<h1 class="demo2">类选择器：demo2</h1>
<h1 class="demo3">类选择器：demo3</h1>
</body>
</html>

2.1.3id 选择器

全局唯一，格式：#id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器：id必须保证全局唯一
            #id名称{}
            不遵循就近原则，优先级是固定的
            id选择器 > 类选择器  >  标签选择器
        */
        #demo1{
            color: aqua;
        }
        .demo2{
            color: red;
        }
        #demo2{
            color: orange;
        }
        h1{
            color: blue;
        }
    </style>
</head>
<body>

<h1 id="demo1">id选择器：demo1</h1>
<h1 class="demo2" id = "demo2">id选择器：demo2</h1>
<h1 class="demo2">id选择器：demo3</h1>
<h1>id选择器：demo4</h1>
<h1>id选择器：demo5</h1>
</body>
</html>

**注意：**优先级：id > class > 标签

2.2层次选择器

2.2.1后代选择器

在某个元素的后面

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

2.2.2子选择器

子类一代

/*子选择器*/
<style>
body>p{
	background:orange;
}
</style>

2.2.3相邻的兄弟选择器

注意：同辈只有一个，相邻（向下）

/*相邻兄弟选择器：只有一个，相邻（向下）*/
<style>
.active+p{
background: red
}
</style>

<body>
	<p class="active">p1<p>
	<p>p2</p>
</body>

2.2.4通用选择器

注意：当前选中元素的向下的所有兄弟元素

<style>
/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
	.active~p{
	background:red;
}
</style>
<body>
	<p class="active">p1<p>
	<p>p2</p>
</body>

2.3结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: aqua;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: blue;
        }
        /*选中p1：定位到父元素，选择当前的第一个元素
            选择当前p元素 的父级元素，选中父级元素的第一个，并且是当前元素才生效！
        */
        p:nth-child(1){
            background: orange;
        }
        /*选中父元素下的，第2个p元素*/
        p:nth-of-type(2){
            background: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <ul>
        <li>l1</li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p7</p>
</body>
</html>

2.4属性选择器（常用）

标签[属性名=属性值(正则)]{}

正则：
=表示绝对等于
*=表示包含
^=表示以...开头
$=表示以...结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         .demo a{
            display: block;
            height: 50px;
            width: 50px;
            float:left;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: beige;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
         /*属性名，属性名=属性值（正则）
         =表示绝对等于
         *=表示包含
         ^=表示以...开头
         $=表示以...结尾
         存在id属性的元素  a[]{}
         */
        /* a[id]{
             background: red;
         }*/

         /*id=first的元素*/
       /* a[id=first]{
            background: aqua;
        }*/

        /*class中有links元素*/
       /* a[class = "links item2 first2"]{
            background: orange;
        }*/
        /*a[class*="links"]{
            background: black ;
        }*/
        /*选中href中以http开头的元素*/
        a[href^="http"]{
            background: orange;
        }
    </style>

</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="/adad/faf" class="links item2 first2" >2</a>
    <a href="qwe123" class="links item3 first3" >3</a>
    <a href="eweqe" class="links item4 first4" >4</a>
    <a href="rrrrr" class="links item5 first5" >5</a>
    <a href="ttt" class="links item6 first6" >6</a>
    <a href="yyy" class="links item7 first7" >7</a>
</p>
</body>
</html>

image-20201124150445770

3、美化网页元素

3.1为什么要美化网页

  1. 有效的传递页面信息
  2. 美化网页，页面漂亮才能吸引客户
  3. 凸显页面的主题
  4. 提高用户的体验

span标签：重点要突出的字，使用span标签套起来

font-family：字体
font-size：字体大小
font-weight：字体粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #study{
            font-size: 100px;
        }
    </style>
</head>
<body>
学习<span id="study">CSS</span>
</body>
</html>

3.2字体样式

font-weight:bolder;/*也可以填px，但数值不能超过900,900相当于bloder*/
/*常用写法：*/
font:oblique bloder 12px "楷体"

3.3文本样式

  1. 颜色–>color
  2. 文本对齐方式–>text-align：center
  3. 首行缩进–>text-indent：2em
  4. 行高–>line-height：300px；
  5. 下划线–>text-decoration
color:red;/*红色*/
text-align: center;/*居中*/
text-decoration:underline/*下划线*/
text-decoration:line-through/*中划线*/
text-decoration:overline/*上划线*/
text-decoration:none/*超链接去下划线*/

图片、文字水平对齐

img,span{vetical-align:middle}

3.4文本，阴影和超链接伪类

<style>
	a{/*超链接有默认的颜色*/
		text-decoration:none;/*下划线设置为空*/
		color:#000000;
	}
	a:hover{/*鼠标悬浮的状态*/
		color:orange;
	}
	a:active{/*鼠标按住未释放的状态*/
		color:green
	}
	a:visited{/*点击之后的状态*/
		color:red
	}
</style>

阴影：

/*	第一个参数：表示水平偏移
	第二个参数：表示垂直偏移
	第三个参数：表示模糊半径
	第四个参数：表示颜色
*/
text-shadow:5px 5px 5px 颜色

3.5列表ul li

/*list-style{
	none:去掉原点
	circle：空心圆
	decimal：数字
	square：正方形
}*/
ul li{
	height:30px;
	list-style:none;
	text-indent:1em;
}
a{
	text-decoration:none;
	font-size:14px;
	color:#000;
}
a:hover{
	color:orange;
	text-decoration:underline
}
/*放在div中，作为导航栏*/
<div id="nav"></div>
#nav{
	width:300px;
}

3.6列表ul li

/*list-style{
	none:去掉原点
	circle：空心圆
	decimal：数字
	square：正方形
}*/
ul li{
	height:30px;
	list-style:none;
	text-indent:1em;
}
a{
	text-decoration:none;
	font-size:14px;
	color:#000;
}
a:hover{
	color:orange;
	text-decoration:underline
}
/*放在div中，作为导航栏*/
<div id="nav"></div>
#nav{
	width:300px;
}
12345678910111213141516171819202122232425

3.7背景

  1. 背景颜色：background
  2. 背景图片
background-image:url("");/*默认是全部平铺的*/
background-repeat:repeat-x/*水平平铺*/
background-repeat:repeat-y/*垂直平铺*/
background-repeat:no-repeat/*不平铺*/

综合使用

background:red url("图片相对路劲") 270px 10px no-repeat
background-position：/*定位：背景位置*/
12

4、盒子模型

4.1什么是盒子模型

  1. margin：外边距
  2. padding：内边距
  3. border：边框

4.2边框

border：粗细 样式 颜色

  1. 边框的粗细

  2. 边框的样式

  3. 边框的颜色

    测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #nav{
            text-align: center;
            width: 300px;
            height: 200px;
            border:1px solid red;
        }
        #user input{
            border: 2px solid green;
        }
    </style>
</head>
<body>
<div id="nav">
    <h1>会员登录</h1>
    <form action="#">
        <div id="user">
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

4.3外边距----妙用：居中

margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下

margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
/*例1：居中*/
margin:0 auto /*auto表示左右自动*/
/*例2：*/
margin:4px/*表示上、右、下、左都为4px*/
/*例3*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/
1234567

盒子的计算方式：
margin+border+padding+内容的大小

总结：
body总有一个默认的外边距 margin:0
常见操作：初始化

margin:0;
padding:0;
text-decoration:none;
123

4.4圆角边框----border-radius

border-radius有四个参数（顺时针），左上->右上->右下->左下
圆圈：圆角=半径

5、浮动

5.1标准文档流

image-20201125203024023

块级元素：独占一行 h1~h6 、p、div、 列表…
行内元素：不独占一行 span、a、img、strong

注： 行内元素可以包含在块级元素中，反之则不可以。

5.2、display（重要）

  • block：块元素
  • inline：行内元素
  • inline-block：是块元素，但是可以内联，在一行

这也是一种实现行内元素排列的方式，但是我们很多情况用float

  • none：消失
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--block 块元素
        inline 行内元素
        inline-block 是块元素，但是可以内联 ，在一行
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

5.3float：left/right左右浮动

clear：both

5.4overflow及父级边框塌陷问题

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

解决塌陷问题方案：
方案一：增加父级元素的高度；
方案二：增加一个空的div标签，清除浮动

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

方案三：在父级元素中增加一个overflow：hidden

overflow:hidden/*隐藏*/
overflow：scoll/*滚动*/

方案四：父类添加一个伪类:after

#father:after{
	content:'';
	display:block;
	clear:both;
}

小结：

  1. 浮动元素增加空div->简单、代码尽量避免空div
  2. 设置父元素的高度->简单，元素假设没有了固定的高度，就会超出
  3. overflow->简单，下拉的一些场景避免使用
  4. 父类添加一个伪类:after（推荐）->写法稍微复杂，但是没有副作用，推荐使用

5.5display与float对比

  1. display：方向不可以控制
  2. float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。

6、定位

6.1、相对定位

相对定位：positon：relstive；
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留

top:-20px;
left:20px;
bottom:-10px;
right:20px;

7、css总结

---SUN---
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS笔记[狂神版]
weixin_47741922的博客
07-30 207
CascadingStyleSheet层叠级联样式表CSS表现（美化网页）
狂神说——CSS3最新教程快速入门通俗易懂
05-26
本教程“狂神说——CSS3最新教程快速入门通俗易懂”旨在帮助初学者快速掌握CSS3的核心概念和实际应用，通过实例解析，使学习过程更为直观易懂。 一、选择器增强 1. 类选择器：CSS3扩展了类选择器的用法，如`....
【狂神说】CSS学习笔记
pan_h1995的博客
05-07 8300
参考B站狂神说视频教程
【狂神说JAVA】CSS详细笔记(全)
Martin-share的博客
01-18 1053
【狂神说JAVA】CSS笔记（全）
CSS笔记
YANKUOP的博客
10-29 176
CSS学习记录
狂神说java系列笔记（java基础+javaweb+ssm+微服务）全套
04-26
【标题】：“狂神说java系列笔记”涵盖了Java的基础、Web开发、SSM框架以及微服务等关键领域，是一套全面深入的Java学习资源。它旨在帮助初学者和进阶者掌握Java编程语言的核心概念，以及在实际项目开发中的应用。 ...
基于狂神说Java的超市订单管理系统（SMBMS）设计源码
最新发布
03-28
这是一个基于狂神说Java开发的超市订单管理系统（SMBMS），使用Java语言开发，包含113个文件。主要文件类型包括31个Java源文件、23个JavaScript文件、20个JSP文件、18个PNG图片文件、5个CSS文件、4个JPG图片文件、3...
狂神说java的笔记和源码.zip
05-16
狂神说java的笔记和源码 狂神说java的笔记和源码 狂神说java的笔记和源码 狂神说java的笔记和源码 狂神说java的笔记和源码 狂神说java的笔记和...
狂神说Java笔记资料
04-14
《狂神说Java笔记资料》是一份全面涵盖Java开发基础知识的文档集，旨在帮助学习者系统地掌握Java编程。这份笔记包含多个章节，每个章节都深入讲解了一个特定的主题，覆盖了从初学者到进阶开发者必备的知识点。 1. *...
狂神说视频-CSS笔记.pdf
11-12
主要根据狂神说的视频整理CSS
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
此资源为我跟着B站up主【遇见狂神说】java系列视频中前端入门部分学习过程中所写 大部分和视频保持一致，有一些自己的理解和一些扩展的部分
CSS完整笔记
weixin_68478645的博客
01-29 650
font-size：大小尺寸 ：值：inherited 默认值16px px像素 %百分比相对于父标签的 字体大小的百分比 em 倍数 相对于父元素标签字体大小的倍 数 rem 相对于根标签文本字体的尺寸。hand（手型）、crosshair （“十”型）、text （“I”型）、wait（等待）、default （默认）、help（帮助）、类选择器：以点为前缀。font：简写：font：font-style|font-weight|font-size|font-family。
CSS3 笔记
SwaeLeeUknow的博客
03-09 196
CSS 文章目录CSS1.什么是CSS？1.1、什么是CSS1.2、发展史1.3、快速入门 1.什么是CSS？ 如何学习 CSS是什么 CSS怎么用（快速入门） CSS 选择器（重点 + 难点） 美化网页（文字，阴影，超链接，列表，渐变…） 盒子模型 浮动 定位 网页动画（特效） 菜鸟教程、W3C 1.1、什么是CSS Cascading Style Sheet 层叠级联样式表 CSS：表现（美化网页） 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动 1.2、发展史 CSS1.0 CSS
【狂神说Java】CSS3快速入门
weixin_54533016的博客
02-26 174
跟着B站的狂神说学习CSS3，学习总结如下CSS3快速学习提示：以下是本篇文章正文内容，下面案例可供参考Cascading Style Sheet 层叠级联样式表CSS：表现（美化网页）字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…标签说明margin外边距padding内边距border边框。
狂神CSS
rua的博客
08-14 76
狂神CSS学习笔记
CSS @B站狂神说学习笔记
weixin_61655270的博客
08-27 122
cascading style sheet层叠级联样式表CSS：表现层（美化网页包括字体，颜色，边距，宽度，背景图片，网页定位，网页浮动）
CSS笔记汇总-最全最仔细（会时刻更新）
小女不才
09-21 1320
样式表优点缺点使用情况控制范围行内样式书写方便，权重高没有实现样式和结构相分离较少一个标签内部样式部分结构和样式像分离没有彻底分离较多控制一个页面外部样式完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点一个完整的网页 ，是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。浮动可以让多个块级元素行显示或者左右对齐盒子 ，多个块级盒子水平显示就用浮动布局。定位。
CSS学习笔记
qq_46485137的博客
02-28 3921
css的基本知识 一、初识CSS 1.1 CSS是什么 1.2 CSS发展史 1.3CSS的三种导入方式 1.3.1 内部样式： 1.3.2 外部样式（推荐使用）： 1.3.3 行内样式 二、CSS选择器⭐ 三、美化网页（文字，阴影，超链接，列表） 四、盒子模型 五、浮动 六、定位 七、网页动画（特效） 一、初识CSS 1.1 CSS是什么 CSS：Cascading Style Sheet 层叠级联样式表 ...
狂神说java系列笔记
05-09
1. 简单易懂：狂神的语言通俗易懂，注重实例演示，让读者可以很容易地理解Java的各个概念和技术。 2. 全面深入：狂神的笔记内容非常全面，从Java基础到高级技术都有详细讲解，让读者可以系统地了解Java的各个方面。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值