首页 > 其他分享> > 前端基础_CSS笔记

前端基础_CSS笔记

2022-06-06 01:31:32 作者：互联网

CSS

1 概述

1.1 什么是Css

Css：Cascading Style Sheet层叠级联样式表，表现

如何使用Css

css选择器（重点）
美化网页（文字，阴影，超链接，列表，渐变）
盒子模型
浮动
定位
网页动画（特效）

工具网站

菜鸟教程：https://www.runoob.com/
W3School：https://www.w3school.com.cn/index.html

1.2 发展历

CSS1.0

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

CSS2.1 浮动，定位

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

1.3 快速入门

使用方法

style标签 <style></style>
外部链接 <link rel="stylesheet" href="css/style.css">
注释 /**/，Idea快捷键Ctrl + /

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范<style>可以编写css代码，每一个声明都以;结尾
    语法：
    选择器 {
        声明1;
        声明2;
    }
    -->
    <!--内部样式-->
    <style></style>
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
 <!--行内样式-->
<h1 style="">我是标题</h1>

</body>
</html>

css使用优势

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

1.4 Css的几种导入方式

导入方式

行内样式：在标签元素中，编写style属性的样式即可
内部样式：在head头部使用style标签
外部样式：在head头部使用link引入<link rel="stylesheet" href="路径.css">

优先级：就近原则，行内优先级最大，其次，内部和外部样式会被覆盖，哪个在后面哪个优先级大

扩展：外部样式的两种写法

链接式

<link rel="stylesheet" href="css/style.css">

导入式：css2.1特有的，style标签使用@import url("路径.css")，弊端：如果受网络影响，样式会后加载。
```
<style>
	@import url("css/style.css");
</style>
或
<style>
	@import "css/style.css";
</style>
```

2 选择器

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

2.1 基本选择器

标签选择器：选择一类标签
类选择器 class：选择所有class属性一直的标签，跨标签 .类名{}
id选择器 id：全局唯一！#id名{}

作用优先级：id选择器>类选择器>标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3种基本选择器</title>
    <style>
        /* 标签选择器 会选择页面上所有这个标签的元素*/
        h1 {
            color: red;
            border-radius: 10px;
            background: aquamarine;
        }
        /* 类选择器  .class名称 */
        .h1class {
            color: blueviolet;
            border-radius: 10px;
            background: aquamarine;
        }
        /* id选择器  #id名称 id全局唯一且不能以数字开头*/
        #pid {
            font-size: 24px;
            color: brown;
        }
    </style>
</head>
<body>
<h1>标签选择器</h1>
<h1 class="h1class">类选择器</h1>
<p id="pid">id选择器</p>
</body>
</html>

2.2 层次选择器

后代选择器空格

/*后代选择器*/
ul li {
	background: red;
}

子选择器 >

/*子选择器*/
div>p{
	background: aqua;
}

相邻兄弟选择器 +

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

<p>p1</p>
<p class="active">p2</p>
<p>p3</p>     <!-- 该标签会改变-->
<p>p4</p>

通用选择器 ~

/*通用兄弟选择器，当前选中元素的向下的所有兄弟*/
.active~p {
	background: cadetblue;
}

2.3 结构伪类选择器

伪类：条件

伪类选择器hover可以在鼠标移到链接上时设置一些特殊样式，比如字体大小,背景颜色，显示隐藏等等。

注：伪类选择器hover 可以作用于所有元素

常用伪类

:first-child :last-child
:nth-child(1) :nth-of-type(1)
:hover

/*ul的第一个子元素*/
ul li:first-child {
    background: antiquewhite;
}
/*ul的最后一个子元素*/
ul li:last-child {
    background: aquamarine;
}
/*选中p1，定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/
p:nth-child(1) {
    background: brown;
}
/*选中父元素下的p元素的第二个，类型和选中元素一样
*/
p:nth-of-type(2){
    background: darkseagreen;
}
/*选中时设置的样式*/
p:hover {
    background: darkturquoise;
}

2.4 属性选择器（重点）

=  结对等于
*= 包含等于
^= 开头等于
$= 结尾等于

id+class结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .top {
            display: flex;
            height: 50px;
        }
        .top div {
            margin: 0px auto;
        }
        /*
        font字体属性
        斜体：italic
        粗体：bold
        20px/50px：字体大小和行高
        Arial：字体格式
        */
        div a {
            float: left;
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 10px;
            text-align: center;
            /*line-height: 50px;*/
            font: italic bold 20px/50px Arial;
            background: darkturquoise;
            color: white;
            text-decoration: none;
            margin: 5px;
        }
        /*属性名[属性名=属性值] 正则
        =  结对等于
        *= 包含等于
        ^= 开头等于
        $= 结尾等于

        */
        /*带有id属性的元素*/
        a[id]{
            background: yellow;
        }
        /*id为first的元素*/
        a[id=first]{
            background: darkgray;
        }
        /*class中存在links的元素*/
        a[class*="links"]{
            background: chartreuse;
        }
        /*选中href中以http开头的元素*/
        a[href^="https"]{
            background: chartreuse;
        }
        /*选中href中以png结尾的元素*/
        a[href$="png"]{
            background: chartreuse;
        }

    </style>
