CSS

CSS——CSS基础知识 文章目录CSS的发展历程CSS 网页的美容师CSS初识引入CSS样式表(书写位置)内部样式表行内式(内联样式)外部样式表(外链式)三种样式表总结(位置)CSS样式规则外链案例内链案例 CSS的发展历程 从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生 阅读详情

1. 创建CSS

1).写在head内  
2).引入外部
3)。标签内
<style>
……
</style>

<link rel="stylesheet href="URL">  

<div style="color:red;"></div>

2. 注释

/* */

3. 选择器

id选择器:
#:开头id;(唯一)
class选择器:
.:开头class;(多个)
标签选择器:
div{}
后代选择器
选择器 选择器{}
并集选择器
选择器,选择器{}
属性选择器
选择器[属性 =‘值’]{}
ps:优先级,标签上的style优先,编写顺序,自上往下

4. 边框border

border:1px dotted red; //像素,样式,颜色
也可以给某一条边设置

5.

height:高度
width:可以用百分比,像素
text-align :水平居中
vertical-align :垂直方向根据标签高度居中
line-height:垂直居中(推荐)
font-size:字体大小
font-weight:字体加粗
color:字体颜色

6. 漂浮:float

让标签飘起来,块级标签也可以堆叠
如果父元素没有被撑起来(父亲不能控制儿子),加上:
	<div style="clear:both;"></div>

7. display

转换为块级:块级可以设置
	display:block;
转换为行内:行内元素无法设置宽度,高度,padding,margin
	display:inline;
行块属性:有默认的高度宽度,也可以设置
	display:inline-block;
让标签消失:
	display:none;(JS用于消失,显示)

8. padding margin(0,auto)

padding:内边距
margin:外边距
	margin:0 auto;
CSS与CSS3美化页面 目录一、CSS简介1.1 什么是CSS?1.2 样式层叠次序二、CSS基础语法三、CSS使用方式四、CSS常用选择器五、CSS关系和属性选择器六、CSS伪类选择器七、CSS的尺寸和单位八、CSS字体与文本属性九、CSS背景属性十、CSS边框属性十一、CSS内外补白属性十二、CSS盒子模型实例十三、CSS定位属性十四、CSS布局属性十五、CSS实现导航十六、CSSflex弹性盒子介绍十七、CSS用户界面和多栏属性介绍十八、CSS表格和过度属性介绍十九、CSS旋转动画和媒体查询属性介绍二十、CSS字体图标的使用 阅读详情

相关推荐

css入门之CSS1、CSS2、CSS3、CSS4发展历程

CSS 最初于 1996 年发布,由用于添加字体属性的属性组成例如字体和文本的强调颜色、背景和其他元素。CSS2 于 1998 年发布,为其他媒体类型添加了样式,以便可以用于页面布局设计。CSS3 于 1999 年发布,其中添加了演示样式属性,允许从文档构建演示文稿。CSS3 将其规范划分为许多单独的模块,这使得 CSS3 更易于处理。借助 CSS3,设计人员现在可以使用自定义字体,例如 Google Fonts 和 Typecast 中可用的字体。在 CSS 和 CSS2,设计人员只能使用“网络安全字体”

蛐蛐的博客 2877

CSS Reset & Modern CSS Reset

CSS Reset & Modern CSS Reset

YF云飞的博客 1万+

手把手教你安装 Vivado2019.2(附安装包)

Vivado 2019.2 作为 Xilinx 公司发布的一款设计套件版本,具有多个显著的优点,以下是对其优点的详细归纳

dpwkj的博客 1万+

CSS3渲染器CSS3DRenderer.js和CSS3模型

通过CSS3渲染器和模型可以把HTML元素像Threejs的网格模型Mesh或精灵模型Sprite一样去渲染

OYlan_的博客 2675

UE4/5项目GPU崩溃?可能是Windows的TDR机制在搞鬼!深入浅出聊聊TdrDelay与显卡超时

本文深入探讨了UE4/5项目中GPU崩溃的常见原因,揭示了Windows TDR机制的工作原理及其对渲染进程的影响。通过调整TdrDelay参数和优化GPU负载,提供了解决显卡超时问题的实用方案,帮助开发者提升项目稳定性。

weixin_30691649的博客 409

AM243x多核MCU启动流程解析与OSPI Flash烧录实战

嵌入式系统开发中,引导加载器是芯片上电后执行的第一段软件,负责初始化硬件、加载操作系统或应用程序。其工作原理通常遵循多级引导链,从ROM固件到用户可定制的二级引导程序,逐级建立完整的软件运行环境。这一机制的技术价值在于实现可靠的系统启动、支持安全校验,并为多核异构架构提供协同基础。在应用场景上,引导加载器广泛应用于工业控制、汽车电子和物联网设备,确保设备能从非易失性存储器中自主启动。本文聚焦于TI AM243x这类高性能多核MCU,深入剖析其包含RBL和SBL在内的三级启动流程,并详细演示如何通过UART接

