CSS小卓d成长史

原创 于 2021-11-06 02:14:26 发布 · 207 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #javascript

本文详细介绍了前端开发的三大基础——HTML、CSS和JavaScript。HTML负责网页结构，CSS专注于表现和美化，而JavaScript则处理交互。CSS的选择器是其核心，包括标签选择器、类选择器和ID选择器等。文章还涵盖了CSS的引入方式、美化网页元素的方法以及文本样式的应用。同时，讲解了DNS的基本概念，强调了前端开发中CSS的重要性。

前端三要素  HTML + CSS + JavaScript

HTML属于结构

CSS 属于表现

JavaScript  属于交互

1.什么是CSS?

2.CSS怎么用(快速入门)        CSS3+HTML5 (目前最常用)  但是CSS之前的版本也需要了解

3.CSS选择器(最重要) 重点 + 难点 其他了解即可  前端和后端最大差距就是CSS   

4.美化网页(文字, 阴影, 超链接,列表,渐变...)   PS能玩的代码都能玩

5.盒子模型()

6.浮动

7.定位

8.网页动画(如果需要精通前端  多去看W3Cschool   菜鸟教程      特效)

1.1什么是CSS(CascadingStyle Sheet层叠级联样式表)

CSS: 表现(美化网页)

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

可以任意选择网页 点击开发者工具 后者 F12等可以又明确的代码 HTML  和 CSS部分

1.2 发展史

CSS1.0  仅仅加个粗字体等

CSS2.0 DIV(块) + CSS, HTML与CSS结构分离的思想 , 网页变得简单, 有利于SEO

CSS2.1     浮动,定位

CSS3.0        圆角边框,阴影,动画(基本上都支持了)....浏览器兼容~(集成了2.0的全部 也是重点)

1.3 快速入门

style  建议单独使用CSS和HTML使页面更干净  而且平时CSS就有几千行和几万行

CSS的优势:

1.内容和表现分离

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

3.样式十分丰富

4.建议使用独立于HTML的CSS文件

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

1.4导入方式

优先级奉献就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

        <style>
            /* CSS种这里面的注释和HTML注释不一样 */
        </style>


<!-- 规范: <stytle> 可以编写CSS的代码 每一个声明最好使用分号结尾
    语法:
            选择器{
                声明1;
                声明2;
                声明3;
            } 
        -->


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

<body>


    <!-- 行内样式,在标签元素中,编写一个style属性,编写样式即可 -->

    <h1 style="color: red;"> 我是标题</h1>   <!--这种不好 因为当文件量过多时 不够清晰 当网页成熟时偶尔可以使用-->

</body> 
</html>

拓展:外部样式有两种写法:

链接式


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

导入式(CSS2.0)  弊端当网页元素比较多的时候,会让我们的网页先展现出来结构,然后再去渲染

style>
    @import url(style.css);    
</style>

链接式 属于HTML

导入式 是CSS2.1特有的!   

重点三种

1.行内样式 

<h1 style="color: blue;"> 我是标题</h1>

2.内部样式


<head>
 
<style>
    h1{
        color: aliceblue;
    } 
</style>


</head>

3.外部样式

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

2.选择器(核心重点)

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

2.1基本选择器   (重点)

1.标签选择器

2.类(class)选择器

3.Id选择器

1.标签选择器(标签选择器会选择,页面上所有这个标签的元素)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>


    <style>
        h1{
            color: aqua;
        }
    </style>




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

    .taiyang{
        color: rgb(165, 73, 73);
    }
    

    .asdf{
        color: aqua;
    }
    </style>



</head>
<body>
    
  
    <h1 class="taiyang">标签1</h1>
    <h1 class="asdf">标签2</h1>
    <h1 class="qwewqe">标签3</h1>
</body>
</html>

2.类选择器


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

    .taiyang{
        color: rgb(165, 73, 73);
    }
    

    .asdf{
        color: aqua;
    }
    </style>



</head>
<body>
    
  
    <h1 class="taiyang">标签1</h1>
    <h1 class="asdf">标签2</h1>
    <h1 class="qwewqe">标签3</h1>
</body>
</html>

3.Id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>



    <style>
        /* id选择器    :id必须保证全局唯一!
        #id名称 {} */
       #asd{
           color: aquamarine;
       }
    </style>
</head>
<body>
    <h1 id="asd">标题1</h1>
</body>
</html>

不遵循就近原则

id选择器 > class选择器 > 标签选择器

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

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

Id选择器 全局唯一!不可重复  #id{}

2.2层次选择器

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

2.子选择器

3.相邻兄弟选择器

4.通用选择器

1.后代选择器


<!-- <style>

        body p{
            background-color: brown;
        }

</style>            后代选择器-->

2.子选择器 

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

3.相邻兄弟选择器



    <!-- 兄弟选择器 -->

    <style>

        .active + p{
            background: brown;
        }

4.通用选择器  (选中元素的向下的所有兄弟元素)

      <!--  <style>

            .active~p{
                background-color: burlywood;
            }

        </style>                 通用相邻选择器 -->

