CSS学习笔记

1、学习路线

CSS是什么

CSS怎么用（快速入门）

CSS 选择器（重点+难点）

美化网页（文字、阴影、超链接、列表、渐变....）

盒子模型

浮动

定位

网页动画（特效效果）

1.1、什么是CSS

Cacading Style Sheel 层级样式表

CSS ：表现（美化网页）

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

1.2快速入门

外部CSS的优势：

内容表现分离

网页结构统一、可以实现复用

样式十分丰富

利用SEO，容易被搜索引擎收录。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--网页内置CSS-->
    <style>
        h1{
            color: #e70880;
        }
    </style>
<!--外部CSS文件引入：
        推荐使用外部引入格式
        -->
    <link rel="stylesheet" href="CSS/index.css">
</head>
<body>

<!--优先级：就近原则，利标签最近的CSS优先展示-->
<!--行类样式-->
<h1 style="color: #000cfa" >大家好，欢迎学习CSS</h1>

</body>
</html>

2、选择器

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

2.1、基本选择器

优先级：id > class > 标签

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器  标签名{} */
        h1{
            color: #e70880;
        }
        p{
            color: #e70880;
        }
    </style>
</head>
<body>

<h1>大家好，欢迎学习CSS</h1>
<p>段落标签</p>

</body>
</html>

类选择器 class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式     .class的名称{}
        优点：可以将各种标签归类，可以复用
        */
        .wyx{
            color: #023df5;
        }
    </style>
</head>
<body>
<h1 class="wyx">类选择器</h1>
<h1 class="wyx">类选择器</h1>
</body>
</html>

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式     #id的名称{}
        id必须保证全局唯一！
        */
        #wyx{
            color: #023df5;
        }
        #w{
            color: #00fa3b;
        }
    </style>
</head>
<body>
<h1 id="wyx">ID选择器</h1>
<h1 id="w">ID选择器</h1>
</body>
</html>

2.2、层次选择器

后代选择器：在某个元素后面的所有元素
body p{

}
子选择器：选择某个元素的后面一代元素
body>p{

}
兄弟选择器：选择同辈的元素向下的一个元素（同辈）
body h1 + p{

}
通用选择器：选择同辈的元素向下的所有元素（同辈）
body h1~p{

}

2.3、结构伪类选择器

伪类：在选择的元素中添加一些条件继续选择

/*选择ul下的第一个li*/
ul li:first-child{
    background-color: #00fa3b;
}
/*选择ul下的最后一个li*/
ul li:last-child{
    color: #e70880;
}
/*选中当前元素父元素下的第n个元素*/
p:nth-child(1){
    color: #82ff00;
}
/*选中当前元素父元素下类型为（当前元素类型）的第n个元素*/
p:nth-of-type(2){
    color: #e00808;
}

2.4、属性选择器（常用）

id+class 结合~

/*
	属性名，属性名=属性值（可以是正则）
	= 绝对等于
	*= 包含这个属性值
	^= 以这个开头的
	$= 以这个结尾

格式：标签名[属性名=属性值]{
}
*/

3、美化网页

span标签：用来接住重要的关键字，突出重点。

3.1、字体样式

font-family: 楷体; 字体样式
font-size: 50px; 字体大小
font-weight: bold; 字体粗细
color: #ff0606; 字体颜色
/*
oblique：斜体
bolder：粗体
字体大小：
字体样式
*/
font:oblique bolder 16px  "楷体，Arial";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
font-family: 楷体;    字体样式
font-size: 50px;     字体大小
font-weight: bold;   字体粗细
color: #ff0606;      字体颜色
-->
    <style>

        body{
            font-family: 楷体;
        }
        h1{
            font-size: 50px;
        }
        p{
            font-weight: bold;
            color: #ff0606;
        }
        #p1{
            /*
            oblique：斜体
            bolder：粗体
            字体大小：
            字体样式
            */
            font:oblique bolder 16px  "楷体，Arial";
            color: blue;
        }
   </style>