weixin_28703451的博客 582

CSS语法与规则 — 重学CSS

进入重学 CSS 的第一步,首先需要找到一些线索。我们在前面的课程中讲学习方法的部分也讲过,要想建立知识体系骨架,我们需要一个完备性更权威,更全的线索。但是 CSS 现在标准的状态非常复杂,所以我们没有办法找到一份像 JavaScript 或者 HTML 中比较完备的现形标准,能把 CSS 的一切都浓缩在内。

三钻 - 之前端到全栈之路 3977

基于STM32的嵌入式平台实现EtherCAT主站

本文将介绍如何在基于STM32的嵌入式平台上构建EtherCAT主站,并提供相应的源代码。使用SOEM库提供的API函数,我们可以实现与EtherCAT从站设备的实时通信和数据交换。在STM32的代码中,使用SOEM库提供的API函数初始化EtherCAT主站。在SOEM库中,我们可以找到EtherCAT主站的实现代码和相关的API函数。使用SOEM库提供的API函数实现EtherCAT主站的功能,包括发送和接收EtherCAT数据帧、处理从站设备的状态等。确保连接正常并且设备能够相互通信。

CodeSageX的博客 2832

css注释_CSS注释示例–如何注释CSS

css注释Comments are used in CSS to explain a block of code or to make temporary changes during development. The commented code doesn’t execute. CSS中使用注释来解释代码块或在开发过程中进行临时更改。 注释的代码不执行。 Both single and mu...

cumi7754的博客 1806

想重装OpenClaw?先执行这4步彻底卸载,避免配置冲突

在重装OpenClaw之前,彻底卸载是非常重要的一步。如果不彻底卸载,可能会导致: - 残留的配置文件与新安装的版本冲突 - 旧的依赖包干扰新的安装过程 - 服务冲突导致启动失败 - 数据混乱影响系统稳定性

一键难忘的博客 1043

YOLOv8优化:独家创新(SC_C_Detect)检测头结构创新,实现涨点 | 检测头新颖创新系列

独家创新(SC_C_Detect)检测头结构创新,适合科研创新度十足,强烈推荐

①答疑群聊服务;②YOLO大模型知识问答系统;③计算机视觉论文生成智能体; 4868

【CSS】CSS3进阶

正文CSS(层叠样式表)是一种用于描述HTML或XML文档表现形式的样式表语言。它控制网页的视觉展示,包括布局、颜色、字体等。CSS 规则集由选择器和声明块组成: 例如: 1.2 CSS 引入方式 1.2.1 内联样式 直接在HTML元素中使用style属性: 1.2.2 内部样式表 在HTML文档的部分使用标签: 1.2.3 外部样式表 创建独立的.css文件,通过标签引入: 2. CSS 选择器 2.1 基本选择器 选择器类型 语法 示例 描述 元素选择器 元素名 选择所有元素 类

Guiat的博客 993

GEE生物量预测:利用多源遥感数据和随机森林算法RF构建地上生物量(AGB)预测模型,并实现未来年份的生态变化模拟(大面积生物量反演)

数据融合策略:整合5类遥感产品(AGB、NDVI、LAI、土地覆盖、地形)时序特征构建:采用生长季中值法降低云污染影响机器学习优化分层采样保证数据代表性80棵决策树平衡精度与效率预测可靠性基准期R²达0.76需结合地面实测数据校正。

此星光明博客 419

CSS和CSS3

以上只是CSS和CSS3的主要内容,它们还有很多其他的属性和特性,可以帮助你创建出非常丰富和美观的网页。的动画,让元素从原来位置水平移动到右边100像素的位置,然后应用到。类的元素上,动画持续2秒,无限循环。这段代码定义了一个名为。

前端大白话 992

Python爬虫实战:抓取CVE安全漏洞数据库

在网络安全领域,CVE(Common Vulnerabilities and Exposures)是一个非常重要的安全漏洞字典,它为每个安全漏洞提供了唯一的标识符。安全研究人员、开发人员和系统管理员都需要及时了解最新的CVE信息,以便采取相应的防护措施。本文将详细介绍如何使用Python爬虫技术从专业CVE网站抓取漏洞数据,并构建一个完整的CVE信息采集系统。本文详细介绍了如何使用Python爬虫技术从专业CVE网站抓取安全漏洞数据。多种爬虫技术反爬虫策略:User-Agent轮换、代理IP、请求延迟。

2201_76125261的博客 367

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

