CSS

最新推荐文章于 2024-07-24 11:39:30 发布
最新推荐文章于 2024-07-24 11:39:30 发布
阅读量176 收藏 2
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51774063/article/details/115031877
版权

html只是搭建初步的结构，css的作用就是美化外观，使得结构和样式分离，各司其职。

CSS目录

一、CSS样式的三种方法

1.行内式（内联样式）

<div style="color: red; font-size: 12px;">基础使用</div>

style其实就是标签的属性，可以通过它来设置标签的样式。

2.内部样式表（内嵌样式表）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            height: 70px;
            width: 600px;
            text-align: center;
            border: black 1px solid;
        }

        td,
        th {
            border-collapse: collapse;
            border: black 1px solid;
        }

        th {
            height: 40px;
        }
    </style>
</head>

将CSS代码集中书写到头部head标签里面使用style标签定义。

3.外部样式表（外链式）

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。
其中外联是使用频率最高的方法。

二、CSS基础选择器

css即使用选择器后对对应html页面元素做出样式的改变，分为基础选择器和复合选择器

1.标签选择器

HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

<style>
        div {
            属性: 属性值;
        }
</style>

2.类选择器

类选择器使用.（英文点号）进行标识，后面紧跟类名。
且单个标签可以指定多个类名，空格隔开即可。

<style>
        .contianr {
            属性: 属性值;
        }
</style>

3.id选择器

id选择器使用#（英文点号）进行标识，后面紧跟ID名。
元素的id值是唯一的，只能对应于文档中某一个具体的元素

<style>
        #newId {
            属性: 属性值;
        }
</style>

4.通配符选择器

配符选择器用*号表示， * 就是 选择所有的标签 他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

<style>
       * {
            属性: 属性值;
        }
</style>

三、复合选择器

1、后代选择器

父子之间空格符号隔开，选择的是父级中所有的子级元素。

<style>
	父级 子级 {  
    	font-size:20px; 
	}
</style>

2、子元素选择器

父子之间>符号隔开，选择的是父级中最近一级的子级元素。

<style>
	<style>
	父级>子级 {  
    	font-size:20px; 
	}
</style>
</style>

3、交集选择器

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

<style>
	标签.标签 {  
    	font-size:20px; 
	}
</style>

4、并集选择器

并集选择器（CSS选择器分组）是各个选择器通过,符号连接而成的，通常用于集体声明。

<style>
	标签，
	h4，
	.class,
	#id {  
    	font-size:20px; 
	}
</style>

5、链接伪类选择器

向某些选择器添加特殊的效果，比如给链接添加特殊效果

<style>
	a:hover {  
    	color:green
	}
</style>
属性描述
a:link未访问的链接
a:visited已访问的链接
a:hover鼠标移动到链接上
a:active选定的链接

四、font字体样式

1、font-size（字体大小）

<style>
	标签 {  
    	font-size:20px; 
	}
</style>

常用的单位有px和em。

2、font-family（字体样式）

<style>
	标签 {  
		font-family: Arial,"Microsoft Yahei", "微软雅黑";
    	font-family:"微软雅黑";
	}
</style>

常用的字体有宋体和微软雅黑

3、font-weight（字体粗细）

<style>
	标签 {  
		font-weight: normal/bold/数字;
	}
</style>
属性值描述
normal默认值（不加粗的）
bold定义粗体（加粗的）
100~900400 等同于 normal，而 700 等同于 bold

4、font-style（字体风格）

<style>
	标签 {  
		font-style: normal/italic;
	}
</style>
属性作用
normal默认值，浏览器会显示标准的字体样式 font-style: normal;
italic浏览器会显示斜体的字体样式。

5、font（复合属性）

<style>
	标签 {  
		font: font-style  font-weight  font-size/line-height  font-family;
	}
</style>
属性表示注意点
font-size字号通常用的单位是px 像素，要跟上单位
font-family字体实际中按照约定来写字体
font-weight字体粗细加粗是 700 或者 bold 不加粗 是 normal 或者 400
font-style字体样式倾斜是 italic 不倾斜 是 normal 最常用 normal
font字体连写1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现

五、CSS基础外观属性

1.color（文本颜色）

常用属性有十六进制和预定义的颜色如：#FFFF yellow

表示表示属性值
预定义的颜色值red，green，blue，还有我们的御用色 pink
十六进制#FF0000，#FF6600，#29D794
RGB代码rgb(255,0,0)或rgb(100%,0%,0%)

2.text-align（文本水平对齐方式）

常用属性有center 进行文本居中对齐

属性解释
left左对齐（默认值）
right右对齐
center居中对齐

3.line-height（行间距）

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。

<style>
	标签 {  
		line-height: 盒子大小;
	}
</style>

行高和盒子大小高度设置一样可以实现垂直居中的效果

