CSS3基础学习

1. 什么是CSS

1.1 CSS介绍

CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

1.2 发展史

CSS1.0

CSS2.0 DIV（块）+ CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画...浏览器兼容性~

1.3 快速入门

style

基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--规范，<style>可以编写css的代码，每一个声明，最好使用 " ; " 结尾
    语法:
        选择器{
            声明1;
            声明2;
            声明3;
           }
-->
<!--css引入-->
<link rel="stylesheet" href="css/style.css">
<body>
<h1>我是标题</h1>
</body>
</html>

h1{
    color: red;
}

建议使用这种规范

CSS的优势

内容表现分离
网页结构统一，可以实现复用
样式十分的丰富
建议使用独立于html的css文件
利于SEO，容易被搜索引擎收录

1.4 CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--内部样式    -->
    <style>
        h1{
            color: blue;
        }
    </style>
<!--外部样式    -->
    <!--第一种方法    -->
    <link rel="stylesheet" href="css/style.css">
    <!--第二种方法，但不推荐使用    -->
    <style>
        @import url("css/style.css");
    </style>
</head>
<body>
<!--优先级: 就近原则 -->
<!--行内样式: 在标签元素中，编写一个style属性，编写样式即可    -->
<h1 style="color: red;">导入方式</h1>

<h2>外部样式的两种写法,@import是CSS2.1特有的，不推荐使用，推荐使用链接式</h2>
</body>
</html>

2. 选择器

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

2.1 基本选择器

优先级 : id > class > 标签

1. 标签选择器

标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
            标签选择器，会选择到页面上所有的这个标签的元素
         */
        h1{
            color: #36ce26;
            background: aqua;
            border-radius: 55px;
        }
        p{
            font-size: 88px;
        }
    </style>
</head>
<body>
<h1> 标签选择器</h1>
<h1> 我是第二个</h1>
<p>跟着狂神学Java</p>
</body>
</html>

2.类选择器

.类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
            类选择器的格式: .class的名称{}
            好处 : 可以多个标签归类，是同一个class，可以复用

         */
        .leng{
            color: blue;
        }
        .lonelyyang3{
            color: #a24fff;
        }
    </style>
</head>
<body>
<h1 class="leng">标题1</h1>
<h1 class="lonelyyang3">标题2</h1>
<h1>标题3</h1>
<p class="lonelyyang3"> 跨标签使用</p>
</body>
</html>

3. id选择器

#id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
            id选择器 : id必须保证全局唯一
            格式 ：  #id名称{}
            不遵循就近原则，固定的选择顺序
            优先级 ： id选择器 > class选择器 > 标签选择器
         */
        #leng{
            font-size: 44px;
            color: #a24fff;
        }
        #lonelyyang3{
            color: #36ce26;
        }
        .style1{
            color: aqua;
        }
        #yang{
            color: blue;
        }
        h1{
            color: salmon;
        }
    </style>
</head>
    
<body>
<h1 id="leng">标签1</h1>
<h1 id="lonelyyang3">标签2</h1>
<h1 class="style1">标签3</h1>
<h1 >标签4</h1>
<h1 id="yang" class="style1">标签5</h1>
</body>
</html>

2.2 层次选择器

1.后代选择器

在某个元素后面

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

2.子选择器

一代，只选择到下一级

/*子选择器*/
body>p{
    background: #36ce26;
}

3.相邻兄弟选择器

只选择一个，同级相邻向下，若此同级之间有不同级的其他标签，则不会产生选择

/*相邻兄弟选择器*/
.active + p{
    background: #a24fff;
}

4.通用选择器

选择当前所选元素下的所有同级元素

/*通用选择器*/
.active~p{
    background: aqua;
}

2.3 结构伪类选择器

/*选中ul的第一个子元素*/
        ul li:first-child{
            background: #a24fff;
        }
        /*选中ul的最后一个子元素*/
        ul li:last-child{
            background: #36ce26;
        }

        /*选中p1 : 定位到父元素，选择当前的第一个元素
        先选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效，按顺序
        */
        p:nth-child(1){
            background: aqua;
        }
        /*选中p2: 选中父元素下的p元素的第二个    */
        p:nth-of-type(2){
            background: gold;
        }
        a:hover{
            background: salmon;
        }

<p>p1</p>
<p>p2</p>
<p>p3</p>
<a href="">覆盖颜色</a>
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
</ul>

效果图

2.4属性选择器（常用）

属性名 = 属性值（正则）

常用:

*=: 包含这个元素

^=:以这个开头

$=:以这个结尾

