前端开发学习笔记2 (CSS简介、CSS基础选择器、CSS字体属性、CSS文本属性和CSS引入方式)

文章目录

    • CSS简介
      • CSS基本介绍
      • CSS基本语法规范
      • CSS代码风格
    • CSS基础选择器
      • 选择器的作用和分类
      • 标签选择器
      • 类选择器
      • id选择器
      • 通配符选择器
    • CSS字体属性
      • font-family字体类型设置
      • font-size字体大小设置
      • font-weight字体粗细设置
      • font-style字体样式设置
      • font字体复合属性设置
    • CSS文本属性
      • color文本属性设置
      • text-align文本对齐设置
      • text-decoration文本装饰线设置
      • text-indent文本缩进设置
      • line-height行间距设置
    • CSS引入方式

CSS简介

CSS基本介绍

  • 基本作用:CSS主要是对网页进行布局和美化。HTML语言中只关注内容的语义,而忽略了网页的布局和外观,因此我们需要使用CSS。CSS可以设置HTML中的文本样式、图片样式、版面布局和外观显示样式。
  • 名称介绍:CSS是层叠样式表的简称,有时候也会被称为CSS样式表或级联样式表。

CSS基本语法规范

  • 基本组成:CSS规则由选择器以及一条或多条声明组成。

    • 选择器:指定需要进行CSS样式设置的HTML标签;
    • 声明:对指定的标签进行设置的样式,用一个大括号进行表示;每一条声明表示一种样式设置,多个声明之间通过英文分号进行隔开;属性和属性值之间以键值对的形式进行表示。具体表示形式为:标签名 {样式1: 样式1的属性值; 样式2: 样式2的属性值;...}
  • 写在代码中的位置:常常在网页头部尾标签</head>前写一对<style></style>标签,其中插入选择的样式。通过这样的方式,就实现了网页设计的样式和结构(写在<body>标签中)相分离。

CSS代码风格

  • 注意事项:代码风格不是强制规范,而是符合实际开发习惯的书写方式。
  • 样式格式书写:更加推荐展开格式的书写,因为更加直观。
    • 紧凑格式标签名 { 样式1: 样式1的值; 样式2: 样式2的值}
    • 展开格式
 标签名 {样式1: 样式1的值;样式2: 样式2的值;}
  • 样式大小写:推荐样式选择器、属性名和属性关键值都采用小写字母。
  • 空格规范
    • 习惯于属性值之前冒号之后保留一个空格;
    • 习惯于在选择器和大括号之间保留一个空格;

CSS基础选择器

选择器的作用和分类

  • 选择器的作用:根据不同的需求将需要进行样式设置的标签选择出来。
  • 选择器的分类:可以分为基础选择器和复合选择器两类。
  • 基础选择器
    • 基本组成:由单个选择器组成。
    • 包含范围:标签选择器、类选择器、id选择器和通配符选择器。

标签选择器

  • 基本概念:用HTML标签名称作为选择器,按照标签名称分类,为页面中某一类标签指定统一的CSS样式。
    • 基本语法标签名 {属性1: 属性值1; 属性2: 属性值2}
    • 选择器优点:能够为页面中同类型的标签统一设置样式。
    • 选择器缺点:不能对同一标签进行差异性设置。

类选择器

  • 基本作用:可以实现差异化选择,单独选择一个或某几个标签。
  • 使用语法:首先,创建一个样式类,语法为 .类名{属性1: 属性值1; 属性2:属性值2};接着,所有需要设置为该类别样式的标签,只需要将自己的类的class属性的值设置为该类的类名即可。
  • 选择器优点:实际开发过程中使用最多的选择器,可以通过定义一个类,多次进行使用,非常方便。
  • 注意事项:命名要有意义,不要随便起名;不要使用纯数字和中文进行命名,尽量使用英文进行表示。
  • 多类名使用方式
    • 基本作用:可以为一个标签指定多个类名,从而达到更多的选择目的。这些类名都可以选出这个标签。
    • 注意事项:为一个标签设置多个类名时,多个类名之间需要用空格进行分隔。具体表示为:class="类别1 类别2"

id选择器

  • 基本作用:可以为标有特定id的HTML元素指定特定的样式。
  • 使用语法:首先,创建一个样式,语法为:#id名称 {属性1: 属性值1; 属性2: 属性值2},然后将需要进行样式设置的标签的id属性的值设置为定义好的id名称即可。
  • 和类选择器的区别:id选择器只能被代码中一个标签调用,如果有一个标签已经调用了,则其他标签无权调用。可以理解为,id是每一个标签唯一的,不得重复。