</head>
<body>
<div class="top">
    <div>
        <a href="https://www.baidu.com/" class="links item first" id="first">1</a>
        <a href="" class="links item active" target="_blank" title="test" >2</a>
        <a href="https://www.baidu.png" >3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">9</a>
        <a href="" id="last">10</a>
    </div>
</div>
</body>
</html>

3 美化网页元素

3.1 为什么美化网页

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

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

div标签：块

3.2 字体样式

/*字体属性
    font-family：字体格式
    font-size：字体大小
    font-weight：字体粗细
    color：字体颜色
	font
		oblique：斜体
		bold：粗体
*/ 
div {
    font-family: "Arial Black",隶书;
    font-size: 20px;
    color: chartreuse;
    font-weight: bold;
}
/*字体风格*/
.spanstyle {
    font:oblique bold 16px "楷体";
}

3.3 文本样式

颜色：color rgb rgba
文本对齐方式：text-align: center;
首行缩进：text-indent: 2em;
行高：line-height 单行文字垂直居中
装饰：text-decoration
文本图片水平对齐：vertical-align: middle;

color颜色：
RGB：取颜色，3个数字一组
RGBA：3个数字+一个透明度属性0-1
text-align：对齐方式
text-indent: 2em; 首行缩进
line-height：行高，可用于垂直居中（行高=块高）
text-decoration: underline; 下划线
text-decoration: line-through; 中划线（删除线）
text-decoration: overline; 上划线
vertical-align: middle; 水平对齐 参照物，a，b
text-decoration: none; 去除a标签下划线

参考代码：

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

    <style>
        div h3 {
            color: rgba(0, 255, 255, 0.7);
            text-align: center;
        }
        div p {
            text-indent: 2em;
        }
        .span2 {
            text-indent: 2em;
            display: inline-block;
        }
        .p111 {
            text-decoration: overline;
        }
        .p112 {
            text-decoration: line-through;
        }
        .p113 {
            text-decoration: underline;
        }
        /* 水平对齐
        vertical-align: middle; 参照物，a，b */
        .imgdiv img, .imgdiv span {
            vertical-align: middle;
        }
        /* 去除a标签下划线 */
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<p class="p111">1111</p>
<p class="p112">1111</p>
<p class="p113">1111</p>
<div>
    <h3>故事介绍</h3>
    <p class="p1">魔族强势，在人类即将被灭绝之时，六大圣殿崛起，带领着人类守住最后的领土。</p>
    <p>一名少年，为救母加入骑士圣殿，奇迹、诡计，不断在他身上上演。</p>
    <p>在这人类六大圣殿与七十二柱魔神相互倾轧的世界，他能否登上象征着骑士最高荣耀的神印王座？</p>
    <hr>
    <span class="span2">When I wake up in the morning, You are all I see; When I think about you, And how happy you make me, Youre everything I wanted; Youre everything I need; I look at you and know; That you are all to me Barry Fitzpatrick.
</span>

</div>
<hr>
<span class="span2">当我在早晨醒来，我看到的仅有你;当我想你的时候，你让我欢乐无比;你是我想要的一切;你的我需要的一切我凝视著你，明白，你是我的一切
</span>

<div class="imgdiv">
    <h3>图片和文字居中</h3>
    <p>
        <img src="../../resources/img/starrySky.png" height="100" width="100">
        <span>123231</span>
    </p>
</div>
</body>
</html>

3.4 阴影

阴影

/*文本阴影 text-shadow
阴影颜色 水平偏移 垂直偏移 阴影半径
*/
text-shadow: #02f182 10px 10px 2px;

3.5 超链接伪类

正常情况下：a， a:hover就足够了

:hover   /*鼠标悬浮的状态（只需要记住hover）*/ 
:active  /*鼠标点击未释放的状态*/
:link    /*未访问的链接样式*/
:visited /*访问之后的链接样式*/

3.6 列表

/*list-style
    none 去掉实点
    circle 空心圆
    decimal 数字
    square 实心方形
*/
ul li {
    line-height: 30px;
    list-style: none;
    text-indent: 1em;
}

3.7 背景

背景颜色

背景图片

/*背景
background,默认repeat平铺
background-repeat: repeat-x; x轴平铺
background-repeat: repeat-y; y轴平铺
background-repeat: round;    随机平铺
background-repeat: no-repeat;  不平铺
颜色，图片，图片位置，平铺方式
background: red url(".png") top 10px right 10px no-repeat;
颜色：background-color
图片：background-image
图片位置：background-position
平铺方式：background-repeat
*/

关键代码：

