css学习心得

css

  • 通过内嵌样式表来选择文本字体的大小和颜色
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>p{font-size:16px;color: blue;}</style></head><body><!-- px 像素单位行内样式表-直接写在标签中--><p>你好</p></body>
</html>
  • 通过导入外部样式表来选择文本字体的大小和颜色

css代码:

p{font-size:16px;color: blue;
}

HTML代码


<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入外部样式表--><link href="css/new_file.css" rel="stylesheet"/></head><body><p>你好</p></body>
</html>

选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 标签选择器 */p{color:blue;font-size:20px;}/* id选择器 */#title{color:blue;font-size:15px;}/* 类选择器 */.p1{color:green;}.p2{color:pink;}/* 选择器优先级 id>类>标签*//* *:通配选择器,匹配网页中所有的标签 */*{font-family:楷体;}/* 选择器组合:可以为多个选择器定义相同的样式表 */ #title,.p1,h1{font-family:黑体;}</style></head><body><h1>真的吗</h1><p id="title" class="p1">你好</p><p class="p1">我也好</p><p class="p2">他也好</p></body>
</html>

文本

text-decoration对文字进行修饰
underline 下划线
line-through 删除线

letter-spacing:字符间距

word-spacing:字母间距

text-indent:首行缩进

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.p1{font-weight: 900;font-size: 1.25rem;text-align: center;text-decoration:none;/*text-decoration对文字进行修饰underline 下划线line-through 删除线*/letter-spacing: 10px;/* letter-spacing:字符间距 */word-spacing: 5px;/* word-spacing:字母间距 */text-indent: 2rem;/* text-indent:首行缩进 */font-family: 字魂49号-逍遥行书;}a{text-decoration: none;font-size: 6.25rem;}</style></head><body><p class="p1">张兰直播间再现经典!与汪小菲前任同框,现任女友却被前夫爆料<br />在娱乐圈这个充满八卦和话题的世界里,汪小菲一家可谓是自带流量。最近,张兰在直播间与前夫的现任妻子意外同框,这一罕见画面瞬间点燃了网友们的八卦之火。<br />直播中,张兰与汪小菲的前任妻子谈笑风生,两人似乎并没有因为过去的恩怨而尴尬。相反,她们的互动还显得十分自然,这让不少网友纷纷表示:“这气度,真是绝了!”</p><a href="选择器.html">百度</a></body>
</html>

背景

background-image:设置图片背景

background-position:设置背景位置

background-size:设置背景大小

<html><head><meta charset="utf-8"><title></title><style type="text/css">p{color: white;text-align: center;background-color: chartreuse;width: 800px;height: 800px;font-family: 字魂49号-逍遥行书;font-size: 20ex;background-image: url("img/1.jpg");background-position: center center;background-size: 100%;}</style></head><body><p>你好</p></body>
</html>

css的伪类

hover:当鼠标移入某标签时,会自动切换到此样式表

active:当鼠标点击标签时 ,会自动切换到此样式表

focus:拥有鼠标焦点的标签

		/* 当鼠标移入某标签时,会自动切换到此样式表 */a:hover{color: black;font-family: 字魂49号-逍遥行书;}/* 当鼠标点击标签时 ,会自动切换到此样式表*/input:active{color: aliceblue;}/* 拥有鼠标焦点的标签 */.txt:focus{background-color: aqua;}

标签分类

  • 块级标签:无论内容多少,都会独占一行,一般用来进行网页布局。

可以设置宽高 width-height

  • 行级标签:只占自身大小,不会占一行。设置宽高无效。
  • 行级块标签

div和span

  • div:是一个无任何默认格式的块级标签,用于进行网页布局,其不会有默认属性影响分布的情况

  • span:行级标签,类似于div

盒模型

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 标签=内容区+内边距+边框

  • 内容区(content)

    1. width设置内容区宽度
    2. height设置内容区高度

    **注:**如果没有设置标签的内边距和边框,则内容区默认和盒子大小一样

  • 内边距(padding):内容区到边框以内的区域

    1. padding:上px 右px 下px 左px
    2. padding:上下px 左右px
    3. padding:上下左右10px
  • 边框(border):标签可见标的最外部

    1. border: ;
    2. border-radius: ;
  • 外边框(margin)

    1. 外边距可以设置为auto:

      左右设置auto时,两边边距相等,标签水平居中

      上下设置auto时,上下边距相等,标签水平居中

    2. 外边距不能改变标签大小,只能改变标签位置

文档流

