寒假漫游记之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文件为同一级。

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

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

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

相关文章

STM32——LCD(1)认识

目录 一、初识LCD 1. LCD介绍 2. 显示器的分类 3. 像素 4. LED和OLED显示器 5. 显示器的基本参数 &#xff08;1&#xff09;像素 &#xff08;2&#xff09;分辨率 &#xff08;3&#xff09;色彩深度 &#xff08;4&#xff09;显示器尺寸 &#xff08;5&#xff…

【漏洞复现】多语言药房管理系统MPMS文件上传漏洞

Nx01 产品简介 多语言药房管理系统 (MPMS) 是用 PHP 和 MySQL 开发的, 该软件的主要目的是在药房和客户之间提供一套接口&#xff0c;客户是该软件的主要用户。该软件有助于为药房业务创建一个综合数据库&#xff0c;并根据到期、产品等各种参数提供各种报告。 Nx02 漏洞描述 …

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

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

DevOps落地笔记-20|软件质量:决定系统成功的关键

上一课时介绍通过提高工程效率来提高价值交付效率&#xff0c;从而提高企业对市场的响应速度。在提高响应速度的同时&#xff0c;也不能降低软件的质量&#xff0c;这就是所谓的“保质保量”。具备高质量软件&#xff0c;高效率的企业走得更快更远。相反&#xff0c;低劣的软件…

Java面向对象 封装

目录 封装的概念“高内聚&#xff0c;低耦合”封装的好处实例案例测试 封装的概念 封装是把过程和数据包围起来&#xff0c;对数据的访问只能通过已定义的接口。面向对象计算始于这个基本概念&#xff0c;即现实世界可以被描绘成一系列完全自治、封装的对象&#xff0c;这些对…

2021年通信工程师初级 实务 真题

文章目录 一、第1章 现代通信网概述&#xff0c;通信网的定义。第10章 通信业务&#xff0c;普遍服务原则10.2.4 通信行业的发展趋势&#xff08;六化&#xff09; 二、第2章 传输网SDH帧结构SDH线路保护倒换&#xff0c;“11 保护”和“1:1保护”波长值λc/f&#xff0c;中心频…

FlinkSql通用调优策略

历史文章迁移&#xff0c;稍后整理 使用DataGenerator 提前进行压测&#xff0c;了解数据的处理瓶颈、性能测试和消费能力 开启minibatch&#xff1a;"table.exec.mini-batch.enabled", "true" 开启LocalGlobal 两阶段聚合&#xff1a;"table.exec.m…

GEE入门篇|栅格数据集概述(四):其他卫星产品

目录 1.甲烷数据集 2.天气及气候数据 3.预先分类的土地用途和土地覆盖数据集 3.1ESA WorldCover 3.2 全球森林变化数据集 卫星还可以收集有关气候、天气和大气中存在的各种化合物的信息。这些卫星利用部分电磁频谱&#xff0c;以及不同物体和化合物在不同波长的阳光照射下…

CUDA简介

CPUGPU异构计算 GPU计算并不是指单独的GPU计算&#xff0c;而是指CPUGPU的异构计算。一块单独的GPU是无法独立的完成所有计算任务的&#xff0c;它必须在CPU的调度下才能完成特定的任务。CPU更适合进行逻辑复杂低并行的程序&#xff0c;GPU更适合逻辑简单高并行的任务。这主要…

101. 对称二叉树 - 力扣(LeetCode)

题目描述 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 题目示例 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true 解题思路 首先想清楚&#xff0c;判断对称二叉树要比较的是哪两个节点&#xff0c;要比较的可不是左右节点&#xff01; 对于…

Github进不去的解决方法

方案一: 很多人想进入GIthub却总是出现下面的情况,一直转圈圈 这是因为中国大陆是没有Github的服务器的,需要跳到国外的服务器,这个时候需要加速器,或者是选择路劲最佳的路由,这里我介绍一款软件Watt Toolkit 在你们的微软商城里面就可以找到,这个是免费的推荐使用一下 一键加速…

NC6X单点登录设计文档说明

前言 因为业务场景需要&#xff0c;第三方系统有些工作需要经常到NC系统里做&#xff0c;如果每次去NC系统做业务单据&#xff0c;都需要反复登录&#xff0c;导致客户使用体验不是很好&#xff0c;所以需要开发实现从第三方系统单点登录到NC系统&#xff0c;提高客户满意度。 …

【c语言】深入理解指针(2)

1. 字符指针变量 可以利用字符指针存放字符数组来间接存放字符串。 int main() {char arr[10] "abcdef";char* p arr;printf("p %s\n", p);return 0; } 那我们可不可以直接给字符指针存放字符串呢&#xff1f; int main() {char* p1 "abcde…

【C#】.net core 6.0 创建默认Web应用,以及默认结构讲解,适合初学者

欢迎来到《小5讲堂》 大家好&#xff0c;我是全栈小5。 这是《C#》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对知识点的理解和掌握。…

Octave实现位置式PID算法

由于Matlab不让用&#xff0c;只能“你不让爷用&#xff0c;爷就用别的”&#xff0c;选择开源的Octave以及scilab进行相关领域的学习。Octave的代码和Matlab几乎是100%相同的&#xff0c;只有一些专用的包的函数&#xff0c;可能有些还没来得及写&#xff0c;或者有些差异。但…

计算机网络概念、组成、功能和分类

文章目录 概要1.怎么学习计算机网络2.概念3.功能、组成4.工作方式、功能组成5.分类 概要 概念、组成、功能和分类 1.怎么学习计算机网络 2.概念 通信设备&#xff1a;比如路由器、路由器 线路&#xff1a;将系统和通信设备两者联系的介质之类的 计算机网络是互连的、自治的的计…

如何用DT浏览器建立视频播放系统

在DT浏览器官方网站下载最新版软件&#xff0c;安装&#xff0c;在DT浏览器首页点视频直播&#xff0c;软件会自动检测手机相册里的视频并且显示出来&#xff0c;选择需要播放的视频在直播间里播放。如果要建立节目单&#xff0c;需要在服务器上把播放顺序&#xff0c;视频名称…

一起玩儿物联网人工智能小车(ESP32)——57. SPI总线协议初探(一)

摘要&#xff1a;介绍SPI总线的基本知识 前面已经学习过IIC总线协议&#xff0c;今天开始介绍另一个总线协议——SPI。SPI&#xff08;Serial Peripheral Interface&#xff0c;串行外设接口&#xff09;是由Motorola提出的一种高速、全双工、同步的通信总线。并且在芯片的管脚…

Oracle 面试题 | 17.精选Oracle高频面试题

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

(每日持续更新)jdk api之ObjectInputFilter.Status基础、应用、实战

博主18年的互联网软件开发经验&#xff0c;从一名程序员小白逐步成为了一名架构师&#xff0c;我想通过平台将经验分享给大家&#xff0c;因此博主每天会在各个大牛网站点赞量超高的博客等寻找该技术栈的资料结合自己的经验&#xff0c;晚上进行用心精简、整理、总结、定稿&…