</head>
<body>
<h1>大圣娶亲</h1>
<p id="p1">牛魔王抢走了铁扇公主的宝扇，将一众人等带回妖窟，至尊宝为逃避铁扇假装跳悬崖，不料真的掉了下去，却救了三个被抓住的小偷。宝在昏迷中将三人带到盘丝洞，这时白晶晶慕盘丝大仙之名前来拜师，宝向其说明前因后果，决定和她成亲。另一方面，牛魔王逼迫紫霞结婚，紫霞幻想自己的意中人会踏着五彩祥云来救自己。白晶晶看见了紫霞留在至尊宝心里的一滴眼泪，发现宝之所以回到五百年前其实是为了寻找紫霞，她留下一封信后离去。至尊宝迷乱之余，春三十娘来到，将宝和其他三人杀死。宝死后回到了水帘洞，他决定戴上金箍圈，一心一意保护唐僧西天取经。</p>
<p>紫霞和青霞原是佛祖缠在一起的灯芯，两人前世斗争激烈。紫霞夺走了至尊宝的月光宝盒，又在他的脚上印下了3颗痣。紫霞要至尊宝带她走，牛魔王要纳紫霞为妾，而牛的妹妹牛香香也要嫁至尊宝，一时乱作一团。铁扇公主也赶来和牛魔王杀在一起。牛魔王擒回紫霞逼迫她与他成亲，被绑在一旁的唐僧流下了同情的泪水。至尊宝拿起金箍套在头上，他便不再是凡人了。孙悟空驾云来到牛府，要救唐僧一行去西天取经。</p>
<p>故事发生在《大话西游》上一集《月光宝盒》之前500年。至尊宝被月光宝盒带回到五百年前，恰巧遇到紫霞仙子。紫霞仙子曾有一誓言，只要谁能拔出她手中的紫青宝剑，就是她的意中人。不想宝剑被至尊宝拔出，紫霞决定以身相许，却遭至尊宝拒绝。</p>
</body>
</html>

3.2、文本样式

颜色： color rgb：颜色函数 rgba：颜色函数，a代表透明度取值0~1
文本对齐方式：text-align = center
首行缩进：text-indent: 2em
行高：line-height: 单行文字上下居中！ line-height = height
装饰：text-decoration:值（有上中下三种横行）超链接去除下划线。none
文本图片水平对齐：vertical-align: middle

3.3、阴影

/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#p{
    text-shadow: #bfa 10px -10px 2px;
}

3.4、超链接伪类

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

3.6、列表

/*ul li*/
/*list-style:
	none 去掉圆点
	circle 空心圆
	decimal	数字
	square	正方形
	url(xxx.gif)	图片列表
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

3.6、背景

/* 颜色，图片，图片位置，平铺方式 */
div{
    background: red url("/images/1.jpg" 270px 10px no-repeat)
}
/* 分开写 */
div{
    background-color: red;
    background-image: url("/images/1.jpg");
    background-repeat: no-repeat;
    background-position: 270px 10px;
}

3.7、渐变

渐变CSS参考网站

4、盒子模型

margin：外边距

padding：内边距

border：边框

4.1、边框

边框的粗细
边框的样式

边框的颜色

border: 粗细 样式 颜色
border: 1px solid red

4.2、圆角边框

四个角，是可以选择圆的方向，也可以将头像弄成圆形

border-radius: 10px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid orange;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div>
</div>
</body>
</html>

4.3、盒子阴影

/*box-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
div{
    box-shadow: #bfa 10px -10px 2px;
}

5、浮动

行内元素可以被包含到块级元素中，反之，不可以。

5.1、display

改变元素的类型常用以下三种值：

block（块元素）

inline（行内元素）

inline-block（同时拥有两个元素的属性）

5.2、float

向左浮动
向右浮动

5.3、父级边框塌陷问题(面试常考)

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

解决方案：

增加父级元素的高度

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

选中增加的div{
    clear: both;
    margin: 0;
    padding: 0;
}

在父级元素(CSS)中添加一个 overflow: hidden

父类添加一个伪类(常用推荐)

父级元素:after{
    content: '';
    display: block;
    clear: both;
}

6、定位

6.1、相对定位

相对于原来自己的位置发生偏移，原来的位置会保留。

标签{
    position: relative;/*开启相对定位*/
    top: -20px;
    left: 20px;
    bottom: 40px;
    right: 40px;
}

6.2、绝对定位

没有父元素的情况下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父元素定位，不能脱离父级元素
它不在标准文档流中，原来位置不会保留。

6.3、固定定位 fixed

相对于浏览器不会动，如何滚动浏览器都不会动，常用于导航栏。

标签{
    position: fixed;
    /*上下左右任选两个来确定位置*/
}

6.4、z-index

当图层被覆盖时，利用z-index调节图层显示0~无穷大，级数越高，越优先显示。

z-index: 2;
/*透明度 取值0~1*/
opacity: 0.5;

posted @ 2021-02-01 18:02 橘子有点甜阅读(78) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）

公告

昵称：橘子有点甜
园龄： 4年1个月
粉丝： 4
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

橘子有点甜