4.text-indent（首行缩进）

text-indent属性用于设置首行文本的缩进，

<style>
	p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
 }
</style>

5.text-decoration（文本的装饰）

常用来取消a标签的下划线。

值描述
none默认。定义标准的文本。 取消下划线（最常用）
underline定义文本下的一条线。下划线 也是我们链接自带的（常用）
overline定义文本上的一条线。（不用）
line-through定义穿过文本下的一条线。（不常用）

6.CSS外观属性总结

常用color，line-height，text-align

属性表示注意点
color颜色我们通常用 十六进制 比如 而且是简写形式 #fff
line-height行高控制行与行之间的距离
text-align水平对齐可以设定文字水平的对齐方式
text-indent首行缩进通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration文本修饰记住 添加 下划线 underline 取消下划线 none

六、标签显示模式（display）

display的三种转换模式方法。

<style>
	.class {
		display:block;
		display:inline;
		display:inline-block
	}
</style>

三种模式的区别：

元素模式元素排列设置宽高默认宽度包含
块级元素独占一行√容器的100%容器级可以包含任何标签
行内元素一行多个×它本身内容的宽度容纳文本或则其他行内元素
行内块元素一行多个√它本身内容的宽度

七、CSS 背景(background)

1.背景颜色（color）

background-color:颜色值; 默认的值是 transparent 透明的


2.背景图片（image）

<style>
	.class {
		background-image : url(images/demo.png);
	}
</style>

3.背景平铺（repeat）

<style>
	.class {
		background-repeat : repeat | no-repeat | repeat-x | repeat-y 
	}
</style>
参数作用
repeat背景图像在纵向和横向上平铺（默认的）
no-repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向平铺

4.背景位置（position）

<style>
	.class {
		background-position: x y || 方位词 方位词；
	}
</style>
参数值
length百分数 | 由浮点数字和单位标识符组成的长度值
positiontop | center | bottom | left | center | right 方位名词

5.背景附着

background-attachment : scroll | fixed

解释背景是滚动的还是固定的

参数作用
scroll背景图像是随对象内容滚动
fixed背景图像固定

6.背景复合写法

background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

<style>
	.class {
		background: transparent url(image.jpg) repeat-y  scroll center top ;
					颜色  		地址 		 是否平铺  	附着与否  图片位置
	}
</style>

背景透明写法：background: rgba(0, 0, 0, 0.3);

7.背景总结

属性作用值
background-color背景颜色预定义的颜色值/十六进制/RGB代码
background-image背景图片url(图片路径)
background-repeat是否平铺repeat/no-repeat/repeat-x/repeat-y
background-position背景位置length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
background-attachment背景固定还是滚动scroll/fixed
背景简写更简单背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
背景透明让盒子半透明background: rgba(0,0,0,0.3); 后面必须是 4个值

八、CSS 三大特性

1.层叠性

在这里插入图片描述

两个选择器设置相同的属性，后设置的属性会覆盖掉原先的属性。

2.CSS继承性

在这里插入图片描述

子标签会继承父标签的某些样式，如文本颜色和字号。
想要设置一个可继承的属性，只需将它应用于父元素即可。

3.CSS优先性（权重）

标签选择器计算权重公式
继承或者 *0,0,0,0
每个元素（标签选择器）0,0,0,1
每个类，伪类0,0,1,0
每个ID0,1,0,0
每个行内样式 style=""1,0,0,0
每个!important 重要的∞ 无穷大
  • div ul li ------> 0,0,0,3
  • .nav ul li ------> 0,0,1,2
  • a:hover -----—> 0,0,1,1
  • .nav a ------> 0,0,1,1

  • 交集选择器，后代选择器会出现权重叠加

