灯塔:CSS笔记

CSS:层叠样式表

所谓层叠 即叠加的意思,表示样式可以一层一层的层叠覆盖

css写在style标签中,style标签一般写在head标签里面,title标签下面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{/*  */color: white;/*  */font-size: 30px;/*  */background-color: black;/*  */width: 300px;height: 400;}</style>
</head>
<body><p>这是一个p标签</p>
</body>
</html>

CSS的引入方式:

内嵌式:CSS写在style标签中

style标签虽然可以写在页面的任意位置,但是通常约定写在head标签中

 外联式:CSS写在一个单独的.css文件中

需要通过link标签在网页中引入

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
//stylesheet 样式表<link rel="stylesheet" href="./my.css">
</head>
<body><p>活在当下 </p>
</body>
</html>
p{color: aquamarine;
}
 行内式:CSS写在标签的style属性中 配合js使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行内式</title>
</head>
<body><p style="color: aqua; font-size: 30px; background-color: blanchedalmond;" >This is yellowgreen.</p>
</body>
</html>

CSS常见三种引入方式的特点区别有哪些?

引入方式书写位置作用范围使用场景
内嵌式CSS写在style标签中当前页面小案例
外联式CSS写在单独的css文件中,通过link标签引入多个页面项目中
行内式CSS写在标签的style属性中当前标签配合js使用

 基础选择器:

1.标签选择器

结构:标签名{ css 属性名:属性值;}

作用:通过标签名,找到页面中所有这类的标签,设置样式

注意点:

1.标签选择器选择的是一类标签,而不是单独某一个

2.标签选择器无论嵌套关系有多深,都能找到对应的标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 选择器{} *//* 标签选择器就是以标签名命名的选择器 *//* 标签选择器选中的所有的这个标签都生效 */p{color: chocolate;background-color: bisque;font-size: 30px;}</style>
</head>
<body><p>这是一个p标签</p><p>这也是一个p标签</p>
</body>
</html>
2.类选择器

结构:.类名{ css属性名:属性值;}

作用:通过类名,找到页面中所有带有这个类名的标签,设置样式

注意点:

1.所有标签上都有class属性,class属性的属性值称为类名(类似于名字)

2.类名可以由数字 字母 下划线 中划线组成,但是不能以数字或者中划线开头

3.一个标签可以同时有多个类名,类名之间以空格隔开

4.类名可以重复,一个类选择器可以同时选中多个标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类选择器</title><style>.color{color: lightcoral;}.size{font-size: 20px;}</style>
</head>
<body><p class="color size">这是一个p标签</p><div class="color">这是一个div标签</div>
</body>
</html>
3.id选择器

结构:#id属性值{ css属性名:属性值;}

作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式

注意点:

1.所有标签上都有id属性

2.id属性值类似于身份证号,在一个页面 中是唯一的,不可重复

3.一个标签上只能有一个id属性值

4.一个id选择器只能选择一个标签

4.通配符选择器

结构:*{css 属性名:属性值;}

作用:找到页面中所有的标签,设置样式

注意点:

1.开发中使用极少,只会在极特殊情况下才会用到

2.在小页面中可能会用于去除标签默认的margin和padding

字体和文本样式

1.字体大小

属性名:font-size

取值:数字+px

注意点:

谷歌浏览器默认文字大小是16px

单位需要设置,否则无效

2.字体粗细

属性名:font-weignt

关键字:

正常normal
加粗bold

纯数字:

正常400
加粗700

注意点:

不是所有字体都提供了九种粗细,因此部分取值页面中无变化

实际开发中:正常加粗两种取值使用最多

3.字体样式(是否倾斜)

属性名:font-style

取值:

正常(默认):normal

倾斜:italic

字体系列 font-family

样式的层叠问题

如果给同一个标签设置了相同的样式,此时样式会层叠(覆盖),写在最下面的会生效

字体font相关属性的连写

属性名:font(复合属性)

取值:font:style weight size family;

省略要求:只能省略前两个,如果省略了相当于

设置了默认值

注意点:如果需要同时设置单独和连写形式

要么把单独的样式写在连写的下面

要么把单独的样式写在连写的里面

文本缩进

属性名:text-indent

取值:

*数字+px

*数字+em(推荐:1em=当前标签的font-size的大小)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{text-indent: 2em;}</style>
</head>
<body><p>神舟十七号航天员汤洪波、唐胜杰、江新林密切协同,在空间站机械臂和地面科研人员的配合支持下,完成全部既定任务,航天员汤洪波、江新林安全返回问天实验舱,出舱活动取得圆满成功</p>
</body>
</html>
文本水平对齐方式

属性名:text-align

取值:

属性值效果
left左对齐
center居中对齐
right右对齐

注意点:如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1{text-align: center;}p{text-align: right;}div{text-align: left;}</style>
</head>
<body><h1>新闻标题</h1><p>这是一个p标签</p><div>这是一个div标签</div>
</body>
</html>
文本修饰

