css入门

最新推荐文章于 2024-08-02 14:12:31 发布

策谋本天成

最新推荐文章于 2024-08-02 14:12:31 发布

阅读量217

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_44207403/article/details/106363096

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css学习

1.css元素导入的三种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--内部样式-->
    <style>
        h2{
            color: cyan;
        }6
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式-->
<h1 style="color: red">行内样式</h1>
<h2>内部样式</h2>
<h3>外部样式</h3>
</body>
</html>

1.行内样式

<!--行内样式-->
<h1 style="color: red">行内样式</h1>

2.内部样式

 <style>
        h2{
            color: cyan;
        }
    </style>
<h2>内部样式</h2>

3.外部样式

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

/*外部样式*/
h3{
    color: yellow;
}

2.选择器

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

2.1 基本选择器

1.标签选择器:选择一类标签格式: 标签{}

h2{
            color: cyan;
        }

2.类选择器: 选择所有class属性一致的标签格式:类名{}

.czt{
            color: #77ff71;
        }

3.id 选择器:全局唯一格式: #id名{}

#czt{
            color: coral;
        }

2.2层次选择器

后代选择器

/*后代选择器*/
body p{
    background: chocolate;
}

子选择器

/*子选择器*/
body>p{
    background: rgba(122, 255, 111, 0.93);
}

相邻兄弟选择器

/*相邻兄弟选择器 向下选择一个*/
#czt + p{
    background: #ff1c04;
}

通用选择器

/*通用兄弟选择器，选择当前元素向下的所有兄弟元素*/
#czt~p{
    background: cornflowerblue;
}

2.3结构伪类选择器

/*选择ul的第一个元素*/
ul li:first-child{
    background: chartreuse;
}

/*选择ul的最后一个元素*/
ul li:last-child{
    background: chartreuse;
}

/*鼠标悬停属性*/
a:hover{
    color：red;
}

2.4属性选择器

基本格式：标签名[表达式]{}

常用正则表达式

= 绝对等于

*= 包含这个元素

^= 以这个元素开头

$= 以这个元素结尾

/* 在a标签中选择存在id属性的元素*/
a[id]{
}
/*在a标签中选择id为first的元素*/
a[id = first]{
}
/*在a标签中选择class中有links的元素*/
a[class*="links"]{
}
/*在a标签中选择href中以http开头的元素*/
a[href^=http]{
}
/*在a标签中选择href中以doc结尾的元素*/
a[href$=doc]{
}

3.美化网页的元素

3.1 span标签

用来突出重点，约定俗成。

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

3.2 字体样式

<style>
    /*
        font-family: 字体样式
        font-size:  字体大小
        font-weight: 字体粗细
        color: 字体颜色      
    */
    p {
        font-family: 楷体;
        font-size: 50px;
        font-weight: bold;
        color: darkblue;
    }
</style>

3.3 文本样式

1.颜色：color 颜色， rgb（）三原色，rgba 三原色加透明度

2.对齐方式：text-align: center

3.首行缩进：text-indent: 2em

4.行高：line-height: 500px;/行高/ height: 300px;/块元素高/

行高和块元素高一致时文字上下居中

5.装饰：text-decoration: underline;/下划线/

6.文本图片水平对齐：要有参照

img,span{
    vertical-align: middle;
}

3.4 超链接伪类

<style>
    /*默认*/
    a{
        text-decoration: none;
        color: #000000;
    }
    /*鼠标悬停时的属性*/
    a:hover{
        color: green;
    }
    /*鼠标点击未释放的属性*/
    a:active{
        font-size: 50px;
        color: #6d48b4;
    }
</style>

4.盒子模型

在这里插入图片描述

margin：外边距

border：边框

padding：内边距

4.2 边框

边框的粗细，样式，颜色

<style>
    #box{
        /*border: 粗细，样式，颜色*/
        width: 300px;
        border: 1px solid red;
    }
</style>

4.3 圆角边框

<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        border-radius: 10px;/*设置圆角边框*/
    }
</style>

策谋本天成

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录