Web开发基础——CSS

最新推荐文章于 2023-06-28 15:38:40 发布

7.KM

最新推荐文章于 2023-06-28 15:38:40 发布

阅读量129

点赞数 3

文章标签： html css web

本文链接：https://blog.csdn.net/weixin_65773135/article/details/125465952

版权

学习目标：

• CSS和HTML整合
• CSS选择器的使用

学习内容：

    •                css和html整合
   •                css选择html元素
   •                css操作链接
   •                使用官方手册

学习产出：

任务一

1：什么是css？

CSS层叠样式表===》人话叠加html上各种修饰表，负责网页美化 Css和html一样不需要编译在浏览器可以直接执行，不区分大小写

2、为什么学习css？

开发角度： 1.增强代码复用（一个样式可以修饰多个html 标签），减少网页体积

2.方便网页维护（改css 就可以改样式）

3.开发内部分工测试角度：①.熟悉网页结构 ②.为了自动化测试

任务二：css和HTML组合方式（三种）

css完整代码格式选择器1{ 属性名字1:冒号属性值;分号属性名字2:冒号属性值 } 选择器2{ 属性名字1:冒号属性值;分号属性名字2:冒号属性值 } 说明：属性名字 ==》键 ===》目录
属性值 =====》值 ===》内容
css代码键值对组成的

1、行间样式表（内嵌入式）==》因为写在html标签那一行中本质通过对标签增加style属性在此属性中编写css代码缺点：代码复用性是比较差的一个style属性只能修饰一个html标签

<p style="color:red;font-size: 20px;">武松打虎</p>

2、 内部样式表 通过style标签修饰html标签 ===》写在html文件内部可以在head标签存放css配置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>水浒传</title>
    <!-- 这里是html注释-->
    <style>
        /* 我是css代码 我是css注释

        选择器指定选中标签
        */
         p{
             color: red;
             font-size: 30px;
         }
       h1{
           color: blue;
           text-align: center;/*文本居中*/
           text-decoration: underline; /*下划线*/
       }

    </style>
</head>
<body>
<p>天罡星• 玉麒麟•卢俊义</p>
<h2>天机星• 智多星•吴用</h2>
<p>天闲星• 入云龙•公孙胜</p>
<h1>天勇星• 大刀•关 胜</h1>
<p>天雄星• 豹子头•林冲</p>
</body>
</html>

说明:第二种代码复用性比第一种代码复用性要强

3、外部样式表====》把css写在 html文件外部需求：一段css代码可以跨文件进行修饰解决：css外部样式表。
分为两步:

1、css 文件内容如下


/*注意这个文件不可以写html代码  只能写css代码*/
p{
    color: green;
    text-decoration: underline; /* 下划线*/

}

h2{
    text-align: center; /*居中*/
}

2、通过link标签（放在head标签中）将html文件和css文件联系起来
第一个html代码文件内容

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>水浒传002</title>
    <!-- 引用css代码方式和引用图片路径表示一致
    ./  可以省略-->
    <link rel="stylesheet" href="kmcss/kmcss1.css" type="text/css"/>
</head>
<body>
<p>天猛星• 霹雳火•秦明</p>
<h2>天威星• 双 鞭•呼延灼</h2>
<p>天英星• 小李广•花荣</p>
<h1>天贵星• 小旋风•柴进</h1>
<p>天富星• 扑天雕•李应</p>
</body>
</html>

第二个html代码文件内容

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>水浒传002.1</title>
    <!-- 引用css代码方式和引用图片路径表示一致
    ./  可以省略-->
    <link rel="stylesheet" href="kmcss/kmcss1.css" type="text/css"/>
</head>
<body>
<p>天满星• 美髯公•朱仝</p>
<h2>天孤星• 花和尚•鲁智深</h2>
<p>天伤星• 行者•武松</p>
<h1>天立星• 双枪将•董平</h1>
<p>天捷星•没羽箭•张清</p>
</body>
</html>

复用性角度：外部样式（修饰多个文件）>内部样式（修饰多个html元素）>行间样式表（修饰单个html元素）