属性名:text-decoration

取值:

属性值效果
underline下划线(常用)
line-through删除线(不常用)
overline上划线
none无装饰线(常用)

注意点:开发中会使用text-decoration:none;清除a标签默认的下划线

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{text-decoration: underline;}div{text-decoration: line-through;}h2{text-decoration: overline;}a{text-decoration: none;}</style>
</head>
<body><p>ppppp</p><div>divdivdiv</div><h2>h2h2h2</h2><a href="">我是超链接 点点看😉😉😉</a>
</body>
</html>
水平居中的方法总结 text-align:center

text-align:center能让哪些元素水平居中?

1.文本

2.span标签 a标签

3.input标签 img标签

注意点:

如果需要让以上元素水平居中,text-align:center需要给以上元素的父元素设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{text-align: center;}body{text-align: center;}</style>
</head>
<body><p>图片</p><img src="beauty.jpg" alt="正在加载中" title="这是一个美女图片" width="400">
</body>
</html>
行高

作用:控制一行的上下间距

属性名:line-height

取值:

*数字+px

*倍数

应用:1.让单行文本垂直居中可以设置line-height:文字父元素高度

2.网页精准布局时,会设置line-height:1可以取消上下间距

行高与font连写的注意点:

*如果同时设置了行高和font连写,注意覆盖问题

*font:style weight size/line-height family;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{font: italic bold 32px/1.5 宋体;}</style>
</head>
<body><p>没错。原子弹爆炸的条件既不是铀的“临界质量”,也不是铀的“临界密度”,而是基于“碰撞截面”和铀块形状、反射层 / 反射率等等共同决定的一个复杂参数。什么叫“碰撞截面”呢?还记得高中学过的卢瑟福实验吗?没错,用α粒子轰击金箔,这才发现金箔对α粒子几乎是透明的——然后,揭示了一个事实:原子核是一个极小极小的核,原子之间是极其空旷的。换句话说,固体中,原子和原子并不是像这样,一堆实心小球堆叠起来的我们知道,想要引起铀核裂变,就需要让中子击中原子核。</p>
</body>
</html>

标签水平居中方法总结 margin :0 auto

如果需要让div p h(大盒子)水平居中?

可以通过margin :0 auto;实现

注意点:

1.需要让div p h (大盒子)水平居中,直接给当前元素本身设置即可

2.margin:0 auto 一般针对固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{background-color: brown;width: 600px;height: 400px;margin: 0 auto;}</style>
</head>
<body><div></div> 
</body>
</html>

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

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

相关文章

Vue开发实例(一)Vue环境搭建第一个项目

Vue环境搭建&第一个项目 一、环境搭建二、安装Vue脚手架三、创建Vue项目 一、环境搭建 下载方式从官网下载&#xff1a;http://nodejs.cn/download/ 建议下载v12.16.0版本以上的&#xff0c;因为版本低无法创建Vue的脚手架 检验是否安装成功 配置环境变量 新增NODE_HOME&…

chrome选项页面options page配置

options 页面用以定制Chrome浏览器扩展程序的运行参数。 通过Chrome 浏览器的“工具 ->更多工具->扩展程序”&#xff0c;打开chrome://extensions页面&#xff0c;可以看到有的Google Chrome扩展程序有“选项Options”链接&#xff0c;如下图所示。单击“选项Options”…

车载测试_UDS诊断:功能寻址、物理寻址

车载项目讲解 简历修改优化 模拟面试 面试录音辅导 预约面试技巧 面试一对一在线协助 车载入职技术支持三个月 诊断三要素&#xff1a;请求/肯定响应/否定响应&#xff08;诊断服务失败或者无法完成&#xff09;。 服务可以诊断通信管理请求、数据请求、故障代码请求、输入/输出…

SpringBoot约定大于配置

什么是约定大于配置 "约定大于配置"&#xff08;Convention Over Configuration&#xff09;是一种理念&#xff0c;旨在通过默认约定和规则来减少开发人员需要做的配置工作。在Spring Boot框架中&#xff0c;这一原则得到了充分应用&#xff0c;帮助开发者更快地构…

使用Spark探索数据

需求分析 使用Spark来探索数据是一种高效处理大规模数据的方法&#xff0c;需要对数据进行加载、清洗和转换&#xff0c;选择合适的Spark组件进行数据处理和分析。需求分析包括确定数据分析的目的和问题、选择合适的Spark应用程序和算法、优化数据处理流程和性能、可视化和解释…

(三)softmax分类--九五小庞

softmax分类 对数几率回归解决的是二分类的问题&#xff0c;对于多个选项的问题&#xff0c;我们可以使用softmax函数&#xff0c;它是对数几率回归在N个可能不同的值上的推广 softmax各样本分量之和为1&#xff0c;当只有两个类别时&#xff0c;与对数几率回归完全相同 损失…

