什么是css

最新推荐文章于 2022-05-02 14:20:46 发布

一只蜗牛儿

最新推荐文章于 2022-05-02 14:20:46 发布

阅读量311

点赞数 2

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_42978535/article/details/122759946

版权

1.CSS

1.1什么是CSS

CSS = Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

通过颜色，字体，边距，高度，宽度，背景图片等来美化。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sw52oih2-1643612743407)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210818094003760.png)]

1.2CSS发展史

CSS1.0

CSS2.0 DIV(块) + CSS ，提出HTML和CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画… 浏览器兼容性

2.CSS怎么用（快速入门）

2.1style

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

    <!--规范，<style>可以编写css的代码，每一个声明最后使用分号结尾
    语法：
        选择器{
            声明1；
            声明2；
        }
    
    -->
    <style>
        h1{
            color: red;
        }

    </style>
</head>
<body>


<h1>我是标题</h1>
</body>
</html>

2.2建议使用这种规范

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yfu4jhhR-1643612743408)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210818100156282.png)]

2.3CSS优势：

1.内容和表现分离

2.网页结构表现统一，可以实现复用

3.样式十分丰富

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

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

2.4 CSS的三种表示方式

行内样式内部样式外部样式

就近原则离得近的生效

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

    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>

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

</head>
<body>

<!--优先级： 就近原则-->

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>


</body>
</html>

拓展：外部样式两种写法

链接式:

html

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

导入式

CSS2.1

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

1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.权重区别(该项有争议，下文将详解)
link引入的样式权重大于@import引入的样式。
原文链接：https://blog.csdn.net/qq_40990854/article/details/88426144

3.CSS选择器

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

3.1 基本选择器

不遵循就近原则，定位越精确优先级越高，id>class>标签

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

<style>
    
    /* 标签选择器，会选择页面上所有的这个标签的元素*/
    h1{
        color: red;
        background: blue;
        border-radius: 24px;
    }

    p{
        font-size: 80px;
    }
</style>

2.类选择器 class 选中所有class一类的标签

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

    <style>
        /* 类选择器的格式  .class的名称{}
        好处：可以多个标签归类，是同一个class，可以复用,可以夸标签使用
        */

        .cai{
            color: red;
        }

        .wu{
            color: blue;
        }
    </style>
</head>
<body>


<h1 class="wu">我是标题</h1>
<h1 class="cai">我是标题</h1>
<h1 class="cai">我是标题</h1>
<h1>我是标题</h1>
<h1>我是标题</h1>

<p class="wu">冲</p>
</body>
</html>

3.ID选择器全局唯一

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

    <style>
        /* id选择器  #id名称{}  id必须保证全局唯一

        */

        #wu{
            color: pink;
        }
    </style>
</head>
<body>


<h1 id="wu">我是标题</h1>
<h1>我是标题</h1>
<h1>我是标题</h1>

<p id="cai">冲</p>
</body>
</html>

3.2 层次选择器

1.后代选择器：在某个元素的后面所有祖爷爷爷爷爸爸你

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

2.子选择器：只有一代儿子

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

3.相邻兄弟选择器只有一个，相邻（向下）同代

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

4.通用选择器当前选中元素的向下的所有兄弟元素同代

/*通用选择器*/.active~p{    background: #c4bc23;}

3.3结构伪类选择器

伪类：条件一般有冒号的就是

<!--避免使用，class和id选择器--><style>    /*ul的第一个子元素*/    ul li:first-child{        background: red;    }    /*ul的最后一个子元素*/    ul li:last-child{        background: pink;    }</style>

/*选中p1 定位到父元素，选择当前的第一个元素选择当前p元素的父级元素，选择父级元素下的第n个p元素，并且当前是p元素时才生效 顺序*/p:nth-child(1){    background: yellow;}/*选中父元素下的第n个p元素，类型*/p:nth-of-type(2){    background: green;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uwg0anlj-1643612743409)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210819100205696.png)]

3.4 属性选择器（常用） id+class结合

<!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: yellow;            text-align: center;            color: gainsboro;            text-decoration: none;            margin-right: 5px;            font: bold 20px/50px Arial;        }    /*    属性名，  属性名=属性值（正则）    = 是绝对等于    *= 和 ~= 是包含    ^= 以这个开头    $= 以这个结尾    */    /*选中存在id属性的元素  a[]{}*/        /*a[id]{            background: red;        }*/       /* a[id=first]{            background: aqua;        }*/    /*class 中有含有links的元素*/        /*a[class~=links]{            background: red;        }*/    /*选中href中以http开头的元素*/       /* a[href^=http]{            background: red;        }*/    /*以这个结尾*/        a[href$=png]{            background: red;        }    </style></head><body><p class="demo">    <a href="http://www.baidu.com" class="links item first" 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></p></body></html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tw8BZR93-1643612743410)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210819102527015.png)]

4.美化网页（文字，阴影，超链接，列表，渐变）

4.1为什么要美化网页

1.有效传递页面信息

2.吸引用户

3.凸显页面主题

4.提高用户体验

span标签：重点要突出的字，用span标签套起来

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

4.2 字体样式

<!--font-family:**  字体font-size:      字体大小font-weight:    字体粗细color:          字体颜色-->    <style>        body{            font-family: Arial,楷体;            color: red;        }        h1{            font-size: 50px;        }        .p1{            font-weight: bold;        }    </style>

<!--字体风格-->    <style>        p{            font: oblique bolder 16px "楷体";        }    </style>

4.3 文本样式

1.颜色 color

2.对齐方式 text-align=center

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

4.行高 line-height

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title><!--颜色;    单词    RGB    RGBA    A=透明度排版：居中  text-align: center首行缩进     text-indent: 2em;当行高和块的高度一致时，就可以上下居中height: 300px;line-height: 300px;-->    <style>        h1{            color: red;            text-align: center;        }        .p1{            text-indent: 2em;        }        .p3{            background: blue;            height: 300px;            line-height: 300px;        }        /*下划线*/        .l1{            text-decoration: underline;        }        /*中划线*/        .l2{            text-decoration: line-through;        }        /*上划线*/        .l3{            text-decoration: overline;        }    </style></head><body><p class="l1">123123</p><p class="l2">123123</p><p class="l3">123123</p><h1>故事介绍</h1><p class="p1">    为助力高校培养造就德才兼备的高层次人才，全面提升研究生的科研素养与能力</p><p>    帮助研究生夯研究生教育学会和中国知网. 知网研学 共同出品此提升”系列公益讲座，下课下方）</p><p class="p3">When I wake up in the morning，    　　You are all I see;    　　When I think about you，    　　And how happy you make me。</p></body></html>

5.装饰（下划线）

/*下划线*/        .l1{            text-decoration: underline;        }        /*中划线*/        .l2{            text-decoration: line-through;        }        /*上划线*/        .l3{            text-decoration: overline;        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OQc9SnHi-1643612743410)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210819135506271.png)]

6.文本图片对齐

  <!--    水平对齐   参照物    -->    <style>        img,span{            vertical-align: middle;        }    </style></head><body><p>    <img src="images/a.jpg" alt="">    <span>asjdhaskjdhakljlkjald</span></p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vRVAC01z-1643612743410)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210819150325947.png)]

4.4 超链接伪类

<style>    /*默认的颜色*/    a{        text-decoration: none;        color: black;    }    /*鼠标悬停的状态 颜色变化*/    a:hover{        color: orange;    }    /*鼠标摁住的状态 颜色变化*/    a:active{        color: blue;    }    a:visited{        color: red;    }</style>