寒假漫游记之CSS

news2024/11/15 23:27:49

一,CSS

1.CSS语法规范

CSS规则由两个主要的部分构成:选择器及一条或多条声明

(选择器是用于指定CSS样式的HTML标签)

注:CSS是写在<style></style>里 (style在<head></head>),具体可以书写为:

<head>

        <style>

                //选择器 {属性:值;属性:值(如果是字体大小要在数字后边写上px)}

                p {color: red;

                        font-size: 12px;}//多个“键值对”之间用;表示

        </style>

</head>

<boby>

        <p>寒假不想学习</p>

</boby>

2.CSS代码风格

(更加符合实际开发方式)

2.1样式格式书写(一般分开写)

2.2样式大小写风格(一般使用小写好看)

2.3样式空格风格

2.3.1在属性加:后空一格加具体的值

        eg:color: red;

2.3.2在选择器与大括号之间也要加空格

        eg:h1 { }

3.CSS基础选择器

3.1选择器(选择符)的作用:

        根据不同的需求把不同的标签选出来(选择标签用的)

3.2选择器分类:

        基础选择器复合选择器

    3.2.1基础选择器

        由单个的选择器组成的,包括标签选择器类选择器id选择器通配符选择器.

        

        标签选择器:

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

                作用:可以把某一类标签全部选择出来,比如全部的<div>标签,但是不能只改标签具体的某一行。

        

        类选择器:

        可以选择一个或某几个标签改颜色,注意前后都要有改变。

        而且<style>标签里是要先写.(点)再写类名       

        注:1.类名是可以随便起的,但是不可以与标签名一样

                2.类名是词组或比较长时,可以加中横线

                3.类名不可以是纯数字或中文,最好是英文字母

        口诀:样式点定义,结构类调用

                   一个或多个,开发最常用

           
       补:1.(多类名的使用):

        

        2.(使用场景) :

                可以把公共部分写到Box里,在下边调用的时候写box red。

                

         id选择器:

        HTML元素以id属性来设置id选择器,CSS中id选择器以“#”来定义

        注:id属性只能在每个HTML文档中出现一次。

        口诀:样式#定义,结构id调用

                   只能调用一次,别人切勿使用     

        通配符选择器:

        注:不需要调用,而且是选择了所有的标签。

        

    3.2.2复合选择器

4.CSS字体属性

CSS Fonts(字体)属性用于定义字体系列、大小、粗细和文字样式(如斜体)。

4.1字体系列(font-family)

写很多字体的情况下,系统会从第一个开始检测浏览器中是否有该字体,没有的话会继续往后检测,如果都没有,那就使用系统默认的字体。

字体之间要用“,”隔开,如果是多个单词组成的字体那就加个引号

4.2字体大小(font-size)

标题标签比较特殊,需要单独指定文字大小;

注:在数值后面要加上px;

4.3字体粗细(font-weight)

可以是normal(400)、bold(700)、lighter等,也可以直接写数字(100-900),这里不用带后缀

注如果只是将标题变大而不加粗的话,可以直接写

h2{

        font-weight: 400;//font-weight: normal;

}

4.4文字样式 (font-style)

分为normal(默认值)和italic(斜体)

可以将斜体文字(em/i)不倾斜

4.5字体复合属性

注意:顺序不能错(font: font-style font-weight font-size/line-height(行高) font-family;)

中间有空格。font-size和font-family不能省略,否则不能表现font属性。

5.CSS文本属性

CSS Text属性可以定义文本的外观,比如文本颜色、对齐文本、装饰文本、文本缩进、行间距等

5.1文本颜色(color)

div{

        color: red;

}

5.2对齐文本(text-align)

text-align属性用于设置元素内文本内容的水平对齐方式。

h1{

        text-align: center;

}

(本质是让h1中的文字在h1盒子里居中)

5.3装饰文本(text-decoration)

可以给文本增加下划线、删除线和上划线等。

div{

       text-decoration: underline;

}

取消链接的下划线:

<style>

        a {

        text-decoration: none;        

}

</style>

<body>

        <a herf ="#">前端</a>

</body>

5.4文本缩进(text-indent)

text-indent用来指定文本的第一行的缩进,通常是将段落的首行缩进。

p{

        text-indent: 2em;(em是一个相对单位,相当于是当前元素一个文字的大小,文字默认是16px,如果当前元素没有设置大小,那么将会是父元素的一个文字大小。)

}

5.5行间距(line-height)

line-height用于控制当前文字行与行之间的距离。

