前端学习-CSS基础-Day1

一、CSS简介

1.1HTML局限性

只关注内容的语义,可以做简单的样式但是很臃肿且繁琐

1.2CSS优势

CSS层叠样式表,标记语言

设置HTML页面中的文本内容,图片外形,可以美化HTML,让页面布局更美观

HTML做框架,CSS做样式,结构与样式相分离

1.3CSS语法规范

两个部分组成:选择器和属性值

<style>p {color: red;font-size: 12px;}
</style>

选择器{

属性1:属性值1

属性2:属性值2

}

1.选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式

2.属性和属性值以“键值对”形式出现

3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等

4.属性和属性值之间用英文“:”分开

5.多个键值对之间用“;"分开 

1.4CSS代码风格

1.展开格式写

2.字母小写

3.空格规范:

1.属性值前面,冒号后面,保留一个空格

2.选择器标签和大括号中间保留空格 

二、CSS基础选择器

2.1CSS选择器的作用

<div>我是div</div>
<div>我是div</div>
<p>我是段落</p>
<ul><li>我是ul里面的li</li><li>我是ul里面的li</li>
</ul>
<ol><li>我是ol里面的li</li><li>我是ol里面的li</li>
</ol>

问题:

1.我想把div里面的文字改为红色怎么办?

2.我想把第一个div里面的文字改为红色怎么办?

3.我想把ul里面的li文字改成红色怎么办?

选择器作用:

根据不同需求把不同的标签选出来

简单来说,选对人,做对事 

2.2选择器分类

标签名作为选择器

语法

标签名{属性1:属性值1;属性2:属性值2;....
}

作用:

把某类标签全部选择出来

优点:

快速为页面中同类型标签统一设置样式

缺点:

不能设计差异化样式,只能选择全部的当前标签

能够回答1.我想把div里面的文字改为红色怎么办?问题

2.4类选择器

如果想要差异化选择不同的标签,单独选一个或某几个标签,可以定位使用类选择器

类选择器在HTML中以class属性表示,在CSS中,类选择器以一个点“.“号表

.类名{属性1:属性值1;...
}

 例如:将所有拥有red类的HTML元素均设置为红色(类似java方法调用)

.red {color: red;
}
<li class="red"></li>

注意:

1.长名称或词组可以使用中横线来为选择器命名。

2.不要使用纯数字,中文等命名,尽量使用英文字母来表示。

3.命名要有意义,尽量让别人一眼就知道这个类名的目的

 

多类名

<div class="类名1 类名2">

使用场景:

1.可以把一些标签元素相同的样式(共同的部分)放到一个类里面

2.这些标签都可以调用这个公共的类,然后再调用自己的独有的类

3.从而节省CSS代码,统一修改也非常方便 

2.5ID选择器

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

语法

#id名{属性1:属性值1;...
}

例如,将id为nav元素中的内容设置为红色

#nav{color: red;
}
<div id="nav"></div>

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

id选择器和类选择器的区别

1.类选择器像姓名,可以重名;id选择器像身份证号,不可以重复

2.类最多,id一般用于页面唯一性的元素上

 

2.6通配符选择器

表示选取页面中所有元素(标签)

* {属性1:属性值1;...
}
基础选择器作用特点用法
标签选择器可以选出所有相同的标签不能差异化选择p{ color:red;}
类选择器可以选出一个或者多个标签可以根据需求选择.nav{color:red;}
id选择器一次只能选择一个标签ID属性只能子啊每个HTML文档中出现一次#nav{color:red;}
通配符选择器选择所有的标签适用于默认初始化*{color:red;}

三、CSS字体属性

3.1字体系列

CSS使用 font-family 属性定义文本的字体系列、大小、粗细和文字样式

    <style>h2 {font-family: '微软雅黑';}p {font-family: '宋体';}</style>

 1.各种字体之间必须使用英文状态下的逗号隔开

