CSS-基础

最新推荐文章于 2024-08-18 09:18:56 发布
最新推荐文章于 2024-08-18 09:18:56 发布
阅读量448 收藏
点赞数
分类专栏： 前端自学 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46428386/article/details/122321421
版权
本文介绍了CSS的基础知识，包括CSS的作用、语法规则和引入方式。详细讲解了基础选择器（标签选择器、类选择器、ID选择器和通配符选择器），并探讨了字体和文本样式的设置，如字体大小、粗细、样式、行高和文本对齐。同时，还讨论了CSS样式的层叠问题和连写规则。
摘要由CSDN通过智能技术生成

一、基础认知

目标：理解CSS的作用，了解CSS语法规则，知道CSS的引入方式及其区别
学习路径：

	1.CSS初识
	2.CSS引入方式

1. 初识CSS

1.1 CSS的介绍

  • CSS：层叠样式表（Cascading style sheets）
  • CSS作用是什么？
    -给页面中的HTML标签设置样式，使其更美观工整

1.2 CSS语法规则

  • 写在哪里？
    -CSS写在style标签中，style标签一般写在head标签里面，title标签下面

  • 怎么写？
    -代码示例：

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
最低0.47元/天 解锁文章
永不头秃的老中医
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3 使用 postcss-pxtorem 实现自适应
不怕麻烦的鹿丸的博客
02-20 2615
if(/%/ig.test(px)) { // 有百分号%，特殊处理return px} else {// 144 为设计图尺寸1440除以10。
头歌教学实践平台 Web前端开发基础 CSS-基础知识
01-20
通过这个“头歌教学实践平台”的CSS基础知识课程，学习者可以系统地了解和掌握CSS，为成为优秀的Web前端开发者打下坚实的基础。通过实践项目和不断练习，将理论知识转化为实际技能，从而在网页设计领域游刃有余。
关于align属性可以用在哪个标签的总结
长高
02-22 3982
对于广大前端开发设计人员来说，align这个属性是很常见，但这个常见是指大多数在css中，现在已经很少有哪个标签直接用align属性了，可能在那之后就会废弃了，在那之前我会先总结一部分旧浏览器还支持的标签带有align属性。 可设置元素内数据的横向的显示位置： <table>中的<td> <tr> <th> <tbody>、<...
HTML对齐属性align的取值不能为,html和css学习笔记（三）
weixin_32289847的博客
06-05 721
CSS1css书写位置1.1内部样式表内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：```html```注：语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。type="text/CSS" 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。1.2行内样式t...
text-align的用法
热门推荐
老小孩
01-05 4万+
text-align的用法 text-align运用在块级元素中，使其中的文本对齐。事实上这句话的意思是运用在块级元素中text-align会使其包含行内元素对齐。 &lt;div class="test"&gt; &lt;p&gt;hhh&lt;/p&gt; &lt;h1&gt;nihaohaohhh&lt;/h1&gt; &lt;img ..
css笔记一-CSS简介、基础选择器、字体和文本样式
weixin_44819178的博客
08-06 243
一、CSS简介 1.1、什么是CSS? CSS(Cascading style sheets)：层叠样式表 CSS作用：给页面中的HTML标签设置样式 1.2、CSS语法规则 写在哪里？ css写在style标签中，style标签一般写在head标签里面，title标签下面； 怎么写？ 利用css选择器 1.3、css初体验 常见属性： color：文字颜色； font-size：字体大小； background-color：背景颜色； width：宽度； height：高度；
CSS基础
weixin_52135318的博客
03-30 449
CSS基础知识
CSS-基础篇
rfalcon的博客
05-18 2万+
CSS基础部分自学笔记 内联样式 也称行内或行间样式，是在html标签上添加style属性来实现的 内部样式 在<style></style>标签内添加的样式，内部样式的代码可以复用、符合W3C标准，尽量让结构和样式分开处理 外部样式 <link rel="stylesheet" href=""> rel：指定资源跟页面的关系 href：资源的地址 @import url(./common.css); 这种方式有很多问题，不建议使用 颜色表示法 单词表示法
postcss-pxtorem
书中自有妍如玉的博客
12-01 1万+
安装依赖之后，将postcss-pxtorem的配置都放到了vue.config.js中。下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。（String, Regexp, Function）要忽略并保留为px的文件路径。忽略单个属性的最简单方法是在像素单位声明中使用大写字母，将px写为Px。（Array）可以从px更改为rem的属性。（Array）要忽略的选择器，保留为px。
css-doodle绘制糖果掉落特效特效代码
03-20
总的来说，利用CSS-Doodle创建“糖果掉落”特效涉及到了CSS的动画、变换、颜色、延迟等基础知识，同时结合Web组件和可能的JavaScript交互，可以构建出生动有趣的网页互动体验。通过不断学习和实践，开发者可以不断...
HTML---CSS----基础知识及代码----各种小程序网页设计
04-09
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是前端开发中的基础核心技术，它们共同构建了网页的结构和样式。在这个“HTML---CSS----基础知识及代码----各种小程序网页设计”主题中，我们将...
css-advanced-challenge-DioAinto：css-advanced-challenge-DioAinto由GitHub Classroom创建
02-19
在本项目"css-advanced-challenge-DioAinto"中，我们主要关注的是CSS的高级应用，这是一项挑战，旨在提升开发者对CSS的理解和技能。...通过实践，你将能够提升自己的CSS技能，为未来的开发工作打下坚实基础。
postcss-url:PostCSS插件以对url（）进行基础设置，内联或复制资产
05-02
安装$ npm install postcss postcss-url基本示例-变基// dependenciesconst fs = require ( "fs" )const postcss = require ( "postcss" )const url = require ( "postcss-url" )// css to be processedconst css = ...
CSS的重绘和重排是什么？
沐爸的博客
08-12 1068
CSS的重绘和重排是什么？它俩有什么区别？如何对重绘和重排进行优化？快来一起看看吧！
CSS相关修改样式、伪类样式
2301_80034711的博客
08-15 959
3.background-repeat:背景图片平铺方式，值repeat重复填充，no-repeat不重复。值用空格隔开，分别设置x，y方向的相对位置。2.background-image：标签背景图片，使用url（）函数，引入文件地址。使用rgb（）函数，范围0-255，如rgb（255,255,255），分别表示红，绿，蓝。4.background-size：背景图片在标签中的大小，若图片比标签大，部分图片会缺失。3.选择器nth-child（)：通过简单数字公式，正序只更改选择器匹配中的元素。
PHP 实战：动态更改 CSS 值
withkai44的博客
08-15 167
在上面的代码中，我们首先设定了一个变量 $userFontSize 来模拟获取用户设置的字体大小，然后通过 echo 函数将 CSS 样式输出到页面中。除了直接在服务器端输出或生成 CSS 文件外，还可以结合 JavaScript 来动态更改样式。这种方式更为灵活，可以根据用户的行为实时更改样式。如果需要更改的样式较多，我们也可以选择生成一个新的 CSS 文件。直接输出 CSS 样式。生成新的 CSS 文件。
CSS的:placeholder-shown伪类：精确控制输入框占位符样式
2402_85758349的博客
08-17 661
伪类代表的是一个输入字段（或元素）在其内显示占位符文本的状态。当输入框为空且占位符可见时，这个伪类就生效。这对于创建更丰富的表单样式和交互效果非常有用。
探索tailwindcss多主题切换
最新发布
xuefeng11111的博客
08-18 332
探索tailwind+css变量切换主题
css-定位
m0_73882020的博客
08-17 307
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值