CSS3第一天(基础选择器+复合选择器)

news/2024/11/20 0:47:41/文章来源:https://www.cnblogs.com/fengok/p/18345388

1.选择器

基础选择器:标签选择器(某一类标签)、类选择器(一个或几个标签,最常用)、id选择器和通配符选择器

标签名{属性1:属性值1;属性2:属性值2;...}

类选择器(可以多个标签使用)

.类名{属性1:属性值1;...}<ul><li class="red">大雨</li></ul>

类名长的,可以用短横线分割,最好用英文,别出现数字和汉字
使用相同样式的,可以提前出来放一个样式类里,class里引用多个,空格分割,方便统一修改。

id选择器(只能被用一次,修饰页面唯一属性的元素) #id名字{xxx}  id在标签那声明一下。

通配符选择器(无需调用,作用于所有元素)*{}

 2.字体属性

font-family设置字体系列  标签名{font-family:'Microsoft YaHei',Arial,Helvetica,sans-serif}  会先看第一个字体电脑有没有,没有则看下一个。

font-size设置字体大小 单位px最常用  不同浏览器默认显示字号可能不一致,我们尽量给一个明确值大小。可以给body指定整个页面文字的大小。

font-weight设置字体粗细 normal默认不加粗 bold加粗 100-900 400等同于normal,700等同于bold,主要不跟单位。开发中更喜欢用数字。可以让strong、h变的不加粗。

font-style设置文本风格 倾斜italic 让em、i标签变的不倾斜用normal

font复合写法:

前提:对应位置不能变,size和family必须有

text-align文本对齐 left(默认) right center  设置元素内文本内容的水平对齐方式 

text-decoration装饰文本 none(默认) underline下划线(常用) overline上划线 line-through删除线-------------重点记:如何加、删下划线(即声明none)

text-indent缩进 2em:缩进当前元素2个文字大小的距离

line-height行间距 上间距=下间距 用标尺量第一行的下沿,到第二行的下沿。

CSS引入样式:

行内样式引入:<p style="color:pink; font-size:20px;">适用于修改小部分样式时,权重高。

内部样式表:单独写<style>里,可以控制一个页面。

外部样式表:需要引入,控制多个页面。<link rel="stylesheet" href="css文件路径">

 

复合选择器:

后代选择器 后代的样式更改  元素1 元素2 。。。{样式声明}

子元素选择器 只对亲儿子(离他最近的)的样式更改 元素1>元素2{样式声明} 

并集选择器 作用于多组声明共同的属性 元素1,元素2{样式声明}

链接伪类选择器 a:link(未点击、访问过) a:visited(点击过的) a:hover(鼠标经过时) a:active(鼠标点击时)

注意按以上顺序love hate(lvha)  项目中,常常先写a的样式,再a:lvha的样式

focus伪类选择器  input:focus{}   input获得光标时设置的样式

 

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

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

相关文章

代码随想录day22 || 77 组合,216 组合总和,17 电话号码字母组合

回溯问题回溯通常用来解决这些问题 组合问题:N个数里面按一定规则找出k个数的集合 切割问题:一个字符串按一定规则有几种切割方式 子集问题:一个N个数的集合里有多少符合条件的子集 排列问题:N个数按一定规则全排列,有几种排列方式 棋盘问题:N皇后,解数独等等回溯的通用…

freemarker实现动态行单元格合并

原文链接:https://www.cnblogs.com/10158wsj/p/11211471.html https://blog.csdn.net/weixin_43667830/article/details/106936546 项目需求:项目中有个需求,需要将一些数据库中的数据根据需求导出,生成一个word,研究了一些技术,其中包括POI、freemaker,对比了一下实现过…

Xbox Game Pass Ultimate one dollar Trial All In One

Xbox Game Pass Ultimate one dollar Trial All In One XGPU $1 美元试用 Xbox Game Pass Ultimate — 14 Day Trial Recurs MonthlyXbox Game Pass Ultimate one dollar Trial All In OneXGPU $1 美元试用Xbox Game Pass Ultimate — 14 Day Trial Recurs Monthly Xbox Game P…

代码静态测试工具 Helix QAC 2024.1版新功能解读

Helix QAC 2024.1改进了对C++20和C23语言特性的支持,并增加了分析使用多个编译器的项目的新功能。此外,Validate增强了对于搜索功能和角色权限的用户体验,并且包括一个新的问题列表的CSV下载选项。此版本还包括对于C/C++的CWE、C的HKMC和MISRA C++:2023合规模块的扩展执行,…

苹果与英伟达公开分手,谷歌 TPU 芯片成为苹果 AI 训练新利器

苹果公司发布论文公开其 AI 模型的训练细节,放弃英伟达GPU而转向选择谷歌TPU芯片。科技巨头们在尖端 AI 训练方面开始寻求更多元化的算力硬件解决方案。北京时间 7 月 30 日,苹果公司发布了一篇研究论文,论文显示苹果公司使用了谷歌开发的 TPU 芯片而非英伟达的 GPU 芯片来训…

三色法GC总结

作用:因并发标记过程中,程序还在跑。对象间的引用会发生变化,可能会导致漏标或错标情况。因此采用三色法,将扫描的各情况用颜色区别出来。 三种颜色 白色:一开始所有对象的颜色都是白色,即未扫描过的对象。 灰色:表示对象已经扫描到了,但是对象所在的引用对象,还未全部…

Dreamforce 24重磅来袭!年度盛会将有何惊喜?

作为Salesforce的旗舰会议,Dreamforce的历史已有20余年之久,是生态系统中的年度亮点。现如今,Dreamforce已经适应了线上受众的需求,通过Salesforce+提供直播和点播的参与方式。近期,Salesforce宣布Dreamforce 24将于9月17日-19日举行,一年一度的科技盛会又要开始Dreamfor…

笔记:从Aurora 8b/10b 到Aurora 64b/66b (三):自定义PHY层收发

相较于8/10来说没那么复杂,需要考虑的情况只有八种; 但是gearbox的控制需要额外的心思:每三十二周期所有操作都需要停止; 这一点在收发都需要注意; RX: 核心思想是利用header做检测,将夹杂在数据流中的控制包滤除掉;module gt_phy_rx (input wire i_rx_cl…

esp32安装circuitpython

安装Thonny https://thonny.org/ 在Thonny中安装circuitpython 在配置解释器中选择circuitython然后点击右下角“安装或更新...“variant这里我选择了 DOIT esp32 Development Board(试过其他的一些个,不知道为什么安装完之后会无限重启,所以最后选择了这个) 烧录完之后,重…

Linux内核学习—— 1内核体系结构

一 内核体系结构 1内核模式与体系结构 2内核中断概括 3进程管理概括 二 内核源码结构 三 内核引导程序 操作系统结构: 用户应用程序 操作系统服务层 内核(文件系统,内存管理,进程管理,驱动管理) 硬件系统 驱动 操作系统工作方式:把做操作系统从用户态切换到内核态(用户应…

设置windows系统下的tomcat开机自启

设置前的准备工作(配置系统环境变量) 新增CATALINA_HOME变量,变量值为tomcat的安装路径在Path中添加: %CATALINA_HOME%\bin结合安装版本问题,分正常安装版本tomcat和免安装tomcat(无service.bat)两种情况。 一、正常安装版本(tomcat安装文件有service.bat文件) 说明:安装…