先上总结（参考菜鸟教程）:

"value 是完整单词" 类型的比较符号: ~=, |=

"拼接字符串" 类型的比较符号: *=, ^=, $=

1.attribute 属性中包含 value:　

[attribute~=value] 属性中包含独立的单词为 value，例如：

[title~=flower]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" />

[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：

[title*=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

2.attribute 属性以 value 开头:

[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：

[lang|=en]     -->  <p lang="en">  <p lang="en-us">

[attribute^=value] 属性的前几个字母是 value 就可以，例如：

[lang^=en]    -->  <p lang="ennn">

3.attribute 属性以 value 结尾:

[attribute$=value] 属性的后几个字母是 value 就可以，例如：
a[src$=".pdf"]

3.美化网页元素

3.1为什么要美化网页？

1.有效的传递页面信息

2.美化网页，吸引用户

3.凸显页面的主题

4.提高用户的体验

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


<style>
    #t1{
        font-size:50px;
    }
</style>

<body>
学习一个好东西 <span id="t1">java</span>
</body>

3.2字体样式

分别设置格式：

font-family: 字体样式、

font-size: 字体大小

font-weight：字体粗细

color: 字体颜色

可包含属性总设置：

font:风格粗细大小样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p[class=p1]{
            font-family: 楷体;
            color: salmon;
        }
        .p2{
            font-weight: bolder;
        }
        .p3{
            font-weight: 399;
        }
        #t1{
            font: oblique bolder 20px "fangsong" ;
        }
    </style>

</head>
<body>
<h1>《辉夜大小姐想让我告白～天才们的恋爱头脑战～》</h1>
<p class="p1">电视动画片《辉夜大小姐想让我告白～天才们的恋爱头脑战～》改编自赤坂明创作的同名漫画作品，由A-1 Pictures负责制作，于2019年1月12日至3月30日播出 [2]  ，全12集。</p>

<p class="p2">电视动画片第2期于2020年4月11日至6月27日播出，全12集。 [3-4]</p>
<p class="p3">电视动画片第3期于2022年4月8日起播出 [35]  。</p>

<p id="t1">
    秀知院学园是秀才云集的菁英学校，在学生会中担任学生会副会长·四宫辉夜遇见了学生会长·白银御行。
    原以为这两个任谁都觉得很登对的天才应该很快就会在一起，但这两人却因为过高的自尊心导致他们终没能向对方告白。
    “该用什么办法才能让对方向自己告白呢？”在这场恋爱头脑战中用尽各种智慧谋略、身经百战的两人，各自在心中下了某个决心。
    在秀知院学园高中部的文化节“奉心祭”的最终日到来前，两人的恋情将会出现巨大的进展。
</p>
</body>
</html>

3.3文本样式

颜色： RGB（红绿蓝） ：六位调色 0~F
RGBA ： A： 透明度 0~1
text-align: 排版
text-indent: 2em ：段落首行缩进
height: 50px; 块的高度
line-height: 50px; 行高和块的高度一致，就可以上下居中
text-decoration: underline : 下划线
text-decoration: line-through : 横线
text-decoration: overline : 上划线
vertical-align:middle : 垂直居中
text-decoration: none : 取消下划线

h1{
    color: rgba(0,22,444,50%);
    text-align: center;
}
.p1{
    text-indent: 2em;
}
.p2{
    background: darkorange;
    height: 50px;
    line-height: 50px;
}

.l1{
    text-decoration: underline;
}
.l2{
    text-decoration: line-through;
}
.l3{
    text-decoration: overline;
}
img,span{
    vertical-align:middle;
}
a{
    text-decoration: none;
}

<body>
<p>
    <img src="yiguo.jpg" alt="一果可爱捏" height="80" width="180">
    <span>一果可爱捏</span>
</p>
<a href="">点我点我</a>
<h1>《辉夜大小姐想让我告白～天才们的恋爱头脑战～》</h1>
<p class="p1">电视动画片《辉夜大小姐想让我告白～天才们的恋爱头脑战～》改编自赤坂明创作的同名漫画作品，由A-1 Pictures负责制作，于2019年1月12日至3月30日播出 [2]  ，全12集。</p>
<p class="l1">我是帅哥乱入</p>
<p class="l2">我是帅哥乱入</p>
<p class="l3">我是帅哥乱入</p>
<p class="p2">电视动画片第2期于2020年4月11日至6月27日播出，全12集。 [3-4]</p>
<p class="p3">电视动画片第3期于2022年4月8日起播出 [35]  。</p>

<p id="t1">
    秀知院学园是秀才云集的菁英学校，在学生会中担任学生会副会长·四宫辉夜遇见了学生会长·白银御行。
    原以为这两个任谁都觉得很登对的天才应该很快就会在一起，但这两人却因为过高的自尊心导致他们终没能向对方告白。
    “该用什么办法才能让对方向自己告白呢？”在这场恋爱头脑战中用尽各种智慧谋略、身经百战的两人，各自在心中下了某个决心。
    在秀知院学园高中部的文化节“奉心祭”的最终日到来前，两人的恋情将会出现巨大的进展。
</p>
</body>

3.4阴影

text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径

#price{
    text-shadow: deeppink  5px 10px 2px;
}