vmware虚拟机centos中/dev/cl_server8/root 空间不够

在使用vmware时发现自己的虚拟机的/dev/cl_server8/root空间不够了&#xff0c;没办法安装新的服务。所以查了一下改空间的办法。 1.在虚拟机关闭的状态下&#xff0c;选中需要扩容的虚拟机->设置->硬件-> 硬盘->扩展->填写扩大到的值。 2.打开虚拟机&#xff…

CSS 盒子模型(box model)

概念 所有HTML元素可以看作盒子&#xff0c;在CSS中&#xff0c;"box model"这一术语是用来设计和布局时使用CSS盒模型本质上是一个盒子&#xff0c;封装周围的HTML元素&#xff0c;它包括&#xff1a;外边距(margin)&#xff0c;边框(border)&#xff0c;内边距(pad…

ELK+kafka+filebeat企业内部日志分析系统

目录 ELKkafkafilebeat企业内部日志分析系统 1、组件介绍 1、Elasticsearch&#xff1a; 2、Logstash: 3、Kibana: 4、Kafka&#xff1a; 5、Filebeat: 2、环境介绍 3、版本说明 4、搭建架构 5、实施部署 1、 Elasticsearch集群部署 1、安装配置jdk 2、安装配置ES…

2024 年适用于电脑的十大录制屏幕软件

录制屏幕软件的设计和开发旨在让您的工作流程更轻松、更高效。这些漂亮的工具有助于为教育目的捕获图像快照或记录屏幕以与客户共享模型。无论您寻找桌面屏幕录像机的原因是什么&#xff0c;这里都有最好的付费和免费实用程序。该类别中我们最喜欢的一些选择是 奇客录屏助手和 …

基于Springboot的人事管理系统 (有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的人事管理系统 &#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&am…

【机器学习】FashionMNIST数据集简介及下载方法(自动下载)

【机器学习】FashionMNIST数据集简介及下载方法(自动下载) &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望得到您的订…

MATLAB环境下基于图像处理的计算病理学图像分割(MATLAB R2021B)

人工智能是病理学诊断和研究的重要新兴方法&#xff0c;其不仅可用于病理形态数据分析&#xff0c;还可整合免疫组化、分子检测数据和临床信息&#xff0c;得出综合的病理诊断报告&#xff0c;为患者提供预后信息和精准的药物治疗指导。计算病理学是病理学与AI、计算机视觉等信…

【LeetCode:2368. 受限条件下可到达节点的数目 + BFS】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

Java面试——Redis

优质博文&#xff1a;IT-BLOG-CN 一、Redis 为什么那么快 【1】完全基于内存&#xff0c;绝大部分请求是纯粹的内存操作&#xff0c;非常快速。数据存在内存中。 【2】数据结构简单&#xff0c;对数据操作也简单&#xff0c;Redis中的数据结构是专门进行设计的。 【3】采用单线…

(C语言)回调函数

回调函数是什么&#xff1f; 回调函数就是⼀个通过函数指针调⽤的函数。 如果你把函数的指针&#xff08;地址&#xff09;作为参数传递给另⼀个函数&#xff0c;当这个指针被⽤来调⽤其所指向的函数 时&#xff0c;被调⽤的函数就是回调函数。回调函数不是由该函数的实现⽅…

python 基础知识点(蓝桥杯python科目个人复习计划56)

今日复习内容&#xff1a;做题 例题1&#xff1a;最小的或运算 问题描述&#xff1a;给定整数a,b&#xff0c;求最小的整数x&#xff0c;满足a|x b|x&#xff0c;其中|表示或运算。 输入格式&#xff1a; 第一行包括两个正整数a&#xff0c;b&#xff1b; 输出格式&#…

【【C语言简单小题学习-1】】

实现九九乘法表 // 输出乘法口诀表 int main() {int i 0;int j 0;for (i 1; i < 9; i){for (j 1; j < i;j)printf("%d*%d%d ", i , j, i*j);printf("\n"); }return 0; }猜数字的游戏设计 #define _CRT_SECURE_NO_WARNINGS 1 #include<stdi…

一周学会Django5 Python Web开发-Django5详细视图DetailView

锋哥原创的Python Web开发 Django5视频教程&#xff1a; 2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~共计28条视频&#xff0c;包括&#xff1a;2024版 Django5 Python we…

【python报错】Intel MKL FATAL ERROR: Cannot load mkl/../../../libmkl_rt.so.2.

python报错&#xff1a; Intel MKL FATAL ERROR: Cannot load mkl/../../../libmkl_rt.so.2.在切换旧版numpy版本的时候&#xff0c;出现了这个报错&#xff0c;表现就是将numpy切换到<1.24的版本的时候&#xff0c;只要import numpy就弹出以上报错。 尝试了网上的各种方法…