.main div {
    width: 500px;
    height: 650px;
    border: 1px solid red;
    margin-left: 10px;
    background-image: url("../../resources/img/author.jpg");
    /*默认全部平铺,repeat */
}
.main .div1{
    background-repeat: repeat-x;
}
.main .div2{
    background-repeat: repeat-y;
}
.main .div3{
    background-repeat: no-repeat;
}

3.8 渐变

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

4 盒子模型

4.1 什么是盒子模型

margin：外边距
padding：内边距
border：边框

盒子的计算方式：margin + border + padding +内容宽度

4.2 边框

边框的粗细 border-width
边框的样式 border-style
边框的颜色 border-color

/* border 粗细 样式 颜色
solid：粗线
dashed：虚线
*/ 
border: 1px solid red;

很多东西可能都有一个默认的边距或者下划线，一般我们都会统一处理

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
}

4.3 内外边距及居中

margin和padding可以设置1个值，2个值，3个值

一个值：上下左右
二个值：上下和左右
四个值：上右下左（顺时针）

外边距也可以设置居中：margin: 0px auto;

居中还有一个方式：text-algin: center；

居中的要求

块元素（非块元素可以使用：display: block;将它转换成块元素）
块元素有固定的宽度

4.4 圆角边框

圆角边框 border-radius

一个值：上下左右
二个值：左上和右下
四个值：左上，右上，右下，左下（顺时针）

圆圈：border-radius = (width+padding*2+border*2)/2（半径）

4.5 阴影

阴影：box-shadow

5 浮动

5.1 标准文档流

块级元素：独占一行

h1-h6 p div 列表...

行内元素：不独占一行

span a img strong...

一般情况下，行内元素可以包含在块级元素中，反之则不能

5.2 display

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

/* display属性：
block 块元素
inline 行元素
inline-block ，是块元素,保持原有行内元素的特性，在一行
none
*/

5.3 float

左右浮动float 属性值：left right center

5.4 父级边框塌陷问题

clear

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

解决方案

方法1：增加父级元素的高度（不建议）

/* 方法1 给父元素添加固定高度 */
height: 500px;

方法2：增加一个空的div标签，清除浮动，clear: both;
```
/* 方法2添加空div，设置清除浮动 */
clear: both;
```

方法3：在父级元素中增加一个overflow: hidden;

/* 方法3 给父元素添加溢出隐藏 */
overflow: hidden;

方法4：给父元素添加伪类

 /* 方法4 给父元素添加伪类 */
#father:after{
	content: '';
	display: block;
	clear: both;
}

小结：

浮动元素后面增加空div

简单，代码中尽量避免空div
设置父元素的高度

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

简单，下拉的一些场景避免使用
父类增加一个伪类：after（推荐）

写法稍微复杂一点，但是没有副作用，推荐使用

5.5 对比

display

方向不可控
float

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

6 定位

6.1 相对定位relative

相对定位：position: relative; ，相对于原来的位置，进行指定的偏移，在标准文档中，原来的位置会被保留

position: relative;
top left bottom right

6.1.1 方块定位练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方块定位练习</title>

    <style>
        #main {
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
            margin: 0px auto;
        }
        a {
            width: 100px;
            height: 100px;
            background: pink;
            color: white;
            text-decoration: none;
            text-align: center;
            line-height: 100px;
            display: block;
        }
        a:hover {
            background: aqua;
        }
        .a2, .a4{
            position: relative;
            top: -100px;
            left: 200px;
        }
        .a5 {
            position: relative;
            top: -300px;
            left: 100px;
        }
    </style>
</head>
<body>
<div id="main">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>
</body>
</html>

6.2 绝对定位absolute

绝对定位：position: absolute;，基于xx定位，父级元素也需要设置定位。

没有父级元素定位的前提下，默认是相对于浏览器进行定位
假设父级元素存在定位，我们通常相对于父级元素进行偏移，父级元素设置position: relative;
在父级元素范围内移动，进行指定的偏移，绝对定位的话，不在标准文档中，原来的位置不会被保留。

position: absolute;
top left bottom right

6.3 固定定位fixed

固定定位：position: fixed;

浏览器固定死，常用与某些不会动的元素

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

    <style>
        body {
            height: 2000px;
        }
        div:nth-of-type(1){
            height: 100px;
            width: 100px;
            background: red;
            position: absolute; /* absolute 绝对于浏览器*/
            bottom: 0;
            right: 0;
        }
        div:nth-of-type(2){
            height: 50px;
            width: 50px;
            background: yellow;
            position: fixed; /* fixed 固定定位*/
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4 分层z-index

z-index：元素的堆叠顺序，默认是0

6.5 透明度opacity

opacity: 0.3; /* 透明度 */
filter: opacity(0.3);/* 透明度 *END

7 动画

END

标签：repeat,text,前端,元素,笔记,background,div,选择器,CSS
来源： https://www.cnblogs.com/lyluoye/p/16345778.html