2.3 结构 伪类选择器

学选择器的原因是为了在网页上定位各种元素  只有定位了才能去美化

伪类: 条件    (几乎所有带冒号的都是伪类)

1.较为好记 也常用


            /* ul的第一个子元素 */

            ul li:first-child{
                background-color: cadetblue;
            }
             /* ul的第最后一个子元素 */
             ul li:last-child{
                 background-color: chartreuse;
             }

2.使用的较少

选择当前P元素的父级元素,选中父级元素的第一个,并且是当前元素才生效!
             */
                /* 这个是按照顺序选择 */
             p:nth-child(4){
                background-color: rgb(182, 0, 39);
             }
                /* 选中父元素,下的P元素的第二个,  类型 */
             p:nth-of-type(
             {
                 background-color: coral;
             }

总结的

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

            /* 选中P1:定位到父元素, 选择当前的第一个元素
            选择当前P元素的父级元素,选中父级元素的第一个,并且是当前元素才生效,   顺序 */
            p:nth-child(2)
            {
                background: darkgrey;
            }

            /* 选中父元素, 下的P元素的第二个, 类型 */
            p:nth-of-type(1)
            {
                background: darkkhaki;
            }

2.4属性选择器(常用) 重点

选择器是前端里面最重要的(基本和属性选择器)

href(Hypertext Reference):超文本引用 

脚本语言又被称为扩建的语言, 或者动态语言, 是一种编程语言, 用来控制软件应用程序, 脚本通常是以文本 (ASCⅡ) 保存, 只是在被调用时进行解释或者编译。

文件扩展名（Filename Extension）也称为文件的后缀名，是操作系统用来标记文件类型的一种机制。扩展名几乎是每个文件必不可少的一部分。如果一个文件没有扩展名，那么操作系统就无法处理这个文件，无法判别到底如何处理该文件

选择器在 CSS Js Query  Vue中都会使用

doc 外语全称：Document）是电脑文件常见文件扩展名的一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>

    <style>
        .demo a
        {
            float: left;
            display: block;
            height: 50px;
            width: 50px; 
            border-radius: 10px;
            background: darkmagenta;
             text-align: center; 
            color: darkkhaki;
            text-decoration: none;    /*这个是取消下划线*/
            margin-right: 5px;
            font: bold 20px/50px Arial;   /*blod 是粗体  */

        }

        /* 属性名, 属性名 = 属性值 */
        /* 叫做a标签中带有id属性的元素     a[]{}*/
        /* a[id]
        {
            background: yellowgreen;
        } */

        /* a[id=first]
        {
            background: violet;
        } */
        /* class中有 links的元素 */
        /* a[class *= "links"]
        {
            background: yellow;
        } */


/*          以什么什么开头
        a[href^=http]
        {
            background: lightblue;
        }
         */

         /*以pdf结尾 
         a[href$=pdf]
         {
             background: lightcoral;
         }
    </style>  */

</head>
<body>
    <p class="demo">
        <a href="http://www.baidu.com" class="links item first" id="first">1</a>
        <a href="href" class="links item active"> 2</a>
        <a href="image//213.html" class="links item active" target="_blank" title="test">3</a>
        <a href="images//123.html" class="links item">4</a>
        <a href="asd" class="links item">5</a>
        <a href="/a.pdf" class="links item">6</a>
        <a href="asd.doc" class="links item">7</a>
        <a href="/abc.doc" class="links item">8</a>
        <a href="asdsad.doc" class="links item last">9</a>
    </p>
    
</body>
</html>

/*            =   为绝对等于
             *=   包含
             ^=   以..开头
             $=    以...结尾
 */

3.美化网页元素

1.有效的传递页面消息

2.吸引用户,提高用户体验

3.凸显主题

一般用span标签用来突出表示

<!-- 字体样式包括字体类型(字体风格)、
    大小、颜色基本效果，另外还包括一些特殊的样式，如字体粗细、下划线、斜体、大小写样式等。-->
    <style>
        p
        {
            font: oblique               /*第一个字体风格(等等)  第二个字体粗细 第三个字体大小  
        }
    </style>

    <!-- 
        font-family :字体
        font-size:  字体大小
        font-weight: 字体粗细
        color  :  字体颜色
     -->
    <style>
        body
        {
            font-family: "Arial Black", 楷体;    /*family字体*/
            color: lightcoral;
        }
        h1
        {
            font-size: 2em;     /* px是像素 
                                    em*/
        }
        .p1
        {
            font-weight: bolder;   /*   */
        }
    </style>

3.3文本样式(笔记记录至此 感觉还是需要多动手)

1.颜色   color  rgba

2.文本对齐的方式有个 text-align = center

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

4.行高        line-height  (单行文字上下居中)

5.装饰  vertucak-align

什么是DNS?

域名系统（Domain Name System缩写DNS，Domain Name被译为域名）是因特网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网…. 管理 ​ 日志.

Zhengqin Yuan
关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值