首页 > 其他分享 >HTML+css

HTML+css

时间:2023-04-15 17:55:10浏览次数:30  
标签:flex color HTML 字体 font 选择器 css

因为测试需要用到css的内容,所以开始系统学习css和js技术

css有id选择器,类选择器,可以组合,也可以单独分布

首先是基本的选择器

h1{
    color: rebeccapurple;

}
/*类样式 class=*/
.f20{
    font-size: 18px;
}
/*id样式 id=,not copy*/
#p4{
    font-size: 30px;                /* 字体大小  */
    font-weight: bolder;            /* 字体加粗 */
    background-color: pink;         /*字体背景颜色*/
    font-style: italic;             /* 字体阴影*/
    font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
}
#p3{
    font-size: 30px;                /* 字体大小  */
    font-weight: bolder;            /* 字体加粗 */
    background-color: pink;         /*字体背景颜色*/
    font-style: italic;             /* 字体阴影*/
    font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
}
/*组合嵌入*/
div h1{
    color: indianred;
}

 

 

 

 

div的一种较为好看的布局

/*div 布局*/
#div1{
    width: 400px;
    height: 400px;
    background-color: rgba(75, 81, 95, 0.3);
    display: flex;
    box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);/*边框偏移量-X,-y,-阴影模糊半径,-阴影颜色*/
    border-radius: 30px;/*边框圆滑程度*/
/*弹性布局
justify-content:flex在x上的偏移量
align-items:flex在y上的偏移量
*/
    display: flex;
    justify-content: center;
    align-items: center;
}

 

标签:flex,color,HTML,字体,font,选择器,css
From: https://www.cnblogs.com/copyjames/p/17321536.html

相关文章

  • 安装scss
    在vue中使用scss需要安装三个packagenode-sasssass-loaderstyle-loader网上搜到的教程都是直接安装npminstallnode-sass--save-devnpminstallsass-loader--save-devnpminstallstyle-loader--save-dev但这样安装会报一堆版本错误找了很多帖子,最终亲测有效的方......
  • HTML5链接和图片基础用法
    一、HTML5超链接(链接)超链接可以是一个文本,也可以是一幅图像,您可以点击这些内容来跳转到新的页面或新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。1.我们通过使用a标签在HTML中创建链接。有两种使用a标签的方式:通过使......
  • 在markdown中,如何使用html代码将多行的代码块插入到一行文字中
    这是一行文字,其中包含了一段多行的代码块:<codestyle="display:inline-block;">intmain(){printf("Hello,world!");return0;}</code>文字继续向下。效果如下:这是一行文字,其中包含了一段多行的代码块:intmain(){printf("Hello,world!");return0;}文字继续......
  • VUE框架中实现HTML页面(局部)内容转PDF下载
    有一朋友想把网页内容变成PDF下载下来。问我有没有好办法。这还真巧了,咱公司也有这个需求,就是网页生成合同,然后可以直接打印合同内容。最早吧,就是可以直接打印就好了。当时为解决完美打印的问题,挺费劲的,当时第三方插件还有BUG(当然把解决放给发给作者了,作者早已经修复了),正经反复......
  • 前端CSS
    目录CSS介绍CSS语法CSS实例CSS注释学习css的步骤CSS的几种引入方式行内样式内部样式外部样式CSS选择器基本选择器id选择器类选择器标签选择器通用选择器组合选择器后代选择器儿子选择器毗邻选择器弟弟选择器属性选择器分组和嵌套分组嵌套伪类选择器伪元素选择器first-letterbefore......
  • eclipse把非标准类型的html加进去
    把非标准的html类型加进去......
  • 2023-04-14 css before after
    before在元素前,after在元素之后,使用:.or::before{width:100px;height:1px;background:#000;display:block;content:'',}.or::after{width:100px;height:1px;background:#00......
  • 关于 css 伪元素 content属性值 为中文字符时出现乱码问题的处理
    更多关于csscontent属性的介绍点我 场景:需要在右箭头(点击该箭头是可以跳转到详情页)的左侧补充一个“更多”的文字描述 在一些场景下,使用CSS去做改动会是最优的,比如无源码等 易出现乱码的代码示例i.common-right-arrow-icon{position:relative;}i.comm......
  • HTML、JS与PHP之间的数据传输
    在电商网站搭建过程中,前端经常会向后端请求数据,有时候通过HTML、JS和PHP文件的处理来实现数据的连通。通常情况下,用户在HTML中做关键字操作,JS对提交的表单进行数据处理,向后端发起ajax请求对应PHP的api接口,PHP在接收到数据后对连接服务器,服务器再通过PHP中的SQL语句对数据库关键字......
  • 使用css在元素的前面或者后面添加内容
    :before在元素前面添加内容:after在元素的后面添加内容<!DOCTYPEhtml><html><style>h1:after{content:'前面的内容';}h1:before{content:'后面的内容';}</style><body><h1>***h1内容****</h1></body></html......