• html+css(1-50)

    html

    1在这里插入图片描述

    2网页基础结构

    doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<body>
		
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    3
    在这里插入图片描述

    4
    在这里插入图片描述

    5
    在这里插入图片描述

    6
    在这里插入图片描述

    7
    在这里插入图片描述

    8
    在这里插入图片描述

    9
    10

    CSS

    1.编写位置：
    内嵌：
    < p style=“color:red;”>< /p>
    内部样式表：
    < styel type=“text/css”>< /styel>
    外部样式表
    < link rel=“styelsheet” type=“text/css” href=“文件路径”/>
    2css信息
    head 标签内，< styel>< /style>
    3选择器：
    p{ }
    p称为选择器，
    { } 声明块

    eg:div{},p{},h1{}

    • 1

    4id选择器
    根据元素class属性值，选中一组元素
    #id{}
    eg:#box{},#hello{}

    复合选择器=交集选择器,同事选择多个选择器对应元素
    5并集选择器（如果有元素选择器，必须使用元素选择器开头）
    可以同时选中符合多个选择器的元素
    div.p.box.hello{}
    h1,span{ color:red; }

        Document
    


    
    "box">this is h1
    
    
    "title">this is a h1
    
    
    "title">this is a h2
    


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    6后代元素选择器
    指定元素的后代元素
    div span{}
    div p{}

    7元素之间的关系：
    父元素：直接包含子元素
    子元素:直接被父元素包含
    祖先元素：直接间接包含后代元素的元素
    后代元素:直接或间接被祖先元素包含的元素
    兄弟元素：相同父元素的元素

    8块元素和内联元素：
    块元素：独占一行
    eg:div,p,h1~h6

    内联元素：也称为行内元素
span, a , img
包裹规则：块元素包内联元素。a包含任意元素，除了a本身，p不能包含任何块元素

    • 1
    • 2
    • 3
    


    
    
      
        
    • "first">第一个
      • 
        
    • 第二个
      • 
        
    • 第三个
      • 
    
    


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    9伪类和伪元素
    一般用来表示元素所处的特殊状态，特殊位置
    在这里插入图片描述

    :link表示未访问过的连接
：visited表示访问过的链接
：hover鼠标移入链接
：active正在被点击的链接
：focus元素获取焦点的状态
：：selection 表示内容被选中的状态
：first-letter表示第一个字符
：first-line表示文字的第一行
：before表示元素中的最前面
：after表示选中元素的最后边
ul>li:first-child{ color:red;}
ul>li:last-child{ color:red;}

伪元素：表示页面中特殊的并不存在的元素

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
     


    "http://www.bilibili.com">bbb
    
    "http://www.baidu.com">test



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    10兄弟元素选择器
    选取后一个兄弟元素：前一个+后一个
    选取后边所有兄弟元素：前一个~后面所有

    11选择器的优先级：
    在这里插入图片描述

    12长度单位
    px
    %
    em
    在这里插入图片描述

    13颜色单位
    在这里插入图片描述

    14文本样式
    在这里插入图片描述

    15背景

    在这里插入图片描述

  • 相关阅读:
    java技术专家面试指南50问【java学习+面试宝典】（六）
    上传百度文库有什么技巧吗？百度文库上传怎样才能成功
    springboot 批量下载文件, zip压缩下载
    springboot+ssm基于vue.js的客户关系Crm管理系统
    探索Java世界中的七大排序算法（上）
    容器技术 -- 简单了解 Kubernetes 的对象
    SpringMVC学习笔记（三）
    计算机毕业设计：基于python机器学习的全国气象数据采集预测可视化系统 预测模型+爬虫（包含文档+源码+部署教程）
    GNU链接脚本详解
    如何使用Net2FTP搭建免费web文件管理器打造个人网盘
  • 原文地址：https://blog.csdn.net/weixin_43366437/article/details/127586241