css详解

VIP文章小张学编程

已于 2022-03-23 20:15:34 修改

阅读量1.6k

点赞数 3

分类专栏： html5 css 文章标签：前端 css3

于 2022-03-22 18:01:33 首次发布

本文链接：https://blog.csdn.net/qq_45240472/article/details/123666943

版权

1.CSS概述

1.1什么是CSS

Cascading Style Sheet 层叠级联样式表

css：表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动

1.2快速入门

在这里插入图片描述 css的优势：

1.内容表现分离

2.网页结构表现统一

3.样式十分丰富

4.建议使用独立于html的css文件

5.利用SEO,容易被搜索引擎收录

1.3 CSS的三种导入方式

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

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

<!--优先级：行内样式 > 内部样式或外部样式（离行内近的优先级高）  -->
<body>
<!--行内样式：在标签元素中编写一个style属性-->
<h1 style="color:black;">张功铭</h1>
</body>
</html>

拓展：外部样式两种写法

链接式

<link rel="stylesheet" href="css/style.css">

导入式

<!--    导入式    -->
    <style>
        @import url("css/style.css");
    </style>

2.选择器

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

2.1 基本选择器

1.标签选择器：选择一类标签

标签{}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*标签选择器会选择到页面上所有的这个标签 */
        h1{
   
            color: red;
            background: #3cbd16;  /* 背景*/
            border-radius: 24px;   /*圆角边框*/
        }
        /*h2{
            color: blue;
        }*/
        p{
   
            color: #22BD09EF;
            font-size: 80px;   /*字体大小*/
            background: pink;
        }
    </style>
</head>

<body>
<h1>&nbsp;&nbsp;张功铭</h1>
<h1>张彬</h1>
<p>张康妮</p>
</body>
</html>

2.类选择器：选择所有class属性一致的标签，跨标签

.类名{}

<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    /*类选择器的格式： .class名称{}*/
    .rui{
   
      color: red;
    }
    .qi{
   
      color: blue;
    }
    .ming{
   
      color: #3cbd16;
    }
  </style>
</head>

<body>
<h1 class="rui">标题1</h1>
<h1 class="ming">标题2</h1>
<h1 class="qi">标题3</h1>
<p class="qi">标题4</p>
<p>标题5</p>
</body>
</html>

3.Id选择器：全局唯一

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id选择器的格式：#id名称{}
        不遵循就近原则：
        优先级：id选择器 > class选择器 > 标签选择器
        */
        #zhang{
   
            color: red;
        }
        #bin{
   
            color: blue;
        }
        #hong{
   
            color: pink;
        }
        #ming{
   
            color: aqua;
        }
    </style>
</head>

<body>
<h1 id="zhang">标题1</h1>
<h1 id="hong">标题2</h1>
<h1 id="rui">标题3</h1>
<h1 id="bin">标题4</h1>
<h1 id="ming">标题5</h1>
</body>
</html>

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

2.2层次选择器

1、后代选择器：在某个元素的后面

<style>
    /*后代选择器*/
    body p{
   
        background: red;
    }
</style>

2、子选择器

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

3、相邻兄弟选择器

/* 相邻兄弟选择器:只有下面一个 */
.html + p{
   
    background: green;
}

4、通用选择器

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

2.3 结构伪类选择器

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

/*ul的最后一个子元素*/
ul li:last-child{
   
    background: green;
}
/*选中p1：定位到父元素，选择当前的第一个元素*/
p:nth-child(3){
   
    background: pink;
}
/*选中父元素下的p元素的第二个类型*/
p:nth-of-type(1){
   
    background: aqua;
}

2.4 属性选择器

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

    <style>
        .demo a{
            float:left;
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 10px;
            background: #3cbd16;
            text-align: center;      /*居中对齐*/
            color: gainsboro;
            text-decoration: none;  /*去下划线*/
            margin-right: 10px;      /*外边距*/
            font:bold 20px/50px Arial;  /*字体居中*/
        }

        /*
        = 绝对等于
        *=  包含这个元素
        ^=  以这个开头
        $=  以这个结尾
        */

        a[href*=images]{
            background: red;
        }

        a[class^=links]{
            background: pink;
        }

        a[href$=pdf]{
            background: aquamarine;
        }

    </style>


