CSS合集

CSS基础

14e9ba08ada5ad244923a4ffb1b41165

CSS基础1 CSS导入方式2 基本选择器3 层次选择器4 伪类选择器5 属性选择器6 字体样式7 文本样式8 超链接伪类9 背景样式10 盒子模型11 圆角边框12 浮动13 overflow14 定位15 z-index16 动画17 网格元素18 弹性盒元素

CSS基础

1 CSS导入方式

行内样式，内部样式，外部样式，样式的生效条件遵循就近原则

html:

xxxxxxxxxx
301
2<html lang="cn">
3<head>
4    <meta charset="UTF-8">
5    <title>导入方式title>
6
7    
8    <style>
9        /*css注释*/
10        h1{
11            color: goldenrod;
12        }
13        h2{
14            color: goldenrod;
15        }
16    style>
17
18    <link rel="stylesheet" href="css/style.css">
19
20head>
21<body>
22
23
24
25<h1 style="color: crimson">一级标题h1>
26<h2>二级标题h2>
27<h3>三级标题h3>
28
29body>
30html>

css:

xxxxxxxxxx
41/*外部样式*/
2h3{
3    color: blueviolet;
4}

2 基本选择器

优先级规则：id选择器>class选择器>标签选择器

html:

xxxxxxxxxx
111
5<h1> 学Javah1>
6<h2>认识Javah2>
7<p>JavaSEp>
8<p>JavaEEp>
9<p id="OM">Linuxp>
10<p class="front">HTMLp>
11<p class="front">CSSp>

css:

xxxxxxxxxx
151h1{
2    color: blueviolet;
3    background: wheat;
4    border-radius: 5px;
5}
6p{
7    color: blue;
8    font-size: 20px ;
9}
10.front{
11    color: chartreuse;
12}
13#OM{
14    color: gold;
15}

3 层次选择器

html:

xxxxxxxxxx
301<p>p1p>
2<p>p2p>
3<p>p3p>
4
5<ul>
6    <li>
7        <p>p4p>
8        123
9    li>
10    <li>
11        <p>p5p>
12    li>
13    <li>
14        <p>p6p>
15    li>
16ul>
17
18<p class="act">p7p>
19<p class="act1">p8p>
20<p>p9p>
21<p>p10p>
22
23<ul>
24    <li>
25        <p>p11p>
26    li>
27ul>
28
29<p>p12p>
30

css:

xxxxxxxxxx
191/*后代选择器 body内所有p标签*/
2body p{
3    background: greenyellow;
4}
5
6/*子选择器 所有父级是li的p标签*/
7li>p{
8    background: crimson;
9}
10
11/*相邻兄弟选择器（向下）：只有一个 跟在.act后的第一个元素*/
12.act+p{
13    background: gold;
14}
15
16/*通用兄弟选择器（向下）：所有兄弟 .act1后的每一个p标签*/
17.act1~p{
18    background: blueviolet;
19}

4 伪类选择器

html:

xxxxxxxxxx
121<h1>h1h1>
2<p>p1p>
3<p>p2p>
4<p>p3p>
5
6<ul>
7    <li>li1li>
8    <li>li2li>
9    <li>li3li>
10ul>
11
12<a href="../1%20第一个CSS程序/index.html">点击跳转a>

css:

xxxxxxxxxx
281/*第一个子元素*/
2ul li:first-child{
3    color: gold;
4}
5
6/*最后一个子元素*/
7ul li:last-child{
8    color: blue;
9}
10
11/*选择当前元素的父级元素，选中父级元素的第二个，并且是当前元素类型*/
12li:nth-child(2){
13    color: crimson;
14}
15
16/*选择父级元素下的p元素的第一个*/
17p:nth-of-type(1){
18    color: chartreuse;
19}
20
21a{
22    color: black;
23}
24
25/*鼠标放到链接上时*/
26a:hover{
27    background: blueviolet;
28}

5 属性选择器

html:

xxxxxxxxxx
121<p class="demo">
2    <a href="https://www.baidu.com" class="links item first" id="first">1a>
3    <a href="../1%20第一个CSS程序/index.html" class="links item active" target="_blank" title="css">2a>
4    <a href="images/2.jpg" class="links item">3a>
5    <a href="images/3.jpg" class="links item">4a>
6    <a href="images/123.jpg" class="links item">5a>
7    <a href="aaa">6a>
8    <a href="abc.doc">7a>
9    <a href="111.doc">8a>
10    <a href="abs.pdf">9a>
11    <a href="abc.gif" class="links item last">10a>
12p>

css:

xxxxxxxxxx
391.demo a{
2    float: left;
3    display: block;
4    height: 50px;
5    width: 50px;
6    background: wheat;
7    border-radius: 5px;/*圆角*/
8    text-align: center;/*水平居中*/
9    color: grey;
10    text-decoration: none;/*字体样式*/
11    margin-right: 5px;
12    font: bold 20px/50px Arial;
13}
14
15/*属性名 = 属性值（正则）
16= 绝对等于
17*= 包含等于
18^= 以开头
19$= 以结尾
20*/
21/*存在ID属性的元素*/
22a[id=first]{
23    background: gold;
24    color: black;
25}
26
27/*class中有links的属性*/
28a[class*=links]{
29    background: chartreuse;
30}
31
32/*选择href中以http开头*/
33a[href^=http]{
34    background: crimson;
35}
36
37a[href$=doc]{
38    background: blue;
39}

