CSS简介

目录

CSS

CSS概念

核心概念

为什么需要CSS

语法

 CSS的引入方式

内联样式（行内样式）

内部样式

外部样式（推荐）

CSS

CSS概念

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表

CSS文件后缀名为.css

CSS用于HTML文档中元素样式的定义

核心概念

  1. 选择器（Selectors）： 选择器是用来选择要应用样式的HTML元素的模式。它可以基于元素名称、类、ID、属性等来匹配元素。选择器指定了哪些元素将被样式化。

  2. 属性（Properties）： 属性是用来定义元素样式的关键字，如颜色、字体大小、边框等。每个属性对应一个或多个值，用于设置样式的具体细节。

  3. 值（Values）： 值是属性的具体设置，例如 color 属性的值可以是 "red"、"#00ff00"（颜色代码）等。不同的属性接受不同类型的值。

  4. 样式规则（Rules）： 样式规则由选择器和一组属性-值对组成，用于指定哪些元素应用什么样式。例如：

    p {color: blue;font-size: 16px;
}

  5. 样式表（Stylesheets）： 样式表是包含一系列样式规则的文件。它可以内联写在HTML文档中，也可以作为外部文件链接到HTML中。

  6. 层叠性（Cascading）： 当多个样式规则应用在同一个元素上时，层叠性决定了哪些规则会被优先采用。层叠性遵循特定的优先级和继承规则，从而确保样式的有效应用。

    • 盒模型（Box Model）： 盒模型是一种描述元素尺寸和布局的概念。每个元素被视为一个矩形盒子，由内容、内边距、边框和外边距组成。

    • 响应式设计（Responsive Design）： CSS可以用于创建响应式的网页，使页面能够在不同设备和屏幕尺寸下呈现出最佳的外观和布局。

    • 伪类和伪元素（Pseudo-classes & Pseudo-elements）： 伪类和伪元素允许你选择特定状态下的元素或向特定元素的某些部分应用样式，例如 :hover 表示鼠标悬停状态。

    • 优先级（Specificity）： 当多个选择器应用在同一元素上时，优先级规则决定了哪个选择器的样式会被应用。

为什么需要CSS

使用css的唯一目的就是让网页具有美观一致的页面

  1. 样式控制： CSS允许你对网页的外观和样式进行精确的控制。你可以设置文字颜色、字体、背景、边框等，以创造独特的视觉效果。

  2. 分离内容和样式： 使用CSS可以将网页的内容和样式分离，使代码更加结构化和可维护。这种分离使得你可以单独修改样式，而无需改变HTML结构。

  3. 跨浏览器兼容性： 不同的浏览器可能在默认样式上有所不同。使用CSS可以确保你的网页在不同浏览器上都能保持一致的外观。

  4. 可重用性： 通过将样式定义在CSS文件中，你可以在网站的不同页面上重复使用相同的样式，从而减少重复劳动并提高效率。

  5. 响应式设计： CSS可以用于创建响应式的网页，使得网页能够在不同的设备和屏幕尺寸下自适应，提供更好的用户体验。

  6. 页面布局： 使用CSS可以控制元素的位置和布局。你可以实现多列布局、居中对齐等，使网页看起来更加整洁和专业。

  7. 动画和过渡： CSS支持动画和过渡效果，可以为元素添加平滑的过渡和动画效果，从而增加交互性和吸引力。

  8. 易于维护： 将样式集中在CSS中可以使代码更易于维护。如果需要修改样式，你只需修改CSS文件，而不必逐个修改每个HTML元素。

  9. 性能优化： 使用CSS可以减少HTML代码中的样式信息，从而减小文件大小，提升加载速度，改善性能。

  10. 统一风格： 通过为网站应用统一的样式，你可以创造出专业、一致的品牌形象，让用户更容易识别和记住你的网站。

语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）

image-20211129154503132

选择器通常是您需要改变样式的 HTML 元素

每条声明由一个属性和一个值组成

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

<style>h1{color: blue;font-size: 12px;}
</style>

 CSS的引入方式

内联样式（行内样式）

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性

温馨提示

缺乏整体性和规划性，不利于维护，维护成本高

<p style="background: orange; font-size: 24px;">CSS<p>

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

温馨提示

单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

<head><style> h1 { background: red; } </style>
</head>

外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部

<link rel="stylesheet" type="text/css" href="xxx.css">

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

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

相关文章

微信小程序真机调试异常cmdId 1006, errCode-50011-已解决

微信小程序真机调试异常cmdId 1006, errCode-50011-已解决