2.一般情况下,如果有空格隔开的多个单词组成的字体,加引号

3.尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示

4.最常见的几个字体:

body{font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';
}

 

3.2字体大小

CSS使用 font-size 属性定义字体大小

属性功能
normal正常的字体,相当于数字值400
bold粗体,数字值700
bolder比继承值更重的值
lighter比继承值更轻的值
<integer>用数字表示文本字体粗细 取值范围:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

实际开发中,更提倡使用数字

p {font-weight: 700;font-weight: bold;
}

 

3.4文字样式

CSS使用font-style来设置字体风格

属性值作用
normal默认值,浏览器会显示标准的字体样式 font-style: normal;
italic浏览器会显示斜体的字体样式

3.5字体复合属性

字体属性可以把以上文字样式综合来写,这样可以更节约代码

body{font: font-style font-weight font-size/line-height font-family;倾斜、粗细、大小、字体
}

1.使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开

2.不需要设置的属性可以忽略(取默认值),但必须保留font-size和font-famliy属性,否则font属性将不起作用 

3.6字体属性小结

属性表示注意点
font-size字号单位px
font-family字体
font-weight字体粗细加粗700或bold,不加粗normal或400
font-style字体样式倾斜italic,不倾斜normal
font字体连写1.连写有顺序 2.字号和字体必须同时出现

 四、CSS文本属性

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

4.1文本颜色

div {color: red;
}
表示属性值
预定义的颜色值red,green,blue
十六进制#FF0000
RGB代码rgb(255,0,0)

4.2对齐文本

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

div{text-align: center;
}
属性值解释
left左对齐
right右对齐
center居中对齐

4.3装饰文本

text-decoration规定添加到文本的修饰,可以给文本添加下划线、删除线、上划线等

div {text-decoration: underline;
}
属性值描述
none默认。没有装饰线(取消链接的下划线)
underline下划线
overline上划线
line-through删除线

4.4文本缩进

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

div {text-indent: 10px;
}

通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值

p {text-indent: 2em;
}

 em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,会按照父元素的1个文字大小

4.5行间距

line-height用于设置行间的距离(行高),可以控制文字行与行之间的距离

p {line-height: 26px;
}

行间距:上间距+文本间距+下间距

4.6文本属性总结

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

 

五、CSS三种样式表

1.行内样式表(行内式)

2.内部样式表(嵌入式)

3.外部样式表(链接式)

5.2内部样式表

写到html页面内部,把所有的CSS代码抽取出来,单独放到一个<style>标签中

<style>
</style>

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

2.通过此种方式,可以方便控制当前整个页面中的元素样式设置

3.代码结构清晰,并没有实现结构与样式完全分离 

5.3行内样式表

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

1.style就是标签的属性

2.在双引号中间,写法要符合CSS规范

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

4.书写繁琐,没有体现结构与样式相分离 

5.4外部样式表

实际开发都是外部样式表,适合于样式比较多的情况,核心是:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用

引入外部样式表分为两步:

1.新建一个后缀名为.css的样式文件,把所有css代码都放入此文件中

2.在HTML页面中,使用<link>标签引入这个文件

<link rel="stylesheet" href="css文件路径">

rel:定义当前文档与被连接文档之间的关系,在这里要制定"stylesheet",表示被连接文档是一个样式表文件

href:定义所连接外部样式表文件的url,可以是相对路径,也可以是绝对路径


水平线标签​

<hr>

六、Chrome调试工具

1.Ctrl+滚轮调整工具大小

2.左边HTML结构,右边CSS

3.右边CSS可以改动数值和查看颜色

4.Ctrl+0复原浏览器大小

5.如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误

6.如果有样式,但是样式前面有黄色叹号提示,则样式属性书写错误

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

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

相关文章

2020-Structure Aware Negative Sampling in Knowledge Graphs

