html之css基础总结

最新推荐文章于 2024-07-22 13:45:23 发布
最新推荐文章于 2024-07-22 13:45:23 发布
阅读量129 收藏
点赞数
文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26016931/article/details/116462263
版权

html之css基础总结

CSS的引用

  <!-- 内部样式表 -->
    <style>
        /* css中注释 */
        /* 选择器{
            属性:值;
            属性:值;
            ......
        } */
    </style>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="./test.css">
</head>
<body>
    <!-- 行内样式表 -->
    <h1 style="">标题</h1>

常用外观样式

<style>
        div{
            font-size: 30px;
            text-indent: 2em;
            color: rosybrown;
			/* 五种设置方式 */
            /* 1 英文单词  */
            color:orange;
            /* 2 6位16进制,前两位红色,中间两位绿色,最后两位蓝色 */
            color: #F25643;
            /* 3 3位16进制 */
            color: #f00;
            /* 4 rgb ,可以写百分比和 0-255的整数*/
            color: rgb(50%, 0%, 0%);
            /* 5 rgba , 第四个是透明度 0 - 1 之间的小数,0是完全透明*/
            color: rgba(255, 0, 0, 0.5);
        }
        h2{
            text-align: center;
            text-decoration: underline;
            text-decoration: line-through;
            text-decoration: overline;
        }
        p{
            text-align: center;
            border: 1px solid blue;
            line-height: 100px;
            cursor: pointer;
            background-color: silver;
            display: inline-block;
            text-decoration: underline;
        }
        a{
         /* 清除文本修饰,比如a标签默认的下划线 */
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h2>sdfasdfcxcv安抚</h2>
    <div>sadfsa啊手动阀手动阀撒旦发sadfsa啊手动阀手动阀撒旦发sadfsa啊手动阀手动阀撒旦发sad
        fsa啊手动阀手动阀撒旦发sadfsa啊手动阀手动阀撒旦发sadfsa啊手动阀手动阀撒旦发</div>

<div style="color:deepskyblue; text-align: center; text-indent: 0mm;">
    <p title="zhushi"><a href="所发生的">风飒飒大费</a></p>
    <p>osdafasdf啊撒打发</p>
</div>

在这里插入图片描述

字体设置

    <style>
        p{
            font-size:40px ;
            font-family:"KaiTi","微软雅黑","黑体" ;
            font-style: oblique;
            font-weight: 600;
        }
        span{
            /* 风格 , 粗细 , 大小, 字体  字体和大小必须写,否则不生效 */
            font: 40px "KaiTi";
        }
    </style>

通配符

对页面中所有元素进行样式设置

        *{
            color: red;
            。。。。。。
        }

伪元素

<style>
    .t{
        color: lightblue;
        position: relative;
        top: 200px;
    }
    h1{
        border: 1px solid black;
        color: lightblue;
        text-align: center;
    }
    h1:hover{
        color: black;
        position: relative;
        top:4px;
        cursor: pointer;

    }

    a:link{
        color: indigo;
        text-decoration: none;
    }
    a:hover{
        color: cornflowerblue;
        position: relative;
        top: 1px;
        left: 1px;
    }
    a:visited{
        color: crimson;
    }
    a:active{
        color: green;
    }


 
</style>
<body>
    <h1>href</h1>
    <table class="t" border="1" align="center" cellspacing="0" cellpadding="25" >
        <tr>
            <td>
                <a href="#7">登录</a>
                <a href="#1">注册</a>
                <a href="#3">注销</a>
                <a href="#4">忘记密码</a>
            </td>
        </tr>
    </table>
</body>

在这里插入图片描述

有父代，子代时对子代设置

    <style>
      /* 对子类设置 */
        ul>li>a{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <a href="">子标签</a>
        <li><a href="">孙标签</a></li>
    </ul>
</body>

在这里插入图片描述

类选择器

<style>
        p{
            text-indent: 2em;
            color: silver;
            font-size: 30px;
        }
        .a{
            color: blue;
            text-align: center;
        }
        p.a{
            text-indent: 0mm;
            color: rgb(0, 0, 0);
        }
        .c{
            color: gold;
        }
        .s{
            font-size: 80px;
        }
    </style>
</head>
<body>
    <h2 class="a">标题</h2>
    <p>啊发射点发离开剧场效率及阿尔u离开剧场效率及阿尔u离开剧场
        效率及阿尔u离开剧场效率及阿尔u离开剧场效率及阿尔u离开剧场效率及阿尔u日欧方式</p>
    <p class="a">only</p>
    <!-- 可以设置多个class值,多个用空格隔开 -->
    <p class="s c">saf</p>
</body>

在这里插入图片描述

id选择器

<Style>
    .a{
        color: rgb(0, 0, 0);
        font-size: 20px;
    }
    #d{
        font-size: 80px;
        color: blur;
        text-align: center;
    }

</Style>
</head>
<body>
    <p class="a" id="d">fasfsf</p>
    <p id="d" class="a">fasdfa</p>
</body>

在这里插入图片描述

块状元素，行内元素

1块状元素有哪些 其特征是什么
div , p , h1~h6 , ol , ul , dl , form , table , address,li,hr,nav,header
每个块级元素都独占，元素的宽度、高度、行高及顶部和底部边距可以设置
元素宽度在不设置的情况下，和它父元素的宽度一致。
2 行内元素有哪些 其特征是什么
span , a , em , b , i , strongimg , input , td，select，br,sup,del
元素的宽度、高度及顶部和顶部边距都不能设置，元素的宽度就是它所包含的文字或图片的宽度，不可修改。

        /* 转换为行内块 */
        /* display: inline-block; */
        /* 转换为行内元素 */
        /* display: inline; */
        /* 转换为块元素 */
        /* display: block; */
    /* }
    span:hover{
        /* 设置为none可以隐藏标签,并且也没中就没有这个标签了,不会预留位置 */
        /* display: none; */
    /* } */

背景位置设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

            /* 转换为行内块 */
            /* display: inline-block; */
            /* 转换为行内元素 */
            /* display: inline; */
            /* 转换为块元素 */
            /* display: block; */
        /* }
        span:hover{
            /* 设置为none可以隐藏标签,并且也没中就没有这个标签了,不会预留位置 */
            /* display: none; */
        /* } */ 

    .d{
        border:1px solid red;
        height: 300px;
        width: 300px;
        background-image: url(./tianshi.gif);
        background-repeat: no-repeat;
        /*背景综合写法
         background: pink url(./img/1.jpg) no-repeat scroll center; */
        /* 设置平铺 : no-repeat(不平铺) , repeat-x (x轴平铺) , repeat-y(y轴平铺) , repeat(x,y都平铺)  */
        background-position: bottom right;
        display: inline-block;
    }
    .e{
        border:1px solid red;
        height: 300px;
        width: 300px;
        background-image: url(./tianshi.gif);
        background-repeat: no-repeat;
        background-position: 100% 100%;
        display: inline-block;
    }
    .f{
        border:1px solid red;
        height: 300px;
        width: 300px;
        background-image: url(./tianshi.gif);
        background-repeat: no-repeat;
        background-position: 200px 200px;
        display: inline-block;
    }
</style>
<body>
    <div class="d"></div>
    <div class="e"></div>
    <div class="f"></div>
</body>
</html>

CSS复合选择器总结

并集选择器

    <style>
        /* 公共的属性设置 */
        p,.a{
            color: blue;
            text-align: center;
            font-size: 50px;
        }
        .a{
           font-size: 70px;  
        }
    </style>
</head>
<body>
    <p>asdf</p>
    <h3 class="a">sdfsadf</h3>
</body>

交集选择器 交集选择器 是 并且的意思。 即…又…的意思
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
在这里插入图片描述
后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
在这里插入图片描述
子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
在这里插入图片描述

    <style>
      /* 对子类设置 */
        ul>li>a{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <a href="">子标签</a>
        <li><a href="">孙标签</a></li>
    </ul>
</body>

属性选择器
选取标签带有某些特殊属性的选择器 我们称为属性选择器

    <style>
        div{
            text-align: center;
          
        }
        input[type='button']{
            border-radius: 3px;
            color: blue;
        }
        input[id]{
            color: red;
        }
        a[href^='http']{
            color: red;
        }
        a[href$='com1']{
            color: gold;
        }
    </style>
</head>
<body>
    <div>
        <input type="button" value="shuru2">
        <input type="button" id="" value="shuru">
        <input type="text" name="">
        <a href="http://www.taobao.com">淘宝</a>
        <a href="www.baidu.com1">百度</a>
    </div>
</body>

在这里插入图片描述

今天十五
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+css基础知识总结
06-07
能快速准确的看出html+css基础标签和样式的作用
HTML.css知识总结.md
06-19
对于小白新手入手可借鉴，都是HTML+CSS基础 打好基础才会让代码写的轻松像云上游走，不费吹灰之力学好HTML+CSS
php 对 html 的操作 htmlspecialchars和htmlspecialchars_decode
weixin_39091232的博客
05-29 459
一 htmlspecialchars_decode //正函数 htmlspecialchars echo htmlspecialchars("<p>沁园春 雪</p><p>北国风光，千里冰封 万里雪飘</p><p>望长城内外 惟余莽莽 大河上下</p><p>董事涛涛 山舞银蛇 原驰蜡象。。。<br/></p>"); 返回 “<p>沁园春 雪</p><p>北国风光
htmlspecialchars定义和用法
aimder的博客
08-09 1086
htmlspecialchars 定义和用法 htmlspecialchars() 函数把预定义的字符转换为 HTML 实体。 预定义的字符是： & （和号）成为 & " （双引号）成为 " ’ （单引号）成为 ’ < （小于）成为 < > （大于）成为 > ...
HTML基础知识
Special_girl100的博客
10-13 103
HTML全称为超文本标记语言，是一个网页的骨架，如果没有HTML，则网页不会显示任何内容 后缀名为" .html " 开发工具：Visual Studio Code https://code.visualstudio.com/ 基本框架 英文状态下输入！键，出现提示，点击回车键即可生成相应内容（若不出现提示，可在 文件 -> 首选项 -> 设置 找到Editor:Insert Spaces选项勾选，点击Tab键即可生成相应内容） <!DOCTYPE html&g...
HTML常用标签
Special_girl100的博客
10-13 248
h1~h6 表示一级到六级标签 <h1>一级标题</h1> <h6>六级标题</h6> p 表示段落。默认情况，在网页上，页面的内容不会按照我们写的代码进行换行，回车会被渲染成一个空格 <p>这是一段文字</p> a 表示超链接。未被访问的超链接默认为 蓝色；已经被访问的超链接默认为 紫色 href 必填属性。超链接跳转路径的设置，可以是网址 url()，也可以是相对路径 target _blank 页.
htmlspecialchars() 函数过滤XSS的问题
热门推荐
qlxmy的博客
03-05 1万+
htmlspecialchars()函数的功能如下： htmlspecialchars() 函数把预定义的字符转换为 HTML 实体。 预定义的字符是： & （和号）成为 &" （双引号）成为 "' （单引号）成为 '> （大于）成为 > 它的语法如下： htmlspecialchars(string,flags,character-set,double_en
HTML+CSS学习总结
weixin_53351919的博客
06-26 2804
html+css学习总结
html+css基础知识
weixin_52682120的博客
05-10 2108
0、前提 80%知识，只有20%的场景可以用到； 20%的知识，有80%的场景可以用到。 1 、HTML & CSS 到底是什么，有什么用？ 它们是两门语言。 HTML + CSS + Javascript = 网页 HTML：Hyper Text Markup Language 超文本标记语言；定义网页中有什么。 CSS：Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子。 1.1 执行HTML CSS HTML、CSS -> 浏览器内核 -> 页面
HTML+CSS基础知识
m0_46201565的博客
06-06 3426
HTML+CSS基础文档
HTML+CSS+JavaScript基础知识总结
qq_53061847的博客
05-27 1万+
目录 一、HTML+CSS 1. 如何理解HTML的语义化 2. 从浏览器地址栏输入url回车会发生什么 3. 溢出的文字显示省略号 4. css选择器和优先级 css选择器 5. BFC 6. 水平垂直居中的方法 二、JavaScript 1. 基本数据类型 2. 数组的使用 一、数组序列化 二、栈和队列方法 三、排列方法 四、操作方法 五、位置方法 六、迭代方法 2.1 利用函数求任意个数的最大值 2.2 利用函数翻转任意数组 reverse ......
html+css笔记总结
11-06
二、CSS基础 1. **选择器**: CSS通过选择器来指定要应用样式的元素，如`p`选择器用于所有段落，`#id`选择器用于ID为特定值的元素，`.class`选择器用于具有特定类名的元素。 2. **属性与值**: CSS规则由选择器和声明...
html+css基础总结（思维导图）
02-20
HTML和CSS基础知识点总结（xmind编辑的思维导图）
css基础教程之CSS基础语法
09-25
总结来说，CSS基础语法主要包括样式的应用方式（行内、内嵌、链接和导入）和选择器的使用，通过这些工具，我们可以精确地控制HTML元素的视觉呈现。在实际开发中，合理运用选择器和样式应用方式，可以提高代码的可...
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 1659
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
[css3] 如何设置边框颜色渐变
qq_14993591的博客
07-22 754
【代码】[css3] 如何设置边框颜色渐变。
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现北方苍鹰优化算法NGO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
HTML前端与CSS基础总结
"这篇资料是关于在校学习HTML前端知识的总结，涵盖了HTML基本标签、CSS样式设置、JavaScript和jQuery的基础内容，以及相关的案例笔记。" HTML是超文本标记语言，用于构建网页结构，其常用标签包括： 1. `a`标签用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值