cmdId 1006, errCode-50011 起因 小程序在模拟器上预览没问题，真机调试和体验版首页打不开，点展开显示cmdId 1006, errCode-50011 解决 查了下1006， 说是广告， 我没接广告，这个也不是错误码 1006广告组件被驳回你的广告正在被审核，无法展现广告后来找到几个类似的帖子…
阅读更多...
中间件的介绍

中间件的介绍

1.1 什么是中间件 中间件是介于应用系统和系统软件之间的一类软件&#xff0c;他使用系统软件所提供的基础服务&#xff0c;衔接网络上应用系统的各个部分或不同的应用&#xff0c;能够达到资源共享、功能共享的目的。 例如MySQL就可以看作是具备中间件特性的一种技术&#x…
阅读更多...
Linux系列讲解 —— FTP协议的应用

Linux系列讲解 —— FTP协议的应用

简单介绍一下FTP文件传输协议在linux系统中的应用。 目录 0. 基本概念1. FTP Server1.1 安装FTP Server1.2 FTP Server开启和关闭1.3 查看FTP Server是否开启1.4 FTP服务器配置 2. FTP Client2.1 lftp2.2 ftp2.3 sftp2.4 文件资源管理器集成的ftp和sftp 3. ftp常用命令 0. 基本…
阅读更多...
python使用dir()函数获取对象中可用的属性和方法(看不到python源码又想知道怎么调用，DLL调用分析，SDK二次开发技巧)

python使用dir()函数获取对象中可用的属性和方法(看不到python源码又想知道怎么调用，DLL调用分析，SDK二次开发技巧)

有时候调用一些SDK&#xff0c;但是人家又是封装成dll文件形式调用的&#xff0c;这时没法看源码&#xff0c;也不想看其对应的开发文档&#xff08;尤其有些开发文档写得还很难懂&#xff0c;或者你从某个开源社区拿过来&#xff0c;就根本没找到开发文档&#xff09;&#xf…
阅读更多...
搜狗拼音暂用了VSCode及微信小程序开发者工具快捷键Ctrl + Shit + K 搜狗拼音截图快捷键

搜狗拼音暂用了VSCode及微信小程序开发者工具快捷键Ctrl + Shit + K 搜狗拼音截图快捷键

修改搜狗拼音的快捷键 右键--更多设置--属性设置--按键--系统功能快捷键--系统功能快捷键设置--取消Ctrl Shit K的勾选--勾选截屏并设置为Ctrl Shit A 微信开发者工具设置快捷键 右键--Command Palette--删除行 微信开发者工具快捷键 删除行&#xff1a;Ctrl Shit K 或…
阅读更多...
虚拟机问题

虚拟机问题

虚拟机无法识别USB设备 经排查为VMware USB Arbitration Service 没有启动，但是VMware USB Arbitration Service依赖于VMware Workstation Server启动 VMware USB Arbitration Service（VMUSBArbService）是由 VMware 虚拟化软件提供的一个服务，用于协调和管理主机系统上的…
阅读更多...
计算机网络----CRC冗余码的运算

计算机网络----CRC冗余码的运算

目录 1. 冗余码的介绍及原理2. CRC检验编码的例子3. 小练习 1. 冗余码的介绍及原理 冗余码是用于在数据链路层的通信链路和传输数据过程中可能会出错的一种检错编码方法&#xff08;检错码&#xff09;。原理&#xff1a;发送发把数据划分为组&#xff0c;设每组K个比特&#…
阅读更多...
UNIAPP中开发企业微信小程序

UNIAPP中开发企业微信小程序

概述 需求为使用uni-app开发企业微信小程序。希望可以借助现成的uni-app框架&#xff0c;快速开发。遇到的问题是uni-app引入jweixin-1.2.0.js提示异常: Reason: TypeError: Cannot read properties of undefined (reading ‘title’)。本文中描述了如何解决该问题&#xff0c…
阅读更多...
linux 系统中vi 编辑器和库的制作和使用

linux 系统中vi 编辑器和库的制作和使用

目录 1 vim 1.1 vim简单介绍 1.2 vim的三种模式 1.3 vim基本操作 1.3.1命令模式下的操作 1.3.2 切换到文本输入模式 1.3.3 末行模式下的操作 2 gcc编译器 2.1 gcc的工作流程 2.2 gcc常用参数 3 静态库和共享&#xff08;动态&#xff09;库 3.1库的介绍 3.2静态…
阅读更多...
Spring事件监听机制

Spring事件监听机制

前言 事件监听机制其原理就是观察者模式&#xff0c;而观察者模式又被称为发布-订阅模式。 观察者模式将有依赖关系的对象抽象为了观察者和主题两个不同的角色&#xff0c;多个观察者同时观察一个主题&#xff0c;两者只通过抽象接口保持松耦合状态&#xff0c;这样双方可以相…
阅读更多...
【数据结构】 单链表面试题讲解