</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="**/5.结构伪类选择器/index.html" class="links item active" target="_blank" title="test">2</a>
    <a href="images/image1.jpg" class="links item">3</a>
    <a href="images/132.png"class="links item">4</a>
    <a href="images/254.html"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.pdf"class="links item">8</a>
    <a href="abc.doc"class="links item">9</a>
    <a href="132.doc"class="links item">10</a>
</p>
</body>
</html>

/*
= 绝对等于
*=  包含这个元素
^=  以这个开头
$=  以这个结尾
*/

在这里插入图片描述

3、美化网页元素

3.1、为什么要美化网页

有效的传递页面信息
使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户
可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
具有良好的用户体验

标签：重点要突出的字，使用括起来

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

欢迎学习   <span id="title1">  CSS </span>

</body>
</html>

3.2、字体样式

在这里插入图片描述

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

    <!--
    font-family:字体
    font-size：字体大小
    font-weight:字体粗细
    color:字体颜色
    -->

    <style>
        body{
     
            font-family: "Arial Black",新宋体;
        }
        h1{
     
            font-size: 50px;
            color: red;
        }
        .p1{
     
            font-weight: bold;
        }
    </style>

</head>
<body>

<h1>故事介绍</h1>
<p class="p1">
《莽荒纪》为起点文学网白金作家我吃西红柿（番茄）创作的古典仙侠小说，同时也是作者完结《吞噬星空》后休整了近五个月精心准备的第七部小说。
</p>
<p>小说于2012年12月16日正式上传，2013年2月1日正式上架，2015年4月10号完结，2018年4月30日晚，《莽荒纪》电视剧已在爱奇艺，腾讯视频同步播出。   
</p>
</body>
</html>

在这里插入图片描述 ### 3.3、文本样式

颜色 color rgb rgba
文本对齐方式 text-align: center
首行缩进 text-indent: 2em;
行高 line-height: 20px
装饰 text-decoration
文本图片水平对齐 vertical-align: middle;

在这里插入图片描述

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

    <!--
        font-family:字体
        font-size：字体大小
        font-weight:字体粗细
        color:字体颜色
     -->

    <!--
    颜色：RGB :red green blue 0~F
         RGBA  A:0~1   A(透明度)
    text-align  排版，居中
    text-indent   首行缩进   Nem,缩进N个字符
    line-height    行高度（字体高度）
    -->

    <style>
        h1{
     
            color: rgba(0,255,255,1);
            text-align: center;  /*文本居中*/
        }
        .p1{
     
            text-indent: 2em;   /*首行缩进*/
        }
        .p3{
     
            background: #2700ff;  /*背景颜色*/
            height: 300px;        /*背景颜色的高度*/
            line-height: 20px;    /*行高度（字体高度）*/
        }
        .a1{
     
            text-decoration: underline;  /*下划线*/
        }
        .a2{
     
            text-decoration: line-through;  /*中划线*/
        }
        .a3{
     
            text-decoration: overline;   /*上划线*/
        }
    </style>
</head>
<body>

<p class="a1">123465</p>
<p class="a2">132456</p>
<p class="a3">123456</p>

<h1>故事介绍</h1>
<p class="p1">
    《莽荒纪》为起点文学网白金作家我吃西红柿（番茄）创作的古典仙侠小说，同时也是作者完结《吞噬星空》后休整了近五个月精心准备的第七部小说。
</p>
<p>小说于2012年12月16日正式上传，2013年2月1日正式上架，2015年4月10号完结，2018年4月30日晚，《莽荒纪》电视剧已在爱奇艺，腾讯视频同步播出。   </p>

<p class="p3">
    lf you were a teardrop In my eye,<br/>
    For fear of losing you，l would never cry<br/>
    And if the golden sun，Should cease to shine its light,<br/>
    Just one smile from you,Would make my whole world bright<br/>
</p>
</body>
</html>

最低0.47元/天解锁文章

小张学编程

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
css详解

1.1什么是CSSCascading Style Sheet 层叠级联样式表css：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动css的优势：1.内容表现分离2.网页结构表现统一3.样式十分丰富4.建议使用独立于html的css文件5.利用SEO,容易被搜索引擎收录1.3 CSS的三种导入方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF
复制链接

扫一扫