通配符选择器

  • 基本作用:选择页面中的所有元素;
  • 使用语法:以星号创建一个样式,具体的语法为:* {属性1: 属性值1; 属性2: 属性值2}
  • 注意事项:通配符选择器不需要进行调用,自动给所有元素使用样式。

CSS字体属性

font-family字体类型设置

  • 属性作用:设置文本的字体类型;
  • 常用属性值:“Microsoft Yahei” “Arial” "tahoma,arial"等。
  • 设置多个字体:样式中也可以同时设置多种字体,表示如果用户电脑未安装第一种字体,则会执行第二个字体,以此类推。需要注意的是,各个字体之间以英文逗号进行分隔。
  • 注意事项:谷歌浏览器的默认字体是微软雅黑。
  • 常用形式:使用标签选择器给<body>标签中的所有文本内容设置字体类型。

font-size字体大小设置

  • 属性作用:设置文本的字体大小;
  • 属性值:一个数字加上"px"构成,其中px即像素,是网页中最常用的大小单位。对于谷歌浏览器,默认的文字大小是16像素。
  • 注意事项:对于不同的浏览器默认的字体大小可能不一致,因此推荐给出一个明确的字体大小而不是直接采用默认字体大小。
  • 常用形式:使用标签选择器给<body>标签中的所有文本内容设置字体大小。

font-weight字体粗细设置

  • 属性作用:设置字体的粗细;
  • 可选属性值normal表示正常字体,bold表示粗体,bolder表示特粗体,lighter表示细体。另外,还可以使用整数表示具体的粗细(实际开发过程中更加提倡),例如bold对应的数字是700

font-style字体样式设置

  • 属性作用:定义字体显示的风格,主要是斜体和非斜体。
  • 属性值:默认值为normal,表示标准的字体样式;italic表示斜体样式。
  • 使用场景:一般情况下很少给文字加斜体,但是常常用该属性让斜体标签变为不倾斜的字体。

font字体复合属性设置

  • 属性作用:同时设置字体的多个属性,节约代码空间。
  • 使用语法font: font-style属性值 font-weight属性值 font-size属性值 font-family属性值;
  • 注意事项
    • 上面四个属性值之间的顺序不能颠倒,属性值之间以空格进行分隔。
    • 不想设置的属性值可以省略(此时会自动取默认值),但是必须保留font-sizefont-family两个属性的属性值。

CSS文本属性

color文本属性设置

  • 属性作用:用于设置文本的颜色;
  • 属性值
    • 预设值:例如redgreenbluepink等。
    • 十六进制:例如#FF0000等,需要注意的是十六进制要用#开头。实际开发过程中这是最常用的使用方式。
    • RGB代码:例如rgb(255,0,0)等。

text-align文本对齐设置

  • 属性作用:用于设置文本的水平对齐方式(即左对齐、居中对齐和右对齐);
  • 属性值left是左对齐,right是右对齐,center是居中对齐。其中左对齐是默认值。

text-decoration文本装饰线设置

  • 属性作用:用于设置文本的装饰线,包括下划线、删除线和上划线等。
  • 属性值none表示无装饰,为默认值;underline表示下划线,是一个常用的线形(超链接自带下划线);overline表示上划线(很少使用);line-through表示删除线(几乎不用)。

text-indent文本缩进设置

  • 属性作用:设置指定区域文本的第一行的缩进方式,通常是将段落的首行进行缩进。
  • 属性值
    • 以像素为单位:一个整数加上"px"结尾,表示缩进多少个像素值。也可以设置为一个负数,只是这种情况很少用。
    • 以相对文字大小为单位:以当前元素中的字体大小作为一个单位,用一个整数加上"em"结尾,表示用指定个单位的距离作为缩进距离。如果当前元素没有设置字体大小,则会采用父元素中的字体大小。

line-height行间距设置

  • 属性作用:设置某一区域中我呢本的行间距,即相邻行之间的距离。
  • 属性值:用像素值进行表示,仍然采用整数值+"px"的方式。
  • 注意事项:修改行间距不会修改文本本身的高度。