小结1：企业中三种都要使用
比如:京东网站所有网页红色（外部样式）单个网页（手机网页蓝色内部样式）单部手机(行间样式表)
小结2: 判断题： css和html的三种整合方式中，它们存在优先级？
答：这个是错误的这里不是叫优先级，这里就近原则哪一段css离 html近采取哪一段效果

任务3:CSS选择器

需求:修饰部分标签，之前的选择器标签选择器，特点只能修饰全部的标签
解决：
修饰全部标签==》标签选择器（学完?以上使用的就是标签选择器）
修饰一部分标签==》类class选择器
修饰单个标签====》id选择器

类选择器

1、给html 给出class属性（注意 class 属性的值一定不可以数字开头!） Class属性的值可以多个多个值之间使用空格隔开 2、在css根据css属性的值进行修饰类选择器是以英文逗号 , 开头的

例子:使用类选择器:
1、给html 给出class属性（注意 class 属性的值一定不可以数字开头!）
Class属性的值可以多个多个值之间使用空格隔开
2、在css根据css属性的值进行修饰
类选择器是以英文逗号 , 开头的

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>水浒传003</title>
    <style type="text/css">
        p{
            color: blue;
        }
       /*类选择器可以修饰一步分的html标签*/
        .kmred
        {
            color: red;
            text-decoration: underline;
            font-family: "微软雅黑"; /*微软雅黑*/
        }
        .kmfont{
            font-size: 50px;
        }

    </style>
</head>
<body>
<p class="kmfont">天暗星• 青面兽•杨志. </p>
<h2>(病死于杭州)</h2>
<p class="kmred kmfont">天佑星• 金枪手•徐宁</p>
<h1 class="kmred">征杭州时中药箭,之后身死</h1>
<p天空星• 急先锋•索超></p>
</body>
</html>

id选择器

1、 id选择器修饰单个的html元素
2、给html id属性 id属性在web测试中是不可以重复的
3、使用 #id属性的值就是id选择器选择html标签进行修饰

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>水浒传003-02</title>
    <style type="text/css">
        #aaa{
            font-weight: bold; /*加粗*/
            color: red;
        }
    </style>
</head>
<body>
   <p>天速星• 神行太保•戴宗.</p>
   <p id="aaa"> 天异星• 赤发鬼•刘唐</p>
   <p id="aaa2"> 天杀星• 黑旋风•李逵</p>
</body>
</html>
        小结1：
要求 css 可以内外和html整合都可以编写内: style标签修饰外：link标签 css文件和html结合起来
        小结2：
CSS属性越来越多，如何查询官方手册？w3school

将来自动化测试遇到不认识 css属性通过ctrl+F搜索查看

        小结3：标签选择 id选择器 class选择存在优先级对不对?==》正确
Id>class>标签选择器

任务4：选择器状态(针对链接)

说明:
连接a标签不同的时候，拥有不同的样式（链接伪类）
伪类指不同的状态
选择器:link{样式表} 指的链接访问之前的样式
选择器:visited{样式表} 指的链接访问之后的样式
选择器:hover{样式表} 指的是鼠标悬停（鼠标放在标签的上方）时候的样式
选择器:active{样式表} 指的是鼠标激活按住不动的时候的样式
注意：四个同时出现有顺序关系

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>水浒传</title>
    <style type="text/css">
        /*鼠标访问之前*/
    a:link{
        color: gray;
        background-color: yellow;
    }
        /*鼠标访问之后*/
    a:visited
    {
        color: blue;
    }
    /*鼠标悬停*/
    a:hover{
        color: green;
    }
        /*鼠标按住不动*/
    a:active
    {color: red;}
    </style>
</head>
<body>
<a href="#">天微星• 九纹龙•史进. (征昱岭关被庞万春射死)</a>
</body>
</html>

说明：再次刷新网页发现浏览器变不回访问之前的效果了
原因是浏览器有记录的效果
解决：清楚网页的浏览记录即可
Chrome浏览器快捷键 ctrl+shift+delete

总结css
• css和html整合
• css选择器