行高改变,只是上下间距改变,文本大小(font-size)是不会变的 .

6.CSS的引入方式

CSS的三种样式表:行内样式表、内部样式表和外部样式表。

6.1行内样式表(行内式)

是在元素标签内部的style属性中设定css样式,适合于修改简单样式。(行内式引入)

 

行内式引入特点:

style是标签的属性

2°要符合CSS规范,必须写双引号

3°可以控制当前的标签设置样式。

4°书写繁琐且不体现样式结构相分离,只有在对当前元素适当修改时使用。 

6.2内部样式表(嵌入式)

把所有的CSS代码抽出来,单独放到style标签中

嵌入式特点:

<style>标签理论上可以放在HTML文档的任何地方,但是一般会放在<head>标签中

可以方便控制整个页面的元素样式设置

代码结构清晰,但仍在HTML中未实现结构与样式完全分离。 

6.3外部样式表(链接式)

样式单独写到CSS文件中,把CSS文件引入到HTML页面中。

CSS文件中只有样式没有标签。 

 

 

在<head>标签中,直接link+Tab,然后判断css文件是否与该HTML文件为同一级。

补:忘了同一级,上一级,下一级该怎么写。。。 

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

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

相关文章

进程状态 | 僵尸进程 | 孤儿进程 | 前台后台进程 | 守护进程

文章目录 1.进程的三种基本状态2.Linux中进程状态查看2.1.进程检测脚本2.2.各种状态查看 3.孤儿进程4.前台、后台、守护进程 1.进程的三种基本状态 进程的在系统当中是走走停停的&#xff0c;「运行 - 暂停 - 运行」的活动规律&#xff1b;进程在活动期间的三种状态&#xff1…

《计算机网络简易速速上手小册》第7章:云计算与网络服务(2024 最新版)

文章目录 7.1 云服务模型&#xff08;IaaS, PaaS, SaaS&#xff09;- 你的技术魔法盒7.1.1 基础知识7.1.2 重点案例&#xff1a;构建和部署 Python Web 应用实现步骤具体操作步骤1&#xff1a;创建 Flask Web 应用步骤2&#xff1a;准备应用部署 7.1.3 拓展案例1&#xff1a;使…

transformer剪枝论文汇总

文章目录 NN Pruning摘要实验 大模型剪枝LLM-PrunerSparseGPT LTPVTPWidth & Depth PruningPatch SlimmingDynamicViTSPViTDynamicBERTViT SlimmingFastFormersNViTUVCPost-training pruning NN Pruning 《Block Pruning For Faster Transformers》 《为更快的transformer…

MPC |模型预测控制的一些基本概念

模型预测控制就是在每个采样点处&#xff0c;根据被控对象的状态和预测模型&#xff0c;预测系统在未来一段时间内的状态&#xff0c;依据某一性能指标&#xff08;成本函数&#xff09;来求解最优的一组控制序列&#xff0c;并将这组控制序列的第一个控制作用作为输出给执行机…

【数据库】Unlogged 表使用

【数据库】Unlogged 表使用 前言普通表和Unlogged 表的写性能比较普通表创建和数据插入Unlogged 表创建和数据插入比较结果 Unlogged 表崩溃和正常关闭测试Unlogged 表特点总结 前言 大神偶像在开会上提及了Unlogged 表&#xff0c;它的特点很不错&#xff0c;很适合实时数据保…

顺序表、链表相关OJ题(2)

创作不易&#xff0c;友友们给个三连吧&#xff01;&#xff01; 一、旋转数组&#xff08;力扣&#xff09; 经典算法OJ题&#xff1a;旋转数组 思路1&#xff1a;每次挪动1位&#xff0c;右旋k次 时间复杂度&#xff1a;o(N^2) 右旋最好情况&#xff1a;k是n的倍数…

寒假作业5

TCP 1&#xff1a;提供面向连接的&#xff0c;可靠的数据传输服务 2&#xff1a;传输过程中&#xff0c;数据无误、数据无丢失、数据无失序、数据无重复 3&#xff1a;数据传输效率低&#xff0c;耗费资源多 4&#xff1a;数据收发是不同步的 5&#xff1a;TCP的使用场景&#…

Mysql大表添加字段失败解决方案

背景 最近遇到一个问题&#xff0c;需要在user用户表千万级别数据中添加两个字段&#xff0c;发现老是加不上去&#xff0c;一直卡死。表数据量不仅大&#xff0c;而且是一个热点表&#xff0c;访问频率特别高&#xff0c;而且该表的访问是在一个大事务中。加字段的时候一直在…