【数据结构】 单链表面试题讲解

文章目录 引言反转单链表题目描述示例&#xff1a;题解思路代码实现&#xff1a; 移除链表元素题目描述&#xff1a;示例思路解析&#xff1a; 链表的中间结点题目描述&#xff1a;示例&#xff1a;思路解析代码实现如下&#xff1a; 链表中倒数第k个结点题目描述示例思路解析&…
阅读更多...
2023.8 - java - 对象和类

2023.8 - java - 对象和类

public class Dog {String breed;int size;String colour;int age;void eat() {}void run() {}void sleep(){}void name(){} } 一个类可以包含以下类型变量&#xff1a; 局部变量&#xff1a;在方法、构造方法或者语句块中定义的变量被称为局部变量。变量声明和初始化都是在方…
阅读更多...
基于IDE Eval Resetter延长IntelliJ IDEA等软件试用期的方法（包含新版本软件的操作方法）

基于IDE Eval Resetter延长IntelliJ IDEA等软件试用期的方法（包含新版本软件的操作方法）

本文介绍基于IDE Eval Resetter插件&#xff0c;对集成开发环境IntelliJ IDEA等JetBrains公司下属的多个开发软件&#xff0c;加以试用期延长的方法。 我们这里就以IntelliJ IDEA为例&#xff0c;来介绍这一插件发挥作用的具体方式。不过&#xff0c;需要说明使用IDE Eval Rese…
阅读更多...
感觉和身边其他人有差距怎么办？

感觉和身边其他人有差距怎么办？

虽然清楚知识需要靠时间沉淀&#xff0c;但在看到自己做不出来的题别人会做&#xff0c;自己写不出的代码别人会写时还是会感到焦虑怎么办&#xff1f; 你是否也因为自身跟周围人的差距而产生过迷茫&#xff0c;这份迷茫如今是被你克服了还是仍旧让你感到困扰&#xff1f; 下…
阅读更多...
SSM——用户、角色、权限操作

SSM——用户、角色、权限操作

1. 数据库与表结构 1.1 用户表 1.1.1 用户表信息描述 users 1.1.2 sql语句 CREATE TABLE users( id varchar2(32) default SYS_GUID() PRIMARY KEY, email VARCHAR2(50) UNIQUE NOT NULL, username VARCHAR2(50), PASSWORD VARCHAR2(50), phoneNum VARCHAR2(20), STATUS INT…
阅读更多...
推荐一个绘图平台（可替代Visio）

推荐一个绘图平台（可替代Visio）

不废话&#xff0c;简易记网址&#xff1a; draw.io 网站会重定向到&#xff1a;https://app.diagrams.net/
阅读更多...
Unity进阶–通过PhotonServer实现人物选择和多人同步–PhotonServer(四)

Unity进阶–通过PhotonServer实现人物选择和多人同步–PhotonServer(四)

文章目录 Unity进阶–通过PhotonServer实现人物选择和多人同步–PhotonServer(四)服务端客户端 Unity进阶–通过PhotonServer实现人物选择和多人同步–PhotonServer(四) 服务端 服务端结构如下&#xff1a; UserModel using System; using System.Collections.Generic; usin…
阅读更多...
因果推断（四）断点回归（RD）

因果推断（四）断点回归（RD）

因果推断&#xff08;四&#xff09;断点回归&#xff08;RD&#xff09; 在传统的因果推断方法中&#xff0c;有一种方法可以控制观察到的混杂因素和未观察到的混杂因素&#xff0c;这就是断点回归&#xff0c;因为它只需要观察干预两侧的数据&#xff0c;是否存在明显的断点…
阅读更多...
QT的布局与间隔器介绍

QT的布局与间隔器介绍

布局与间隔器 1、概述 QT中使用绝对定位的布局方式&#xff0c;无法适用窗口的变化&#xff0c;但是&#xff0c;也可以通过尺寸策略来进行 调整&#xff0c;使得 可以适用窗口变化。 布局管理器作用最主要用来在qt设计师中进行控件的排列&#xff0c;另外&#xff0c;布局管理…
阅读更多...
[论文笔记]Glancing Transformer for Non-Autoregressive Neural Machine Translation

[论文笔记]Glancing Transformer for Non-Autoregressive Neural Machine Translation

引言 这是论文Glancing Transformer for Non-Autoregressive Neural Machine Translation的笔记。 传统的非自回归文本生成速度较慢，因为需要给定之前的token来预测下一个token。但自回归模型虽然效率高，但性能没那么好。 这篇论文提出了Glancing Transformer，可以只需要一…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023