CSS引入方式

  • CSS样式表的分类:按照CSS样式书写的位置(也被称为引入的方式),CSS样式表可以分为内部样式表(嵌入式)、行内样式表(简称行内式)和外部样式表(链接式)三类。
    • 内部样式表
      • 使用方法:将CSS部分的代码写在HTML页面的内部,即将所有的CSS代码抽取出来,单独放到一个<style>标签中。
      • 注意事项<style>标签理论上可以放在HTML文档中的任何位置,但是一般会放在<head>标签中。
      • 控制范围:可以方便地控制整个网页页面中的元素样式。
      • 优点缺点:代码结构非常清晰,但是没有实现结构和样式完全分离。
    • 行内样式表
      • 使用方法:直接在元素标签内部设置style属性的值为指定的CSS样式,例如<div style="color: red; font-size: 12px;">
      • 适用情况:该类型的样式表适用于修改简单样式。
    • 外部样式表
      • 类型地位:在实际开发过程中采用的都是外部样式表,也是推荐使用的方式。
      • 适用场景:适用于样式非常多的情况。
      • 核心内容:将样式单独写入到一个CSS文件中,之后把CSS文件引入到HTML页面中进行使用。
      • 使用方法:首先,新建一个后缀名为.css的文件,然后再在里面写入CSS代码(写代码的方式和其他两种样式表相同);接着,在HTML界面中,使用<link>标签引入这个文件,使用语法为<link rel="stylesheet" href="CSS文件路径">

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

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

相关文章

Dimitra:基于区块链、AI 等前沿技术重塑传统农业

根据 2023 年联合国粮食及农业组织&#xff08;FAO&#xff09;、国际农业发展基金&#xff08;IFAD&#xff09;等组织联合发布的《世界粮食安全和营养状况》报告显示&#xff0c;目前全球约有 7.35 亿饥饿人口&#xff0c;远高于 2019 年的 6.13 亿&#xff0c;这意味着农业仍…

为什么跟着高手还是亏损?fpmarkets10秒解答

各位投资者&#xff0c;不知道你们有没有遇见这样的情况&#xff1f;不管是别人能够持续盈利的技术指标&#xff0c;还是业内知名的行业专家&#xff0c;只要是我们这些普通的投资者一旦使用持续盈利的技术指标&#xff0c;或者跟随专家顾问的信号同时在同一个方向建仓&#xf…

React中使用antDesign框架

1.在React项目中使用Ant Design&#xff0c;首先需要安装Ant Design: npm install antd --save 2.按需引入Ant Design组件&#xff0c;以减小最终打包的大小。使用babel-plugin-import插件可以实现按需加载。首先安装插件&#xff1a; npm install babel-plugin-import --save-…

solibity常用语法

引言 很久没写合约了&#xff0c;今天一写很多语法都忘记了&#xff0c;整理一下把 函数 语法描述public公有,任何人(拥有以太坊账户的)都可以调用 牢记private私有, 只有智能合约内部可以调用 牢记external仅合约外部可以调用&#xff0c;合约内部需使用this调用 先忽略inter…

python怎么处理txt

导入文件处理模块 import os 检测路径是否存在&#xff0c;存在则返回True&#xff0c;不存在则返回False os.path.exists("demo.txt") 如果你要创建一个文件并要写入内容 #如果demo.txt文件存在则会覆盖&#xff0c;并且demo.txt文件里面的内容被清空&#xff0c;如…

机器人规划算法——基于A-star和CostMap膨胀地图的全局规划(附Github源码链接)

前言 这段时间,笔者用c++写了一套机器人局部避障算法,并工程落地,机器人可以正常避障,避障所采用的技术方案是A*+TEB算法。并取得一定成果,后续还要针对复杂的场景继续优化。主要涉及到技术模块有: (1) costmap:代价地图模块,分为静态层和障碍物层以及膨胀层,静态层将…

Machine Learning机器学习之文本分析的词法分析、句法分析、语义分析(详细讲解)

目录 前言 词法分析&#xff1a; 词义消歧&#xff1a; 句法分析&#xff1a; 语义分析&#xff1a; 文本分析应用 1、文本分类&#xff1a; 设计过程&#xff1a; 代码实现&#xff1a; 完整代码&#xff1a; 2、情感分析&#xff1a; 总结 博主介绍&#xff1a;✌专注于前后…

计算机网络中---基本概念

什么是计算机网络 计算机网络是指利用通信设备和传输媒体,将地理位置不同的多台计算机连接在一起,以实现信息、资源和数据的共享和交换的系统。换句话说,计算机网络是由多台计算机通过通信设备和通信线路相互连接,形成一个整体,使得连接在网络中的计算机可以彼此之间进行数…

【Go】四、包名、访问范围控制、标识符、运算符