jojo_8913
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css投影
weixin_41824429的博客
10-08 6695
css投影
CSS表格
m0_57774967的博客
04-24 5602
一、表格边框 指定css表格边框，使用border属性 下面例子指定一个表格的th和td元素的黑色边框 html代码： css代码： 浏览器呈现效果： 注意：在上面的例子中的表格有双边框，这是因为表和th/td元素有独立的边界，为了显示一个表的单个边框，使用border-collapse属性 二、折叠边框 border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开 html代码： css代码： ...
CSS 阴影效果
热门推荐
Dominic_W的博客
05-14 3万+
CSS中，通过text-shadow、box-shadow两个属性分别为文本和元素添加阴影效果。 CSS语法 box-shadow: h-shadow v-shadow blur spread color inset; 向元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。 h-shadow: 必需。水平阴影的位置，可以为负值 v-shadow:必需。垂直阴影的位置，可以为负值 blur:可选，阴影模糊的
CSS重置
02-17
CSS重置 一个微小的默认CSS重置基于： 和 安装 NPM： npm install --save-dev css-reset 纱： yarn add css-reset 手动安装 首先，让我们克隆此存储库： git clone https://github.com/mlaurel/css-reset.git ...
bootstrap.min.css
02-23
用于渲染前端静态页面
CSS Tutorial
06-20
CSS Basic CSS HOME CSS Introduction CSS Syntax CSS Id & Class CSS How To CSS Styling Styling Backgrounds Styling Text Styling Fonts Styling Links Styling Lists Styling Tables CSS Box Model CSS Box ...
bootstrap.css
01-27
bootstrap的css文件
CSS实现表格无限轮播
像鱼的博客
07-24 328
在React中，用CSS实现表格无线轮播
CSS学习笔记
ngczx的博客
07-23 671
CSS学习笔记
mpu6050陀螺仪使用方法开发教程文档.docx
07-30
mpu6050陀螺仪使用方法
【SCI顶级】龙格库塔算法RUN-CNN-LSTM-Multihead-Attention温度预测【含源码 5747期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Mutilhead-Attention回归预测
大模型的数学之魂：统计学习理论精要
07-30
大型机器学习模型，通常简称为“大模型”，是指具有数十亿甚至数千亿参数的深度神经网络模型。这些模型因为其庞大的参数量和复杂的计算结构，能够处理非常复杂的任务和数据，展现出强大的表达能力和预测性能。大模型在自然语言处理、计算机视觉、语音识别和推荐系统等多个领域都有广泛的应用。 大模型的设计目的是通过训练海量数据来学习复杂的模式和特征，从而具备强大的泛化能力，能够对未见过的数据做出准确的预测。与参数较少、层数较浅的小模型相比，大模型虽然需要更多的计算资源和时间来训练和推理，但它们展现出了一种被称为“涌现能力”的特性，即从原始训练数据中自动学习并发现新的、更高层次的特征和模式。 大模型的发展历程可以分为几个阶段，从早期的卷积神经网络模型发展到以Transformer为代表的全新神经网络模型，再到当前以GPT为代表的预训练大模型阶段。Transformer架构因其自注意力机制而成为大模型的核心技术，它使得模型能够更好地理解和处理文本数据中的长距离依赖关系。 大模型的分类主要包括语言大模型（NLP）、视觉大模型（CV）和多模态大模型。语言大模型专注于处理文本数据和理解自然语言，而视觉大模型用
唯美淡雅四页.zip
最新发布
07-30
【简历模板】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
仿真验证阵列可以提高接收信号信噪比
07-30
这是一份模拟了阵列输入信号及噪声，并验证了相对于阵列接收到的信号，阵列输出信号可以将信噪比提高M倍，其中M为阵列的阵元个数的代码。 代码中可以随意修改阵元个数、阵元间距、波束指向角度、信号频率等。 代码中关键部分均含有文字注释，完全不必担心看不懂。 无论是从仿真波形，还是计算的信噪比结果均能看出阵元数为M的阵列将信号的信噪比提高了M倍。
[毕业设计]Java驱动的C语言编程练习与考试平台(源代码+论文).zip
07-30
[毕业设计]Java驱动的C语言编程练习与考试平台(源代码+论文)
基于Qt的多线程局域网聊天系统（含客户端+服务端）.zip
07-30
毕业设计是高等教育阶段学生完成学业的一个重要环节，通常在学士或硕士学业即将结束时进行。这是学生将在整个学业中所学知识和技能应用到实际问题上的机会，旨在检验学生是否能够独立思考、解决问题，并展示其专业能力的一项综合性任务。 毕业设计的主要特点包括： 独立性： 毕业设计要求学生具备独立思考和解决问题的能力。学生需要选择一个合适的课题，研究相关文献，进行实地调查或实验，并提出独立见解。 实践性： 毕业设计是将理论知识应用到实际问题中的一次实践。通过完成毕业设计，学生能够将所学的专业知识转化为实际的解决方案，加深对专业领域的理解。 综合性： 毕业设计往往要求学生运用多个学科的知识，综合各种技能。这有助于培养学生的综合素养，提高他们的综合能力。 导师指导： 学生在毕业设计过程中通常由一名指导老师或导师团队提供指导和支持。导师负责引导学生确定研究方向、制定计划、提供建议，并在整个过程中监督进展。 学术规范： 毕业设计要求学生按照学术规范完成研究，包括文献综述、研究设计、数据采集与分析、结论和讨论等环节。学生需要撰写一篇完整的毕业论文，并进行答辩。
css
06-02
CSS（Cascading Style Sheets）是一种用于描述网页样式和排版的语言。通过 CSS，我们可以将网页内容和样式分离开来，从而使得网页的结构和样式更加清晰易于维护。 CSS 由三个部分组成： 1. 选择器（Selector）：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值