公告

CSS合集

CSS基础

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
30
1
<!DOCTYPE html>
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

20
</head>
21
<body>
22

23
<!--就近原则-->
24
<!--行内样式：在标签元素中，编写style属性-->
25
<h1 style="color: crimson">一级标题</h1>
26
<h2>二级标题</h2>
27
<h3>三级标题</h3>
28

29
</body>
30
</html>

css:


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

2 基本选择器

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

html:


xxxxxxxxxx
11
1
<!--优先级
2
不遵循就近原则
3
id选择器>class选择器>标签选择器
4
-->
5
<h1>&nbsp;学Java</h1>
6
<h2>认识Java</h2>
7
<p>JavaSE</p>
8
<p>JavaEE</p>
9
<p id="OM">Linux</p>
10
<p class="front">HTML</p>
11
<p class="front">CSS</p>

css:


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

3 层次选择器

html:


xxxxxxxxxx
30
1
<p>p1</p>
2
<p>p2</p>
3
<p>p3</p>
4

5
<ul>
6
    <li>
7
        <p>p4</p>
8
        123
9
    </li>
10
    <li>
11
        <p>p5</p>
12
    </li>
13
    <li>
14
        <p>p6</p>
15
    </li>
16
</ul>
17

18
<p class="act">p7</p>
19
<p class="act1">p8</p>
20
<p>p9</p>
21
<p>p10</p>
22

23
<ul>
24
    <li>
25
        <p>p11</p>
26
    </li>
27
</ul>
28

29
<p>p12</p>
30

css:


xxxxxxxxxx
19
1
/*后代选择器 body内所有p标签*/
2
body p{
3
    background: greenyellow;
4
}
5

6
/*子选择器 所有父级是li的p标签*/
7
li>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
12
1
<h1>h1</h1>
2
<p>p1</p>
3
<p>p2</p>
4
<p>p3</p>
5

6
<ul>
7
    <li>li1</li>
8
    <li>li2</li>
9
    <li>li3</li>
10
</ul>
11

12
<a href="../1%20第一个CSS程序/index.html">点击跳转</a>

css:


xxxxxxxxxx
28
1
/*第一个子元素*/
2
ul li:first-child{
3
    color: gold;
4
}
5

6
/*最后一个子元素*/
7
ul li:last-child{
8
    color: blue;
9
}
10

11
/*选择当前元素的父级元素，选中父级元素的第二个，并且是当前元素类型*/
12
li:nth-child(2){
13
    color: crimson;
14
}
15

16
/*选择父级元素下的p元素的第一个*/
17
p:nth-of-type(1){
18
    color: chartreuse;
19
}
20

21
a{
22
    color: black;
23
}
24

25
/*鼠标放到链接上时*/
26
a:hover{
27
    background: blueviolet;
28
}

5 属性选择器

html:


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

css:


xxxxxxxxxx
39
1
.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属性的元素*/
22
a[id=first]{
23
    background: gold;
24
    color: black;
25
}
26

27
/*class中有links的属性*/
28
a[class*=links]{
29
    background: chartreuse;
30
}
31

32
/*选择href中以http开头*/
33
a[href^=http]{
34
    background: crimson;
35
}
36

37
a[href$=doc]{
38
    background: blue;
39
}

6 字体样式


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

7 文本样式


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

10
/*文字相对图片居中*/
11
img,span{
12
    vertical-align: middle;
13
}

8 超链接伪类


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

9 背景样式


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

渐变生成

10 盒子模型


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

10
box-shadow: 10px 10px yellow; /*块阴影*/

11 圆角边框


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

12 浮动


xxxxxxxxxx
9
1
float: right; /*浮动 left左 right右*/
2
clear: both; /*清除浮动：both左右不允许有浮动 left左 right右*/
3

4
/*父级框架塌陷清除 伪类 在.wrap后添加元素*/
5
.wrap:after{
6
    content: "";
7
    display: block;
8
    clear: both;
9
}

display


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

13 overflow


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

14 定位


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

6
/*定位距离*/
7
top: 40px;
8
left: 40px;

15 z-index


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

16 动画


xxxxxxxxxx
14
1
div{
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
/*网格元素*/
2
display: grid;
3
grid-template-columns: 1fr 2fr 1fr; /*列宽度设置 fr：自动分配单位*/
4
grid-gap: 10px;/*网格间隙*/
5

6
/*行列起始结束 代表元素的起始与结束的位置*/
7
grid-column-start: 1;
8
grid-column-end: 3;
9
grid-row-start: 1;
10
grid-row-end: 3;

18 弹性盒元素


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

posted on 2021-12-01 10:22 Egoistic_Flowers 阅读(44) 评论(0) 收藏举报

刷新页面返回顶部