CSS

什么是CSS

Cascading Style Sheet层叠级联样式表

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

    <!--规范-->
    <link rel="stylesheet" href="我的第一个css程序/css/style.css">
</head>
<body>

<h1>一级标题</h1>
</body>
</html>

h1{
    color: #e20c0c;
}

css的优势:

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

三种css导入方式

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

    <!-- 内部样式-->
    <style>
        h1{
            color: #e20c0c;
        }
    </style>
    
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!--优先级:就近原则-->
<!-- 行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color: aqua">一级标题</h1>

</body>
</html>

/*外部样式*/
h1{
    color: #e20c0c;
}

拓展:外部样式两种写法

链接式

<!--外部样式-->
<link rel="stylesheet" href="css/style.css">

导入式

@import是css2.1特有的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!--导入式-->
    <style>
        @import url("css/style.css");
    </style>
</head>
<body>

<h1>一级标题</h1>
</body>
</html>

三种基本选择器(重要)

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

分类:

标签选择器:选择一类标签

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

    <style>
        /*标签选择器:会选择到页面上所有的这个标签的元素*/
        h1{
            color: blanchedalmond;
            background: #3cbda6;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>

<h1>wowowo</h1>
<h1>ninini</h1>
<p>hahahha</p>
</body>
</html>

类选择器:选择所有class属性一致的标签,跨标签

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

    <style>
        /* 类选择器的格式 .class的名称{}*/
        .y{
            color: blueviolet;
        }
        .g{
            color: cyan;
        }
    </style>
</head>
<body>

<h1 class="y">wowowo</h1>
<h1 class="g">ninini</h1>
<p>hahahha</p>
</body>
</html>

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器:id必须保证全局唯一
          #id名称
          不遵循就近原则,固定的
          id选择器>class选择器>标签选择器
        */
        #style1{
            color: darkseagreen;
        }

        #style2{
            font-size: 80px;
        }

        .style3{
            color: #3cbda6;
        }
    </style>
</head>
<body>

<h1 id="style1">标题一</h1>
<h1 class="style3">标题二</h1>
<h1 id="style2">标题三</h1>
<h1>标题四</h1>
<h1>标题五</h1>
</body>
</html>

层次选择器

分类:

后代选择器:在某个元素的后面

/*后代选择器*/
body p{
    background: #3cbda6;
}

子选择器

/*子选择器*/
body>p{
    background: blue;
}

相邻兄弟选择器

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

通用选择器

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

结构伪类选择器

/*ul的第一个子元素*/
ul li:first-child{
    background: aliceblue;
}

/*ul的最后一个子元素*/
ul li:last-child{
    background: indianred;
}

/*选中p1:定位到父元素,选择当前的第一个元素*/
p:nth-child(1){
    background: coral;
}

p:nth-of-type(2){
    background: yellow;
}

属性选择器(重要)

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

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: green;
            text-align: center;
            color: red;
            text-decoration: none;
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }

        /*存在id属性的元素 a[]{}*/
        /*a[id]{*/
        /*    background: yellow;*/
        /*}*/

        /*class中有links的元素*/
        /*a[class*="links"]{*/
        /*    background: blue;*/
        /*}*/

        /*选中href中以http开头的元素*/
        /*a[href^=http]{*/
        /*    background: darkmagenta;*/
        /*}*/

        /*选中以pdf结尾的元素*/
        a[href$=pdf]{
            background: burlywood;
        }
    </style>
</head>
<body>

<p class="demo">
    <a href="https://www.baidu.com" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="abc.doc" class="links item">8</a>
</p>
</body>
</html>

/*
= 等于
*= 全部等于
^= 以...开头
$= 以...结尾

美化网页元素

为什么要美化网页

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

span标签:重点要突出的字,使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title{
            font-size: 50px;
        }
    </style>
</head>
<body>

欢迎学习<span id="title">Java</span>
</body>
</html>

字体样式

body{
font-family: "Times New Roman",楷体;
color: chartreuse;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}

文本样式

颜色
文本对齐方式

/*颜色:RGB(0~F)/RGBA(0~1)*/
/*text-align:排版*/
h1{
color: rgba(0,255,255,0.9);
text-align: left;
}

首行缩进

/*text-indent:首行缩进*/
.p1{
text-indent: 2em;
}

行高

/*line-height:行高*/
.p3{
line-height: 20px;
}

装饰

/*下划线*/
.l1{
text-decoration: underline;
}

/*中划线*/
.l2{
text-decoration: line-through;
}

/*上划线*/
.l3{
text-decoration: overline;
}

文本图片水平对齐

img,span{
    vertical-align: middle;
}

文本阴影

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

超链接伪类

a{
text-decoration: none;
color: #000000;
}

/*鼠标悬浮的状态*/
a:hover{
color: #e20c0c;
}