3.5超链接伪类、

/* 正常，未访问过的链接*/
a:link{
    color: #a24fff;
}
/*用户已经访问过的链接*/
a:visited{
    color:aqua;
}
/* 默认的颜色 */
a{
    text-decoration: none;
    color: #000000;
}
/* 鼠标悬浮的状态*/
a:hover{
    color: darkorange;
    font-size: 50px;
}
/* 鼠标按住未释放的状态*/
a:active{
    color: #36ce26;
}

3.6列表

list-style:
	none : 去掉原点
    circle: 空心圆
    decimal: 数字
    square : 正方形

#nav{
    background:gainsboro;
    width: 275px;
}

.title1{
    font-size: 20px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 35px;
    background: red;
    width: 275px;
}

ul li{

    list-style: none;
    font-size: 18px;
    height: 30px;
}
a{
    font-size: 17px;
    text-decoration: none;
    color: black;
}
a:hover{
    color: deeppink;
    text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="style/style.css">
</head>
<body>
<h2 class="title1">全部商品分类</h2>
<div id="nav">
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个人化妆</a></li>
        <li><a href="#">礼品</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品</a>&nbsp;&nbsp;<a href="#">饮料</a>&nbsp;&nbsp;<a href="#">咖啡</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">旅行</a></li>
    </ul>
</div>

</body>
</html>

3.7背景

背景颜色

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;/*边框粗细  实线  颜色  */
            background-image: url("img.png");
            /*
                默认是全部平铺的
             */
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>

</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

3.8渐变

优站:Grabient

background-color: #FA8BFF;
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);

4.盒子模型

4.1什么是盒子模型

margin:外边框

border:边框

padding:内边框

4.2边框

边框的粗细
边框的样式

边框的颜色、

/* 粗细 边框类型 颜色*/
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
}
h2{
    background: red;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
}
#app{
    width: 300px;
    border:1px solid red;
}
.l1 :nth-of-type(1){
    border: 3px solid red;
}
.l2 :nth-of-type(1){
    border: 3px dashed black;
}
.l3 :nth-of-type(1){
    border: 3px solid #0004ff;
}

4.3内外边距

/*外边距的妙用：居中元素
margin: 0 1px 2px 3px;顺时针旋转
margin: 0 auto;
上下 左右
padding同理
*/

盒子的计算方式：

你这个元素到底多大？

margin+border+padding+内容宽度

5.浮动

5.1 标准文档流

5.2 display

5.3 float

5.4 父级边框塌陷的问题

clear

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

解决方案：

增加父级元素的高度

#father{
    border:1px #000 solid;
    height:800px
}

增加一个空的div标签，清除浮动

<div class="clear"></div>
.clear{
    clearl:both;

}

overflow

在父级元素中添加一个：overflow:hidden;

父类添加一个伪类:after（推荐）

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

小结：

display

方向不可以控制
float

浮动起来的话会脱离标准文档流，所以需要解决父级边框塌陷的问题~

6.定位

6.1相对定位

position:relative;

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            background: pink;
            text-decoration: none;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: blue;
        }
        .a2,.a4{
            position: relative;
            right: -200px;
            top:-100px
        }
        .a5{
            position: relative;
            right: -100px;
            top: -300px;
        }
    </style>
</head>
<body>
<div id="box">
    <a href="#" class="a1">链接1</a>
    <a href="#" class="a2">链接2</a>
    <a href="#" class="a3">链接3</a>
    <a href="#" class="a4">链接4</a>
    <a href="#" class="a5">链接5</a>
</div>
</body>
</html>

6.2绝对定位

定位：基于xxx定位，上下左右~

没有父级元素定位的前提下，相对浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
在父级元素范围内移动

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

6.3固定定位

fixed

6.4z-index

图层

z-index

opacity:透明度

posted @ 2022-07-30 23:28 HFUUwzy 阅读(85) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

HFUUwzy