浮动

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.nav{background-color: aqua;float: left;padding: 10px 40px ;}.nav:hover{background-color: brown;}</style></head><body><div class="nav">网站首页</div><div class="nav">产品案例</div><div class="nav">公司一览</div><div style="background-color: blue;">in你导航切换</div></body>
</html>
  • 此时浮动后效果如图所示

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 要使浮动目标内容居中则需使这三个内容在同一块级标签上并使左右居中

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.nav{background-color: aqua;float: left;padding: 10px 40px ;}.navbox{width: 600px;margin: 0px auto;}.nav:hover{background-color: brown;}</style></head><body><div class="navbox"><div class="nav">网站首页</div><div class="nav">产品案例</div><div class="nav">公司一览</div></div><div style="background-color: blue;">in你导航切换</div></body>
</html>

效果如图:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 此时浮动的内容处于顶层图层,要消除这种问题有两种解决方法:

    1. 为父级标签设置一个高度,将父级标签撑开
    <!DOCTYPE html>
    <html><head><meta charset="utf-8"><title></title><style>.nav{background-color: aqua;float: left;padding: 10px 40px ;}.navbox{width: 600px;margin: 0px auto;height: 40px;}.nav:hover{background-color: brown;}</style></head><body><div class="navbox"><div class="nav">网站首页</div><div class="nav">产品案例</div><div class="nav">公司一览</div></div><div style="background-color: blue;">in你导航切换</div></body>
    </html>
    

    2.在浮动的标签后使用清除浮动的属性

    <!DOCTYPE html>
    <html><head><meta charset="utf-8"><title></title><style>.nav{background-color: aqua;float: left;padding: 10px 40px ;}.navbox{width: 600px;margin: 0px auto;height: 40px;}.nav:hover{background-color: brown;}</style></head><body><div class="navbox"><div class="nav">网站首页</div><div class="nav">产品案例</div><div class="nav">公司一览</div><div style="clear: left;"></div> <!--清除浮动的影响,自动撑开父级标签  --></div><div style="background-color: blue;">in你导航切换</div></body>
    </html>
    

    结果如下:

      height: 40px;}.nav:hover{background-color: brown;}</style>
    
    in你导航切换
    ```

    结果如下:

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/732115.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在Linux系统安装SVN并配置固定公网地址远程访问【内网穿透】

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…

牛客小白月赛88

E.多重映射 解题思路 对集合进行整体操作&#xff0c;集合大小只增不减&#xff0c;问最后集合标号维护集合&#xff0c;考虑并查集但直接用并差集维护会有以下问题&#xff1a;当前集合变标号&#xff0c;可能会和之前标号相同&#xff0c;则进行并查集操作时&#xff0c;会接…

ai语音克隆:用AI大模型开发点亮你的创作天地!

在当今快速发展的科技时代&#xff0c;人工智能技术已经深入到我们生活的方方面面。AI语音克隆作为其中的一种应用&#xff0c;正在逐渐走进人们的视野&#xff0c;为人们的创作提供了全新的可能性。 人类创作的过程往往是一个灵感迸发、思绪飞扬的过程。但有时候&#xff0c;…

数据结构——堆的应用 堆排序详解

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…

网上近来都有哪些有关李小璐及其女儿甜馨的恶评?作为网民应怎样规避恶语中伤或网暴?

网上近来都有哪些有关李小璐及其女儿甜馨的恶评&#xff1f;作为网民应怎样规避恶语中伤或网暴&#xff1f; 近日&#xff0c;#李小璐发文鼓励女儿甜馨不要受恶评影响#登上热搜&#xff0c;网上都有哪些关于李小璐及其女儿的恶评&#xff1f;作为普通网民应怎样规避恶评或网暴&…

JVM——执行引擎

文章目录 1、概述2、计算机语言的发展史2.1、机器码2.2、汇编语言2.3、高级语言2.4、字节码 3、Java代码编译和执行过程4、解释器5、JIT编译器5.1、为什么HotSpot VM同时存在JIT编译器和解释器5.2、热点代码探测确定何时JIT5.3、设置执行模式5.4、C1编译器和C2编译器 6、AOT编译…

搜狐新闻Hybrid AI引擎端侧离线大语言模型探索

本文字数&#xff1a;3027字 预计阅读时间&#xff1a;20分钟 01 一、导读 • LLM 以及移动平台落地趋势 • 搜狐AI引擎内建集成离线可运行的GPT模型 • Keras 定制预训练模型 • TensorFlow Lite converter 迁移到移动设备 02 二、LLM 1.1什么是LLM L…

国产硅片膜厚检测仪

硅片膜厚检测仪是半导体行业中一种至关重要的设备&#xff0c;用于精确测量硅片上薄膜的厚度。在半导体制造工艺中&#xff0c;薄膜厚度的控制对于保证器件性能和可靠性具有决定性的作用。因此&#xff0c;硅片膜厚检测仪的研发和应用对于推动半导体技术的发展具有重要意义。 一…

问卷调查|在线问卷调查系统|基于Springboot的在线问卷调查系统设计与实现(源码+数据库+文档)

在线问卷调查系统目录 目录 基于Springboot的在线问卷调查系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1、问卷管理 2、 问卷调查管理 3、题目管理 4、 用户管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐…

云打印机多少钱一台?

随着新的一年的开始&#xff0c;很多同学们都开始打印资料&#xff0c;以应对新一年的各种考试。但是对于学生们来说&#xff0c;去打印店打印价格贵、打印不方便、没时间去打印等多种原因导致我们没办法及时打印资料&#xff0c;这个时候我们就需要用到云打印机。那么云打印机…

【基础算法练习】再学背包问题(01背包)

文章目录 背包模板题朴素版代码&#xff08;二维&#xff09;思路状态压缩代码&#xff08;一维&#xff09;思路 背包模板题 朴素版代码&#xff08;二维&#xff09; #include <iostream> #include <algorithm> using namespace std;const int N 1010;int n, m…

Linux报错排查-刚安装好的ubuntu系统无法ssh连接

Linux运维工具-ywtool 目录 一.问题描述二.问题解决2.1 先给ubuntu系统配置阿里云源2.2 安装openssh-server软件2.3 在尝试ssh连接,可以连接成功了 三.其他命令 一.问题描述 系统:ubuntu-18.04-desktop-amd64 系统安装完后,想要通过xshell软件连接系统,发现能Ping通系统的IP,但…

三色标记过程

可达性分析 GC过程中需要对对象图遍历做可达性分析。使用了三色标记法进行分析。 什么三色&#xff1f; 白色&#xff1a;尚未访问过。 黑色&#xff1a;本对象已访问过&#xff0c;而且本对象 引用到 的其他对象 也全部访问过了。 灰色&#xff1a;本对象已访问过&#xff0…

C语言第三十七弹---文件操作(下)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 文件操作 1、文件的随机读写 1.1、fseek 1.2、ftell 1.3、rewind 2、文件读取结束的判定 2.1、被错误使用的 feof 3、文件缓冲区 总结 1、文件的随机读写…

根据QQ号获取暗恋的人的全部歌单

文章目录 前言一、成果展示二、后端开发流程三、前后端障碍与难点解决四、待扩展内容五、总结 前言 本人喜欢使用QQ音乐听歌&#xff0c;并且喜欢点击好友栏目观看最近在听&#xff0c;了解暗恋的人最近在听什么歌曲&#xff0c;知己知彼&#xff0c;百战不殆。但是每次都需要…

XSS-Labs靶场1---11关

一、XSS环境搭建&#xff1a; [ 靶场环境篇 ] XSS-labs 靶场环境搭建(特别详细)_xss靶场搭建-CSDN博客 &#xff08;该博主总结的较为详细&#xff0c;若侵权必删&#xff09; 常用的xss攻击语句&#xff1a; 输入检测确定标签没有过滤后&#xff0c;为了显示存在漏洞&#…

js如何显示input输入的文字的个数

一、直接上效果图 二、直接上代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body><div class"fabu"><input type"text" id"contact" on…

python的generator生成器用法测试

yield、send、threw、close # coding: utf8# 生成器 def gen(n):for i in range(n):yield ig gen(5) # 创建一个生成器 print(g) # <generator object gen at 0x10bb46f50> print(type(g)) # <type generator># 迭代生成器中的数据(只有执行for循环…

go语言添加代理

LiteIDE 工具->管理 https://mirrors.aliyun.com/goproxy/或https://goproxy.cn,direct 命令行 go env -w GOPROXYhttps://goproxy.cn,direct

基于SpringBoot的CNKI数据精炼与展示

目 录 摘 要 I Abstract II 引 言 1 1 相关技术 3 1.1 SpringBoot框架 3 1.1.1 Spring框架介绍 3 1.1.2 SpringBoot框架介绍 3 1.2 MyBatis框架 4 1.3 Echarts框架 5 1.4 Bootstrap框架 5 1.5 JQuery技术 6 1.6 本章小结 6 2 系统分析 7 2.1 功能需求分析 7 2.1.1 门户模块需求…