基于SpringBoot的美妆管理系统

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

手撕spring bean的加载过程

这里我们采用手撕源码的方式&#xff0c;开始探索spring boot源码中最有意思的部分-bean的生命周期&#xff0c;也可以通过其中的原理理解很多面试以及工作中偶发遇到的问题。 springboot基于约定大于配置的思想对spring进行优化&#xff0c;使得这个框架变得更加轻量化&#…

【从Python基础到深度学习】1. 安装Python PyCharm

前言&#xff1a; 为了帮助大家快速入门机器学习-深度学习&#xff0c;从今天起我将用100天的时间将大学本科期间的所学所想分享给大家&#xff0c;和大家共同进步。【从Python基础到深度学习】系列博客中我将从python基础开始通过知识和代码实践结合的方式进行知识的分享和记…

Apollo分布式配置中心

携程框架部门研发的开源配置管理中心&#xff0c;能够集中化管理应用不同环境、不同集群的配置&#xff0c;配置修改后能够实时推送到应用端 用户在配置中心对配置进行修改并发布配置中心通知Apollo客户端有配置更新Apollo客户端从配置中心拉取最新的配置、更新本地配置并通知…

网络安全挑战:威胁建模的应对策略与实践

在数字威胁不断演变的时代&#xff0c;了解和降低网络安全风险对各种规模的组织都至关重要。威胁建模作为安全领域的一个关键流程&#xff0c;提供了一种识别、评估和应对潜在安全威胁的结构化方法。本文将深入探讨威胁建模的复杂性&#xff0c;探索其机制、方法、实际应用、优…

基于高通滤波器的ECG信号滤波及心率统计matlab仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 ECG信号简介 4.2 高通滤波器原理 4.3 心率统计 5.完整工程文件 1.课题概述 通过高通滤波器对ECG信号进行滤波&#xff0c;然后再统计其心率。 2.系统仿真结果 3.核心程序与模型 版本&#xff1a…

Arm发布新的人工智能Cortex-M处理器

Arm发布了一款新的Cortex-M处理器&#xff0c;旨在为资源受限的物联网&#xff08;IoT&#xff09;设备提供先进的人工智能功能。这款新的Cortex-M52声称是最小的、面积和成本效率最高的处理器&#xff0c;采用了Arm Helium技术&#xff0c;使开发者能够在单一工具链上使用简化…

巴尔加瓦算法图解:算法运用。

树 如果能将用户名插入到数组的正确位置就好了&#xff0c;这样就无需在插入后再排序。为此&#xff0c;有人设计了一种名为二叉查找树(binary search tree)的数据结构。 每个node的children 都不大于两个。对于其中的每个节点&#xff0c;左子节点的值都比它小&#xff0c;…

ChatGPT高效提问—prompt常见用法

ChatGPT高效提问—prompt常见用法 1.1 角色扮演 ​ prompt最为常见的用法是ChatGPT进行角色扮演。通常我们在和ChatGPT对话时&#xff0c;最常用的方式是一问一答&#xff0c;把ChatGPT当作一个单纯的“陪聊者”。而当我们通过prompt为ChatGPT赋予角色属性后&#xff0c;即使…

debian12 - openssh-9.6.P1的编译安装

文章目录 debian12 - openssh-9.6.P1的编译安装概述笔记备注END debian12 - openssh-9.6.P1的编译安装 概述 在debian12上, 源码编译安装了openssl3.2 导致ssh失败. lostspeeddebian12d4x64:~$ openssl version OpenSSL 3.2.0 23 Nov 2023 (Library: OpenSSL 3.2.0 23 Nov 2…

ywtool inspect命令

一.巡检介绍 日巡检是通过定时任务每天凌晨2点30进行巡检周巡检时通过定时任务每周日的凌晨3点进行巡检日巡检日志文件路径:/usr/local/ywtools/log/daily,每周日凌晨2点会将这一周的日巡检日志进行压缩,压缩路径:/usr/local/ywtools/log/backup/daily周巡检日志文件路径:/usr…

Docker-Learn(一)使用Dockerfile创建Docker镜像

1.创建并运行容器 编写Dockerfile&#xff0c;文件名字就是为Dockerfile 在自己的工作工作空间当中新建文件&#xff0c;名字为Docerfile vim Dockerfile写入以下内容&#xff1a; # 使用一个基础镜像 FROM ubuntu:latest # 设置工作目录 WORKDIR /app # 复制当前目…