文章目录 1、_2、包名3、命名大小影响可访问范围4、运算符5、获取终端输入 1、_ 下划线"_"本身在Go中是一个特殊的标识符&#xff0c;称为空标识符用于忽略某个值 1&#xff09;忽略导入的没使用的包 2&#xff09;忽略某个返回值 2、包名 main包是程序的入口包&a…

[C++11] Lambda表达式完整解析

说明&#xff1a;C11中的Lambda表达式是一种允许创建匿名函数对象的语法结构。Lambda表达式可以捕获作用域中的变量&#xff0c;并且可以像普通函数一样被调用。它们是C11标准中引入的一个重要特性&#xff0c;旨在提供一种方便的方式来定义内联的小型函数&#xff0c;特别适用…

关于 HEAP CORRUPTION DETECTED:after Normal block 错误的原因及解析

目录 一、HEAP CORRUPTION DETECTED:after Normal block 出现的报错情况&#xff1a; 二、问题原因&#xff08;重要&#xff09;&#xff1a; 三、举例 1.错误代码如下&#xff1a; 2.错误原因及分析&#xff08;重要&#xff09;&#xff1a; 3.解决方法 ​编辑 4.正…

JavaScript 窗口

1.打开新窗口&#xff1a;window.open() <button onclick"isOpen()">打开百度</button> <script> function isOpen(){ myBaidu window.open(http://www.baidu.com); } </script> 2.关闭当前窗口&#xff1a;window.close() <button on…

【Linux C | 多线程编程】线程的连接、分离,资源销毁情况

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a;2024-04-01 1…

SSM框架学习——MyBatis关联映射

MyBatis关联映射 为什么要关联映射 实际开发中&#xff0c;对数据库操作常常会涉及多张表&#xff0c;所以在OOP中就涉及对象与对象的关联关系。针对多表操作&#xff0c;MyBatis提供关联映射。 关联关系概述 一对一&#xff1a;A类中定义B类的属性b&#xff0c;B类中定义A…

MCU友好过渡MPU,米尔基于STM32MP135开发板裸机开发应用笔记

以前微处理器&#xff08;MPU&#xff09;与微控制器&#xff08;MCU&#xff09;是截然不同的两种设备&#xff0c;MPU支持丰富的软件系统&#xff0c;如Linux和相关的软件堆栈&#xff0c;而MCU通常将专注于裸机和RTOS。近年来&#xff0c;随着MCU的性能越来越高&#xff0c;…

【Spring源码】WebSocket做推送动作的底层实例

一、前瞻 Ok&#xff0c;开始我们今天的对Spring的【模块阅读】。 那就挑Web里的WebSocket模块&#xff0c;先思考下本次阅读的阅读线索&#xff1a; WebSocket在Spring里起到什么作用这个模块采用了什么设计模式我们都知道WebSocket可以主动推送消息给用户&#xff0c;那做推…

Netty空闲检测Keepalive

文章目录 前言一、空闲检测二、Keepalive机制总结 前言 Netty的空闲检测和Keepalive机制都是为了确保客户端和服务器之间的连接仍然有效&#xff0c;防止连接断开。但它们在实现方式和原理上有所不同。 Netty的空闲检测机制是一种自定义的、基于应用层的机制。它主要通过定时…

halcon图像膨胀

1、原理&#xff1a; 使用结构元素在图像上移动&#xff0c;如果结构元素中有任意一个像素和图像上的非零像素重叠&#xff0c;则保留此时结构元素中心所在位置&#xff0c;并将其像素值设置为非零。 2、halcon代码 其中圆形结构元素可设置半径&#xff0c;矩形结构元素设置…

Leetcode509——斐波那契数(C语言)

题目来源&#xff1a;509. 斐波那契数 - 力扣&#xff08;LeetCode&#xff09; 方法一&#xff1a;&#xff08;动态规划&#xff09; 首先找到斐波那契数的边界条件F(0)0 和 F(1)1。 当n>1时&#xff0c;每项的和都等于前两项的和&#xff0c;即&#xff1a;F(n)F(n−1)F(…

设计模式(7):装饰器模式

一.装饰器模式职责&#xff1a; 动态的为一个对象增加新的功能&#xff1b;装饰器是一种用于代替继承的技术&#xff0c;无须通过继承增加子类就能扩展对象的新功能&#xff0c;使用对象的关联关系代替继承关系&#xff0c;更加灵活&#xff0c;同时避免类型体系的快速膨胀。 …