6 字体样式

xxxxxxxxxx
41font-family: "Fira Code Light",楷体; /*字体*/
2font-size: 20px; /*字体大小*/
3font-weight: bold; /*字体粗细*/
4color: #323131; /*字体颜色*/

7 文本样式

xxxxxxxxxx
131text-indent: 2em; /*字体缩进*/
2background: wheat; /*背景颜色*/
3height: 330px; /*块高*/
4line-height: 30px; /*行高*/
5text-decoration-line: overline underline line-through; /*上中下划线*/
6text-shadow: 1px 1px 1px blueviolet; /*文本阴影*/
7list-style: none; /*列表原点 :去除*/
8text-align: center; /*居中*/
9
10/*文字相对图片居中*/
11img,span{
12    vertical-align: middle;
13}

8 超链接伪类

xxxxxxxxxx
91/*鼠标悬浮*/
2a:hover{
3    color: gold;
4    font-size: 25px;
5}
6/*鼠标点击*/
7a:active{
8    color: crimson;
9}

9 背景样式

xxxxxxxxxx
41background-image: url("../images/1.jpg"); /*背景图片*/
2background-repeat: repeat-x;/*水平平铺*/
3background-repeat: no-repeat;/*不平铺*/
4background-image: linear-gradient(57deg, #3890e8 36%, #6adabb 84%); /*背景渐变*/

渐变生成

10 盒子模型

xxxxxxxxxx
101/*margin 外边距 border 边框 padding 内边距*/
2border: 1px solid black; /*边框 border 粗细，样式，颜色*/
3margin: 200px auto; /*外边距 margin 上下距 左右距 */
4margin-bottom: 20px; /*外边距下*/
5margin-top: 18px; /*外边距上*/
6padding: 200px 100px; /*内边距 margin 上下距 左右距 */
7padding-right: 200px; /*内边距右*/
8padding-left: 100px; /*内边距左*/
9
10box-shadow: 10px 10px yellow; /*块阴影*/

11 圆角边框

xxxxxxxxxx
11border-radius: 30px 10px; /*圆角 左上右下 左下右上*/

12 浮动

xxxxxxxxxx
91float: right; /*浮动 left左 right右*/
2clear: both; /*清除浮动：both左右不允许有浮动 left左 right右*/
3
4/*父级框架塌陷清除 伪类 在.wrap后添加元素*/
5.wrap:after{
6    content: "";
7    display: block;
8    clear: both;
9}

display

xxxxxxxxxx
11display: inline-block; /*同时具备块元素与行元素特性*/

13 overflow

xxxxxxxxxx
31/*超出显示区*/
2overflow: scroll; /*滚动条*/
3overflow: hidden; /*隐藏*/

14 定位

x
1position: relative; /*相对定位 相对元素原来位置*/
2position: absolute; /*绝对定位 相对父级元素位置 父级没有定位属性相对于浏览器*/
3position: fixed; /*固定定位 相对于浏览器 固定位置不会变*/
4position: sticky; /*粘性定位 固定定位与绝对定位的结合 相于父级元素进行固定定位*/
5
6/*定位距离*/
7top: 40px;
8left: 40px;

15 z-index

xxxxxxxxxx
11z-index: 10; /*数值越大 位于顶层*/

16 动画

xxxxxxxxxx
141div{
2    width: 100px;
3    height: 100px;
4    background: red;
5    position: relative;
6    animation:myFirst 3s linear 1s infinite;
7}
8@keyframes myFirst{
9    0%   {background:red; left:0px; top:0px;transform: rotate(0deg);}
10    25%  {background:yellow; left:100px; top:0px;transform: rotate(-90deg);}
11    50%  {background:blue; left:100px; top:100px;transform: rotate(-180deg);}
12    75%  {background:green; left:0px; top:100px;transform: rotate(-270deg);}
13    100% {background:red; left:0px; top:0px;transform: rotate(-360deg);}
14}

17 网格元素

x
1/*网格元素*/
2display: grid;
3grid-template-columns: 1fr 2fr 1fr; /*列宽度设置 fr：自动分配单位*/
4grid-gap: 10px;/*网格间隙*/
5
6/*行列起始结束 代表元素的起始与结束的位置*/
7grid-column-start: 1;
8grid-column-end: 3;
9grid-row-start: 1;
10grid-row-end: 3;

18 弹性盒元素

x
1display: flex;
2direction: rtl; /*从右到左排列*/
3justify-content: center; /*居中排列*/

前端基础前端 CSS

CSS合集

CSS基础

1 CSS导入方式

2 基本选择器

3 层次选择器

4 伪类选择器

5 属性选择器

6 字体样式

7 文本样式

8 超链接伪类

9 背景样式

10 盒子模型

11 圆角边框

12 浮动

13 overflow

14 定位

15 z-index

16 动画

17 网格元素

18 弹性盒元素

相关

DOM修改使用DOM操作CSS

Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）

HTML和CSS

1.css布局技巧

Scss支持多主题切换的方案实现

google icons 的使用和 css 设置图标为 loading 状态

nodejs 一个简单的web服务器，用于前端自己快速测试部署

深入理解前端跨域方法和原理

【前端单元测试入门04】Karma

node-scss npm的时候报错

前端MVC Vue2学习总结（六）——axios与跨域HTTP请求、Lodash工具库

前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）

标签