4、前端开发:CSS知识总结——简介、语法和种类(入门基础)

简介: 4、前端开发:CSS知识总结——简介、语法和种类(入门基础)

简介:什么是 CSS?


CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一个


语法:


       CSS 语法规则由两个主要的部分构成:选择器,以及一条或多条声明:


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


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


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


       CSS声明总是以分号 ; 结束,声明总以大括号 {} 括起来:



12.jpeg

p {color:red;text-align:center;}

CSS 注释

       注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。


       CSS注释以 /* 开始, 以 */ 结束, 实例如下:


/*这是个注释*/
p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

种类 :

1、内联样式/行内样式


       直接写在标签的style属性里面,属性值写CSS样式


       语法  样式名:样式值;(名值对);可以写多组样式,以分号隔开即可;


2、内部样式表


       在head标签内部写一个style标签,通过各种选择器选中对应元素,在{}内设置样式,样式结构也是名值对,可以写多组样式,必须用分隔号隔开,最后一个样式可不用分隔号,但一般都用。


<head>
  <style>
    /*选择符{属性:属性值;属性:属性值;}*/
    a{color:#FF0000;}
    #img1{width:800px;}/*id选择器*/
    .img2{width:800px;}/*类选择器*/
  </style>
</head>

3、外部样式表


       在html文件外,新建.css文件,在css文件里,选中对应的元素,设置样式


       通过link标签,引入.css文件,即可生效


       例如:


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


相关文章
|
8月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
2131 2
|
5月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
2月前
|
前端开发
|
2月前
|
前端开发
|
2月前
|
前端开发 JavaScript
|
2月前
|
XML 前端开发 JavaScript
|
2月前
|
前端开发 容器
|
4月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
111 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
5月前
|
前端开发 开发者 UED
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
126 1
|
6月前
|
Web App开发 前端开发
【CSS】——基础入门常见操作
CSS引入,CSS对元素美化,style修饰,选择器(标签选择器,类选择器,ID选择器,复合选择器),font-size , boder ,width,height,margin,paddiing