摘要 使用对比估计学习知识图中实体和关系的低维表示是一种可扩展且有效的推断连接模式的方法。对比学习方法的一个关键方面是选择产生硬负样本的腐败分布&#xff0c;这迫使嵌入模型学习判别表示并找到观察数据的关键特征。虽然早期的方法要么采用过于简单的腐败分布&#xf…

基于java+springboot+vue实现的超市管理系统(文末源码+Lw+ppt)23-354

摘 要 系统根据现有的管理模块进行开发和扩展&#xff0c;采用面向对象的开发的思想和结构化的开发方法对超市管理的现状进行系统调查。采用结构化的分析设计&#xff0c;该方法要求结合一定的图表&#xff0c;在模块化的基础上进行系统的开发工作。在设计中采用“自下而上”…

坑爹的eslint配置

标题eslint 版本不一致 导致很多问题 比如无法保存的时候校验&#xff0c;首行缩进无效等 babel-eslint这个依赖的版本不一致非常坑 vscode我这里保存下两个版本下的配置 插件eslint 自己下载 1.webpack创建的项目 eslint版本 “eslint”: “^4.19.1”, “eslint-friendly-fo…

蓝桥杯刷题8

1. 世纪末的星期 import java.util.Calendar; public class Main {public static void main(String[] args) {Calendar calendar Calendar.getInstance();for(int year 1999;year<100000;year100){calendar.set(Calendar.YEAR,year);calendar.set(Calendar.MONTH,11);cale…

小苯的回文询问(

题目 离散化存储 #include<bits/stdc.h> using namespace std; #define int long long const int N2e59; int n,q,ans[N],a[N]; map<int,int> mp; vector<pair<int,int>>qr[N]; signed main(){ios::sync_with_stdio(false),cin.tie(0),cout.tie(0);c…

前端面试拼图-数据结构与算法(二)

摘要&#xff1a;最近&#xff0c;看了下慕课2周刷完n道面试题&#xff0c;记录下... 1. 求一个二叉搜索树的第k小值 二叉树(Binary Tree) 是一棵树 每个节点最多两个子节点 树节点的数据结构{value, left?, right?} 二叉树的遍历 前序遍历&#xff1a;root→left→right 中…

C/C++ 语言中的 ​if...else if...else 语句

C/C 语言中的 ​if...else if...else 语句 1. if statement2. if...else statement3. if...else if...else statementReferences 1. if statement The syntax of the if statement is: if (condition) {// body of if statement }The code inside { } is the body of the if …

聚合支付评级较低的机构能否提升评级

聚合支付机构完成备案是合规展业的第一步&#xff0c;同时&#xff0c;一年一度评级结果对其业务开展和收单机构合作发展具有重要的作用&#xff0c;如若评级较低&#xff0c;将影响到其参与商业银行的外包业务投标&#xff0c;支付机构合作协议签署及合作事宜。 近期&#xf…

Chrome浏览器修改网页内容

方法一&#xff1a;使用开发者工具 在Chrome浏览器中打开要修改的网页。按下F12键打开开发者工具。在开发者工具窗口中&#xff0c;找到“Elements”标签页。在“Elements”标签页中&#xff0c;找到要修改的网页元素。双击要修改的网页元素&#xff0c;即可进行编辑。 方法二…

AIGC 训练场景下的存储特征研究

云布道师 引言&#xff1a;在传统块存储大行其道的时代&#xff0c;需要针对很多行业的工作负载&#xff08;Workload&#xff09;进行调研&#xff0c;包含块大小、随机读、读写比例等等。知道行业的 Workload 对于预估业务的 I/OPS、时延、吞吐等性能有很好的指导意义&#…

Cadence——生成Gerber制板文件

软件版本&#xff1a;Cadence SPB OrCAD Allegro 16.6 打开Allegro PCB Designer 选择如下选项&#x1f447; 点击 File–>Open&#xff0c;找到对应的.brd文件 电气错误的检查&#xff1a;点击 Display–>Status&#xff0c;全为绿色则没有错误 按照不同的项目来进…

自幂数之水仙花数(从0开始)

文章目录 概要整体架构流程代码实现小结 概要 水仙花数&#xff08;Narcissistic number&#xff09;也被称为超完全数字不变数&#xff08;pluperfect digital invariant, PPDI&#xff09;、自恋数、自幂数、阿姆斯壮数或阿姆斯特朗数&#xff08;Armstrong number&#xff…

基于stm32与TJC3224T124_011串口屏的PID调参器(附完整工程)

电赛在即&#xff0c;每次比赛调PID都是一件比较繁琐的事。每次都要在程序中改完再烧录到板子上&#xff0c;特别耗时。正好最近发现实验室的一块串口屏比较好玩。 于是就做了这个调PID的东西。它可以通过串口直接修改PID的值&#xff0c;从而达到快速调PID的目的。下面我将完整…

C++学习笔记(lambda函数)

C learning note 1、lambda函数的语法2、lambda函数的几种用法 1、lambda函数的语法 lambda函数的一般语法如下&#xff1a; [ capture_clause ] ( parameters ) -> return_type {function_body }capture_clause&#xff1a;需要捕获的变量&#xff0c;但要求该变量必须在…

【办公类-16-07-07】“2023下学期 中班户外游戏2(有场地和无场地版,每天不同场地)”(python 排班表系列)

作品展示 背景需求&#xff1a; 2024年2月教务组发放的是“每周五天内容相同&#xff0c;两周10天内容相同”的户外游戏安排 【办公类-16-07-05】合并版“2023下学期 大班户外游戏&#xff08;有场地和无场地版&#xff0c;两周一次&#xff09;”&#xff08;python 排班表系…

探索未来智能的奥秘

文章目录 前言 前言 随着科技的不断进步&#xff0c;人工智能(AI)已逐渐渗透到我们生活的方方面面。而在AI的众多分支中&#xff0c;大模型技术无疑是一个备受瞩目的领域。本文将带领大家走进AI大模型的世界&#xff0c;一同探索其奥秘。 AI大模型&#xff0c;顾名思义&#…

YOLOv7 | 注意力机制 | 添加ECA注意力机制

目录 原理简介 代码实现 yaml文件实现&#xff08;tips&#xff1a;可以添加不同的位置&#xff09; 检查是否添加执行成功 完整代码分享 论文创新必备&#xff08;可帮忙做实验&#xff09; 启动命令 ECA是通道注意力机制的一种实现形式&#xff0c;是基于SE的扩展。…

Data Interpreter: An LLM Agent For Data Science 论文解读

论文地址&#xff1a;https://arxiv.org/abs/2402.18679 Github&#xff1a;MetaGPT: The Multi-Agent Framework 数据解释器&#xff08;Data Interpreter&#xff09;是一个基于大型语言模型&#xff08;LLM&#xff09;的代理&#xff0c;专门为解决数据科学问题而设计。它…

互联网摸鱼日报(2024-03-21)

互联网摸鱼日报(2024-03-21) 36氪新闻 金山云Q4营收17.22亿元&#xff0c;技术创新驱动收入规模和盈利能力双增长 iOS 18是苹果AI的答卷&#xff1f;你或许并不懂手机AI 2024年&#xff0c;广告主市场预算真的继续下滑&#xff1f; 降价潮反倒劝退消费者&#xff0c;想买车…

数据丢失大救星:格式化后如何高效恢复文件

一、格式化危机&#xff1a;如何逆转数据流失 在数字时代&#xff0c;数据丢失无疑是一场灾难。当我们的电脑硬盘、手机或闪存盘不慎被格式化后&#xff0c;重要文件仿佛在一瞬间消失得无影无踪。面对这一突发状况&#xff0c;很多人会陷入迷茫和焦虑之中。那么&#xff0c;格…