寒假漫游记之CSS

一,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文件为同一级。

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java面试题:MySQL中的各种JOIN的区别

表关联是频率非常高的一种数据库操作&#xff0c;在MySQL中&#xff0c;这种JOIN操作有很多类型&#xff0c;包括内联接、左外连接、右外连接等等&#xff0c;而每种连接的含义都不一样&#xff0c;如果死记硬背&#xff0c;不仅很难记住&#xff0c;而且也容易搞混淆&#xff…

Web课程学习笔记--JavaScript的性能优化-加载和执行

JavaScript 的性能优化&#xff1a;加载和执行 概述 无论当前 JavaScript 代码是内嵌还是在外链文件中&#xff0c;页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久&#xff0c;浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出…

幻兽帕鲁服务器部署与参数修改教程(WindowsLinux)

教程合集 【阿里云部署攻略】&#xff1a;【官方指南】阿里云搭建幻兽帕鲁服务器指南汇总 【腾讯云部署教程】&#xff1a;【官方指南】腾讯云搭建幻兽帕鲁服务器指南汇总 选服务器 阿里云新用户专享优惠&#xff1a;帕鲁官方推荐配置4核16G 以及 8核32G&#xff0c;新用户…

Optimism Collective 为 Covalent Network(CQT)提供价值 20 万美元的生态系统资助

Covalent Network&#xff08;CQT&#xff09; 是 Web3 生态系统中关键的“数据可用性”层&#xff0c;在与 Optimism Collective 多年的合作中取得了骄人的成果。Covalent Network&#xff08;CQT&#xff09;对于 Optimism 跨链数据的增长产生了直接的影响&#xff0c;而这一…

OJ刷题:求俩个数组的交集(没学哈希表?快排双指针轻松搞定!)

目录 ​编辑 1.题目描述 2.C语言中的内置排序函数&#xff08;qsort&#xff09; 3.解题思路 3.1 升序 3.2双指针的移动 3.3 保证加入元素的唯一性 4.leetcode上的完整代码 完结散花 悟已往之不谏&#xff0c;知来者犹可追 …

3.2 Verilog 时延

关键词&#xff1a;时延&#xff0c; 惯性时延 连续赋值延时语句中的延时&#xff0c;用于控制任意操作数发生变化到语句左端赋予新值之间的时间延时。 时延一般是不可综合的。 寄存器的时延也是可以控制的&#xff0c;这部分在时序控制里加以说明。 连续赋值时延一般可分为…

1898_野火FreeRTOS教程阅读笔记_链表操作

1898_野火FreeRTOS教程阅读笔记_链表操作 全部学习汇总&#xff1a; g_FreeRTOS: FreeRTOS学习笔记 (gitee.com) 新的节点的插入&#xff0c;影响到的是链表中最后一个元素的后继以及当前被插入元素的前驱、后继以及归属属性。具体的操作效果为&#xff1a;新的节点更新自己的前…

深度学习中常用激活函数介绍

深度学习中常用激活函数介绍 在深度学习中&#xff0c;激活函数的作用主要是引入非线性特性&#xff0c;提高模型的表达能力。具体如下&#xff1a; 解决线性不可分问题&#xff1a;激活函数可以将输入特征的复杂度提升&#xff0c;使得神经网络能够处理非线性问题&#xff0c…

分布式系统架构介绍

1、为什么需要分布式架构&#xff1f; 增大系统容量&#xff1a;单台系统的性能瓶颈&#xff0c;多台机器才能应对大规模的应用场景&#xff0c;所以就需要我们的应用支撑平台具备分布式架构。 加强系统的可用&#xff1a;为了满足业务的SLA要求&#xff0c;需要通过分布式架构…

第62讲商品搜索动态实现以及性能优化

商品搜索后端动态获取数据 后端动态获取数据&#xff1a; /*** 商品搜索* param q* return*/GetMapping("/search")public R search(String q){List<Product> productList productService.list(new QueryWrapper<Product>().like("name", q)…

Java学习笔记2024/2/8

面向对象 //面向对象介绍 //面向: 拿、找 //对象: 能干活的东西 //面向对象编程: 拿东西过来做对应的事情 //01-如何设计对象并使用 //1.类和对象 //2.类的几个不错注意事项 1. 类和对象 1.1 类和对象的理解 客观存在的事物皆为对象 &#xff0c;所以我们也常常说万物皆对…

机器学习 | 深入集成学习的精髓及实战技巧挑战

目录 xgboost算法简介 泰坦尼克号乘客生存预测(实操) lightGBM算法简介 《绝地求生》玩家排名预测(实操) xgboost算法简介 XGBoost全名叫极端梯度提升树&#xff0c;XGBoost是集成学习方法的王牌&#xff0c;在Kaggle数据挖掘比赛中&#xff0c;大部分获胜者用了XGBoost。…

Java后端技术助力,党员学习平台更稳定

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

大模型2024规模化场景涌现,加速云计算走出第二增长曲线

导读&#xff1a;2024&#xff0c;大模型第一批规模化应用场景已出现。 如果说“百模大战”是2023年国内AI产业的关键词&#xff0c;那么2024年我们将正式迈进“应用为王”的新阶段。 不少业内观点认为&#xff0c;2024年“百模大战”将逐渐收敛甚至洗牌&#xff0c;而大模型在…

video / image上传操作-校验、截取首帧和正方形预览图等

常见video / image上传操作-校验、截取首帧和正方形预览图等。 上回搞了一个视频和图片上传和校验的需求&#xff0c;感觉学到很多&#xff0c;一些常见的函数记录如下&#xff1a; 1. 图片校验尺寸 const { maxCount 30, maxWidth, maxHeight, minHeight 200, minWidth …

Java基础知识练习题

1.对Java源文件进行编译操作的命令是&#xff08;B&#xff09; A.Java B.javac C.where is java D.javaw 2.下列命令中&#xff0c;用来运行Java程序的是&#xff08;A&#xff09;A.java B. javadoc C. jar D. javac 分析&#xff1a; 对Java源程序进行编译的命令是J…

力扣102. 二叉树的层序遍历 (复习vector和queue的常见用法

目录 题目描述 题目解析 题目答案 题目所用知识点 最后 题目描述 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术…

使用pygame生成红包封面

import pygame import sys# 初始化pygame pygame.init()# 设置红包封面尺寸 size width, height 640, 960 screen_color (255, 0, 0) # 红色背景# 创建窗口 screen pygame.display.set_mode(size) pygame.display.set_caption(红包封面)# 加载龙形图片 dragon_image pygam…

一些参数(仅供个人理解)

1.mAP&#xff1a; 数据集的平均准确率 mAP50-95&#xff1a;mAP阈值为50到mAP阈值为95&#xff0c;间隔5%,取得10个mAP值&#xff0c;然后对这十个值取平均。 目标检测评估指标mAP&#xff1a;从Precision,Recall,到AP50-95【未完待续】_map50和map50-95-CSDN博客 2.IoU&a…

JVM调优(Window下)

1、编写代码&#xff0c;像下面代码这样&#xff0c;产生OOM&#xff0c; private static final Integer K 1024;/*** 死循环&#xff0c;验证JVM调优* return*/GetMapping(value "/deadLoop")public void deadLoop(){int size K * K * 8;List<byte[]> lis…