/*鼠标按住未释放的状态*/
a:active{
color: green;
}

/*鼠标点击后的状态*/
a:visited{
color: gray;
}

列表

ul{
    background: red;
}

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

背景

背景颜色
背景图片

/*默认是全部平铺的*/
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/a.jpg");
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}

渐变

body{
background-image: linear-gradient(19deg,#21D4FD,#B721FF 100%);
}

盒子模型

什么是盒子模型

margin:外边距

padding:内边距

border:边框

边框

边框的粗细
边框的样式
边框的颜色

/*body总有一个默认的外边距margin:0*/
body{
margin: 0;
}
h2{
font-size: 16px;
background-color: cornflowerblue;
line-height: 30px;
margin: 0;
}
#box{
width: 300px;
/*border:粗细 样式 颜色*/
border: 1px solid red;
}
form{
background: #3cbda6;
}
div:nth-of-type(1) input{
border: 3px solid blue;
}
div:nth-of-type(2) input{
border: 3px dashed green;
}

内外边距

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

    <!--外边距的妙用-->
    <style>
        /*body总有一个默认的外边距margin:0*/
        body{
            margin: 0;
        }
        h2{
            font-size: 16px;
            background-color: cornflowerblue;
            line-height: 30px;
            /*margin:上边距 下 左 右*/
            margin: 0 1px 2px 2px;
        }
        #box{
            width: 300px;
            /*border:粗细 样式 颜色*/
            border: 1px solid red;
            /*margin: 0 auto;居中
              要求:块元素,块元素有固定的宽度
            */
            margin: 0 auto;
        }
        form{
            background: #3cbda6;
        }

        input{
            border: 1px solid black;
        }

        div:nth-of-type(1){
            padding: 10px 2px;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>姓名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*border-radius:左上 右上 左下 右下*/
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>

<div></div>

</body>
</html>

阴影

div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    box-shadow: 10px 10px 20px green;
}

浮动

块级元素:独占一行

h1~h6 p div 列表...

行内元素:不独占一行

span a img strong...

行内元素可以被包含在块级元素中,反之则不可以

display

/*
block 块元素
inline 行内元素
inline-block 是块元素,但是可以内联,在一行
*/
div{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    display: inline-block;
}
span{
    width: 100px;
    height: 100px;
    border: 2px solid black;
    display: inline-block;

float

img{
    float:right;
}

父级边框塌陷的问题

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

解决方案:

增加父级元素的高度
增加一个空的div,清除浮动

<div class="clear"></div>

.clear{
	clear:both;
	margin:0;
	padding:0;
}

overflow

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

父类添加一个伪类:after

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

小结:

浮动元素后面增加空的div

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

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

简单,下拉的一些场景避免使用
父类添加一个伪类:after(推荐)

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

定位

相对定位

top:20px;
left:-20px
bottom:10px;
right:-10px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid black;
            padding: 0;
        }
        #first{
            background-color: #e20c0c;
            border: 1px dashed black;
            /*相对定位*/
            position: relative;
            top:-20px;
            left: 20px;
        }
        #second{
            background-color: green;
            border: 1px dashed black;
        }
        #third{
            background-color: blue;
            border: 1px dashed black;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

绝对定位

定位:基于xxx定位,上下左右~

没有父级元素定位的前提下,相对于浏览器定位
假设父级元素存在定位,我们通常会相对于父级元素进行偏移
在父级元素范围内移动
相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid black;
            padding: 0;
            position: absolute;
        }
        #first{
            background-color: #e20c0c;
            border: 1px dashed black;
            /*绝对定位*/
            position: relative;
            top:-20px;
            left: 20px;
        }
        #second{
            background-color: green;
            border: 1px dashed black;
            position: absolute;
            right: 30px;
        }
        #third{
            background-color: blue;
            border: 1px dashed black;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            /*固定定位*/
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div>div1</div>
<div>div2</div>
</body>
</html>

z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="images/b.jpg" alt=""></li>
        <li class="tiptext">头像</li>
        <li class="tipbg"></li>
        <li>2001-02-22</li>
        <li>gygygy</li>
    </ul>
</div>

</body>
</html>

#content{
    width: 470px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px black solid;
}

ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tiptext,.tipbg{
    position: absolute;
    width: 380px;
    height: 25px;
    top:216px;
}
.tiptext{
    color:white;
}
.tipbg{
    background: #000;
    /*背景透明度*/
    opacity: 0.5;
    filter: Alpha(opacity=50);
}

动画

posted @ 2023-11-16 08:30 郭岩不会打代码阅读(24) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

相关博文：

· HTML详解

· JavaScript

· CSS - 学习笔记

· css学习笔记

· CSS笔记

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？

公告

昵称：郭岩不会打代码
园龄： 1年10个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

gy486926

CSS

CSS