css教学 css基础

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称,有时我们也会称之为 CSS 样式表或级联样式表。是一种标记语言.用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式盒子模型➢盒子模型包括:border边框、外边距 margin、padding内边距、和 content 内容绝对定位和固定定位也和浮动类似。1. 行内元素添加绝对或者固定定位,可以直接设置高度和宽度。

weixin_71899005的博客 1898

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

css1 css2 css3 区别

css1 css2 css3 区别        CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。        但自从CSS1的版本之后,又在1998年5月发布了CSS2版本,样式单得到了更多的充实。        CSS2.0提供给我们了一个机制,让程序员开发时可以不考虑显示和界面就可以制作表单和界面,显示问题可由美工或是程序员...

damon940111的博客 7915

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

从CSS3到CSS模块化:带你深入了解CSS你不知道的前沿特性

尽管我们通常将CSS3作为终点,但CSS实际进入了一个新的阶段——**模块化的持续进化**。以下是一些你可能还不知道的前沿CSS新特性,它们正逐渐改变我们的Web开发方式。

m0_61118741的博客 2069

CSS 教程

通过以上CSS教程,你可以对CSS有一个全面的了解,并开始创建和优化网页的样式。在实际应用中,不断实践和探索,你将能够掌握更多CSS技巧,为网页带来更好的视觉效果和用户体验。:如Bootstrap、Foundation等,提供了预定义的CSS类和布局,可快速构建响应式网站。:如SASS、LESS等,允许使用变量、嵌套规则、混合等高级功能,提高CSS的可维护性。:使元素向左或向右浮动,常用于创建多列布局。:用于向元素添加额外的内容或样式,如。:根据元素的属性和属性值来选择元素。

weixin_51782176的博客 1461

【Css】Css

清除浮动的方式缺点额外标签法(隔墙法)添加许多无意义的标签,结构化较差。父级overflow:hidden;溢出隐藏父级:after伪元素由于IE6-7不支持:after,兼容性问题父级双伪元素由于IE6-7不支持:after,兼容性问题。

shisanxiang_的博客 1164

添加CSS样式的三种方法与CSS的注释

当浏览器读到样式表时,它将根据样式表中的信息来格式化 HTML 文档。

Vec_Kun的博客 2523

css css2 css3_CSS很好

css css2 css3Due to the ever-growing popularity of React, Facebook’s user interface library, there has been some discussion on the topic of CSS and whether or not it has a future in its current form —...

culi3118的博客 268

CSS hack

由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSS code就称为CSS hack。常用的CSS hack 有三种方式,CSS 内部hack、选择器hack、HTML 头部引用,其中第一种最常用。

2403_88477236的博客 1989

【CSS 面经】CSS 优化和提高性能的方法有哪些?

在现代前端开发中,CSS 的优化不仅影响页面的视觉效果,更直接关系到用户的加载体验和页面的渲染效率。通过合理的优化方法,既可以提升性能,又能提高代码的可维护性。答:低效选择器增加浏览器的匹配时间,尤其是嵌套选择器和通配符选择器会显著降低性能。答:通过压缩文件、移除未使用的 CSS、合并文件以及合理使用选择器等方式优化。过多的 CSS 动画会增加 CPU/GPU 的负担,影响性能。通过工具将 CSS 文件压缩,移除多余的空格、注释和换行符。类选择器的性能优于标签选择器和嵌套选择器。实现动画效果,避免使用。

lph159的博客 1481

何时需要import css文件?怎么知道需要导入哪些css文件?为什么webpack不提示CSS导入?(导入css导入规则、css导入规范)

这种模块化的CSS导入方式可能一开始不习惯,但它使CSS的管理更加清晰,也是现代前端开发的主流方式。可是即使我不导入它也没有提示,也没有报错信息,但是我确实是需要导入的,因为我需要打包,但是它不提示我要把哪些css文件导入到哪些css,这不是很奇怪吗?在前端工程中使用webpack打包CSS时,确实需要在JavaScript文件中导入CSS文件,这可能会让人感到困惑。你提出了一个很好的问题!直接导入 CSS 文件。在 JavaScript 中,是否需要导入 CSS 文件取决于具体的使用场景和项目需求。

Dontla的博客 1550

CSS高级技巧(CSS Day7,精通CSS必学)

CSS高级、CSS精灵图、字体图标、CSS三角、CSS用户界面样式、鼠标样式 cursor、轮廓线 outline、vertical-align 属性、溢出的文字省略号显示( text-overflow: ellipsis)、常见布局技巧、CSS初始化

学习是最低成本的投资 1255
上一篇: HTML常用标签集合
下一篇: CSS补充以及JS语法
Young-_-D
博客等级 码龄8年 62粉丝 106原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值