HTML的CSS

HTML的CSS

复制代码
1 标签  分为两种  单标签 与 双标签
2 div容器 : 作用就是 分地   难点就是 地址
3 绝对地址为什么不用
    因为别人无法访问
4 相对路径
    当前文件 或 当前目录 ./  ../ /
5 span ul li  a 【超链接】
6 img【图片】  srt = “地址”
7 a 【超链接】  href = "地址"
8 head :主要做不显示的数据
9 body :主要做显示的数据
10 css的使用方式:
    1行内样式 style属性
    2外部样式 css文件
    3内部样式 style标签
        选中元素 选择器
11 id #id名  class .class    标签 关键字
12 id的范围是 0 到 n     class的范围是 0 到 n     值唯一的  一个不是唯一的
13 class 多个值怎么表达
    class名1 + 空格 + class名2 + 空格
复制代码
css
    层叠模式表
样式  属性:属性值  描述不同的效果 
一个元素可以多个样式
属性:属性值;
属性:属性值:
属性:属性值;
​
css 实现方式:
    分3种: 
        1行内样式
            用的是 style属性= "样式"
            
        2外部样式
            外部文本 css
        3内部样式
            style标签 =“ ”
        
px : 是像素
​
​
css选择器:导航   锁定元素
    分3种:id class 标签
        id选择器:
            1目标元素肯定有id属性
            2通过id选择符选中
             2.1 id选择符 #id名
            3添加样式
​
        class选择器:
            1目标元素肯定有class属性
            2通过class选择符选中
             2.1 class选择符 .class名
            3添加样式
​
        标签选择器:
            1目标元素肯定有名字【关键字】
            2通过关键字选择符选中
                标签选择器 关键字
            1添加样式
​
​
发现问题  分析问题  解决问题  论证
​
​
head :不直接显示在页面的数据
​
​
那如果出现多个同名的class,怎么锁定元素
    1不要出现多个同名的class
​
​
多个模块用同一样式的话,可以不用额外再规定,直接写为同一个class
    1class属性值:可以的多个 “属性值1 + 空格 + 属性值2 + 空格 + 属性值3”
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二节课</title>
<!--    link标签
        rel;确定链接的文件类型
        href:“地址”  最好用相对地址别对绝对地址因为会出现一些问题-->
    <link rel="stylesheet" href="03.css">
    <style>
        /*圆形幅度*/
        #data1{border-radius: 50%}
​
        .book{
            /*元素的阴影*/
            box-shadow: 10px 10px 10px 5px;
        }
​
        .diss{
            /*字体颜色 */
            color: red;
        }
    </style>
</head>
<body>
    <div id="data1"
         class="book diss"
         style="width: 200px;height: 200px;background-color: red;
">
    <p>英雄联盟</p>
    </div>
<div id="data2" class="book"></div>
</body>
</html>
相关推荐
用户059540174468 小时前
LangChain Memory 测试踩坑实录:用 pytest 自动化回归对话记忆,我折腾了整整一个周末
前端·css
jjw_zyfx11 小时前
css vue vite实现闪烁的呼吸效果
javascript·css·vue.js
海天鹰1 天前
屏幕颜色检测
javascript·html5
Mh2 天前
如何使用GSAP实现一个 `pinned` 滚动楼层叙事?
前端·javascript·css
郭wes代码3 天前
纯 CSS+JS 实战:手搓一张支持自定义的通用金色电子奖状(万字详细拆解)
前端·javascript·css
竹枝溪3 天前
从零吃透CSS(一):CSS基础语法与样式美化
前端·css·选择器·前端三剑客
芳心粽伙饭3 天前
HTML第一章 注释与快捷键
前端·html5
用户059540174463 天前
把AI对话记忆测试从手动比对到Pytest+Redis自动化,验证效率提升了10倍,还顺带揪出3个隐蔽bug
前端·css
用户059540174465 天前
把AI聊天机器人记忆存储测试从3小时压到5分钟,我用Pytest + Docker搭了一套自动化回归
前端·css
STU学生网页设计6 天前
大一学生作品《前端框架开发技术》 期末网页制作 HTML+CSS+JavaScript 个人主页网页设计实例
css·前端框架·html