首页 > 其他分享 >924 css

924 css

时间:2024-09-24 21:36:27浏览次数:1  
标签:元素 选择器 html id 924 class css

**style **
行内式:
缺点 代码复用度低 不利于维护
与html一起不好阅读

内嵌式:
通过head标签的style标签定义本页面的公共样式
选择器


只能在一个html生效

外部样式表:
css代码放。css文件 html的head中通过link标签调用
link里href css路径
rel 文件类型 stylesheet css文件

css选择器

元素选择器缺点 某些同名元素不想使用该样式实现不了。。。

id选择器 id具有唯一性#id{}

缺点 样式只能作用到一个上

class选择器
根据元素class属性值确定 一个clss有多个值



感觉class很方便 之前的都白学了

css浮动

div块元素 竖着排 可以用display 改成横着排
block 快 inline 行 但转成行 宽高不生效

用浮动解决
用float 下一个占用原有位置

重叠的话 文字会挤出来 压在一起

css定位

position:
static默认
absolute 绝对 根据页面边缘定位
relative 相对元素原本的位置 不会释放文档流
fixed 相对浏览器窗口 原来网页那些广告就是用的这个。。。
配合 left right top bottom

css盒子模型

主要在于调整缝隙

边距分为外边距和内边距
内padding border margin外
auto 平均分配 据中

标签:元素,选择器,html,id,924,class,css
From: https://www.cnblogs.com/yanqiwen/p/18430086

相关文章

  • 20240924 练习记录
    3个DP,还想了几道题,但不会。*P3349[ZJOI2016]小星星考虑树上的点最终会对应在图上的哪个点,设\(f_{x,i}\)表示树上的点\(x\)对应图上点\(i\)时的方案数,当\(x\)对应\(i\)后,在树上\(x\)的所有子节点也必须像在树上一样,在图上和\(i\)之间有连边,有了这条限制,可以写......
  • 【Day20240924】05git 两人协作 冲突
    git两人协作冲突命令行解决两个人修改同一文件时的冲突可视化解决两个人修改同一文件时的冲突参考命令行解决两个人修改同一文件时的冲突假设kerwin.js是项目的路由文件。tiechui文件夹是组员铁锤的工作目录;test2008文件夹是组长的工作目录。此时,两人都想要......
  • css布局中BFC的事情
    在页面布局中,其实很多地方都用到了BFC只不过,不知道它叫这个名字。BFC,说是块盒作用域上下文,包括从开始写页面,html,也是一个bfc形成这个的因素很多。最开始布局使用的浮动,清除浮动,就是给2个相邻的元素创建各自的BFC,这样就不会收到浮动的影响,比如:父元素下面2个div都浮动了,导致它两......
  • UnoCSS 给了我一个不用 tailwindcss 的理由
    如果你没有听说过 tailwindcss或者 unocss,请先 return 先去了解一下。开发上:可能为你甚至你们的前端团队节省很多写样式的时间,也能让你或者你们的项目开发体验有很大提升生产上:你们的项目打出来的包体积中的样式代码占比将突然骤降然后趋于不变。为什么我换到了UnoCSSt......
  • 仿QQ音乐(HTML+CSS) (1)
    ......
  • 大学生网页制作期末作业——html+css+javascript+jquery旅游官网6页 html大学生网站开
    ......
  • 【期末大作业】基于HTML+CSS+JavaScript南京大学网页校园教育网站html模板(3页) (1)
    ......
  • “荒野大镖客”中的美学:CSS 赋予游戏的视觉魅力
       《荒野大镖客:救赎2》(RedDeadRedemption2)是一款广受欢迎的开放世界游戏,凭借其精美的画面、细腻的人物建模和动人的故事情节,深深吸引了全球玩家。在这款游戏中,美学不仅仅体现在角色和场景的设计上,还可以通过现代网页设计技术,如CSS(层叠样式表),来再现其独特的视觉魅力。本......
  • css如何设置间距
    在CSS中设置间距是非常常见的需求,可以通过多种属性来实现。以下是一些常用的CSS属性及其用法,用于设置元素之间的间距:内边距(Padding)padding属性用于设置元素内容与元素边框之间的距离。可以分别设置四个方向的内边距。示例代码:.element{padding:10px;/*上下左右......
  • 万象更新 Html5 - css: selector 选择器: 基础,通配符选择器,元素选择器,id 选择器,类选择
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-css:selector选择器:基础,通配符选择器,元素选择器,id选择器,类选择器示例如下:css\src\selector\demo1.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">......