CSS

'Boom'

已于 2022-03-02 16:28:40 修改

阅读量100

点赞数 1

分类专栏：心路历程文章标签： css3

于 2021-04-06 18:14:17 首次发布

本文链接：https://blog.csdn.net/B000M/article/details/115467133

版权

心路历程专栏收录该内容

38 篇文章 0 订阅

订阅专栏

CSS

基本导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--内部样式-->
   <style>
       h1{
           color: aqua;
       }
   </style>
<!--外部样式-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!--优先级：就近原则-->
<h1 style="color: black">我是标题</h1>
</body>
</html>

选择器

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

基本选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: aqua;
            background-color: black;
            border-radius: 24px;
        }
        p{
            color: aqua;
            background-color: black;
            border-radius: 24px;
        }
    </style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>=====</p>
</body>
</html>

类选择器 class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器格式：.类名{}
        好处，可以多个标签归类，是同一个class，可以复用*/
        .yrz{
            color: #0799f8;
        }
        .lyc{
            color: aquamarine;
        }
    </style>
</head>
<body>
<h1 class="yrz">标题1</h1>
<h1 class="123">标题2</h1>
<h1 class="lyc">标题3</h1>
</body>
</html>

id 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器格式：#id名称{}
        id必须保证全局唯一，不能重复
        id选择器>class选择器>标签选择器*/
        #yrz{
            color: red;
        }
    </style>
</head>
<body>
<h1 id="yrz">标题1</h1>
<h1 id="123">标题2</h1>
<h1 id="lyc">标题3</h1>
</body>
</html>

层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器(所有后代)*/
        body p{
            background: red;
        }
        /*子选择器(一代，儿子)*/
        body>p{
            background: #07f6bf;
        }
        /*相邻选择器(只有一个,向下相邻)*/
        .active + p{
            background: #2fec0d;
        }
        /*通用兄弟选择器(当前选中元素的向下的所有兄弟元素)*/
        .active~p{
            background: #fdf105;
        }
    </style>
</head>
<body>
<p>p0</p>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>p4</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

属性选择器（常用）

属性名 = 属性值（正则）

a[href*=http]{
	background: yellow;
}

= 绝对等于

*= 包含这个元素

^= 以这个开头

$= 以这个结尾

字体样式

font-family : 字体

font-size : 字体大小

font-weight : 字体粗细

color : 字体颜色

文本样式

text-align:center 文本居中

text-indent:2em 段落首行缩进

line-height 行高（行高和块的高度一致，就可以上下居中）

text-decoration:underline (下划线)

text-decoration:line-through (中划线)

text-decoration:overline (上划线)

超链接伪类

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

渐变

background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);

盒子模型及边框使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7MnSZRrm-1617704024167)(C:\Users\HP\Pictures\微信截图\QQ截图20210406134208.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }
        h2{
            background-color: #85FFBD;
            background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
            line-height: 30px;
            margin: 0;
        }
        form{
            background-color: #85FFBD;
            background-image: linear-gradient(45deg, #85FFBD 0%, #fffb7d 100%);
        }
        div:nth-of-type(1) input{
            border: 3px solid #000000;
            margin: 5px 0px 5px 0px;
        }
        div:nth-of-type(2) input{
            border: 3px solid #602d7f;
            margin: 5px 0px 5px 0px;
        }
        div:nth-of-type(3) input{
            border: 3px solid #823838;
            margin: 5px 0px 5px 0px;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码 :</span>
            <input type="text" size="22">
        </div>
        <div>
            <span>邮箱 :</span>
            <input type="text" size="22">
        </div>
    </form>
</div>
</body>
</html>

圆角边框及阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            margin: 0 auto;text-align: center;
            width: 100px;
            height: 100px;
            border:0px solid yellow;
            border-radius: 50px;
            box-shadow: 0px 0px 100px yellow;
        }
    </style>
</head>
<body>
<div style="width: 500px;display:block;text-align: center;">
    <img src="../109951165325140747.jpg">
</div>
</body>
</html>

display和浮动

display: block;
display: inline;
display: inline-block;
float: left;

父级边框塌陷问题：

增加父级元素的高度

#father {
            border: 1px #000 solid;
            height: 800px;
        }

增加一个空的div标签，清楚浮动

<div class = "clear"></div>
.clear{
    clear:both;
    margin:0;
    padding:0;
}

overflow

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

父类添加一个伪类：after

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

            border: 1px #000 solid;
            height: 800px;
        }

增加一个空的div标签，清楚浮动

<div class = "clear"></div>
.clear{
    clear:both;
    margin:0;
    padding:0;
}

overflow

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

父类添加一个伪类：after

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

'Boom'

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS

CSS基本导入方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color: aqua; } </style>
复制链接

扫一扫