2022-7-10 css 第七组 刘昀航
样式通常存储在样式表中(先定义样式表),再把样式表添加到html元素中
定义CSS样式的方式:
- 行内样式(内联样式)
·行内样式仅针对当前标签生效,如果当前的样式不需要复用,可以用行内样式
·优先级高(优先级比内页样式的优先级高,如果同时存在,先显示行内样式)
- 内页样式(嵌入样式)
·声明一个样式:在head标签中style中声明
给样式起名:
A:标签选择器(根据标签命名)
B:类选择器
思考题:标签选择器和类选择器哪个优先级高?
声明样式的时候需要用一个英文的“.”,选择样式通过class属性,class属性里不写“.”
C:id选择器(id:在当前页面的唯一标识,不能重复)
声明样式需要一个“#”,对应的元素的id要匹配
- 外部样式(推荐)
编辑
- CSS选择器
- 标签选择器
- 类选择器:一个标签元素是可以选择多个样式,样式名中间用空格隔开
- Id选择器
- 选中页面上所有的标签(div,p)
(5)选中div里面的p(无论嵌套多少层,都可以找到)(div p)
(6)选中div里面的直接子标签(div>p)
(7)选中紧跟着div的p(div+p)
- 选中页面上所有带有type属性的标签([type])
- 选中页面上所有带有type=text属性的标签([type=name])
- 选中页面上type属性包含某个单词的所有元素([type~=t])
- 伪类选择器(link,hover,active,visited)
(12)选中第几个对应的元素(nth:child())
(13)选中所有被选中的元素(:checked)
CSS层叠样式表
- 层叠性:如果样式冲突,遵循就近原则,哪个样式离结构近就执行哪个样式;如果样式不冲突,就不层叠,直接用
- 继承性:子标签会继承父标签的某些样式,(文本的颜色、字号、背景颜色等)
- 权重(优先级):
优先级:类>标签>id
(1)继承的权重最低
(2)行内样式的权重最高
(3)如果权重相同,就近原则
(4)!Important改变权重(无限大)
CSS常用的单位
- px 像素(绝对单位)一个像素代表一个点。
- em (相对单位)会参考它的父级元素,设计字体时用的较多。父级元素的字体是16px,要设置元素的字体大小为2em,当前元素的字体大小就是32px。
- rem (相对单位)由页面决定。当我们改变了浏览器的字号设置时,页面的字号也会随之发生变化。应用在老人版电子设备。
- % 百分比(相对单位) 相对于父级元素的比例。
2022-7-10 css 第七组 刘昀航的更多相关文章
- 2022-7-12 javascript(2) 第七组 刘昀航
@ 目录 2022-7-12学习 第七组 刘昀航 前情提要 一.for循环 二.for in循环 三.while 和 do...while循环 1.while do... while 四.内置函数 五 ...
- 2022-7-9 html 第七组 刘昀航
一.基础认知 1.1 认识网页 网页的组成: 文字.图片.音频.视频.超链接 网页背后的本质:前端程序员写的代码 前端的代码通过什么软件转换成用户眼中的页面:浏览器转化(解析和渲染) 1.2 5大 ...
- 2022-7-14 java_2 第七组 刘昀航
@ 目录 一.java约定规范 1.关于建包 2.控制台输入(Scanner) 关于Scanner的bug 计算器小练习: 二. 1.数组 建立数组的三种方式: 数据类型的初始值: 2.二维数组 使用 ...
- 2022-7-13 java_1 第七组 刘昀航
@ 目录 前言 一.一些基本的指令 二.java 1.java的三个版本 2.java特点 3.运行一个java程序 三.java的数据类型 1.java基本数据类型 2.强制转换的原理 3.八种基本 ...
- 2022-7-11 javascript学习 第七组 刘昀航
JavaScript是什么? 编程语言,脚本语言,依赖于某种容器来运行. JS是运行在浏览器上的,可以帮助我们去控制页面. Vue.js react.js jquery.js an ...
- HTML+CSS学习笔记 (10) - CSS格式化排版
文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...
- 使用 IntraWeb (10) - CSS
IW 会把大多数的视觉属性转换为 CSS; 我们主动使用 CSS 要分两步: 第一步: {通过窗体的 StyleSheet 属性指定要链接的 CSS 文件} procedure TIWForm1.IW ...
- .net程序员的android studio 初体验 (环境设置2022年10月)
很久以前用DevExtreme写的一个Hybird APP要添加蓝牙打印功能,但是用来打包APP的phonegap被adobe关闭了,所以,只能自己用cordova去打包安卓APP,不得已,研究了 ...
- 8.10 CSS知识点3
7.属性选择符 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素 E[att="val"] CSS2 选择具有att属性值等于val的E元素 E[att~=& ...
随机推荐
- [笔记] Slope Trick:解决一类凸代价函数的DP优化问题
原理 当序列 DP 的转移代价函数满足 连续: 凸函数: 分段线性函数. 时,可以通过记录分段函数的最右一段 \(f_r(x)\) 以及其分段点 \(L\) 实现快速维护代价的效果. 如:$ f(x) ...
- 操作系统深度研究(75页PPT)
上一篇:命令行版的斗地主你玩过没? 内容覆盖操作系统基本概念.分类.关键技术,体系架构,发展历程和主流国产操作系统厂商分析. 文中报告节选自兴业证券经济与金融研究院已公开发布研究报告,具体报告内容及相 ...
- kali linux安装后乱码的解决方法
操作系统是5.3 解决方法是在终端执行命令: sudo apt-get install ttf-wqy-zenhei
- mysql的命令二
1.插入数据 格式一:insert into table_name valuse (字段1,字段2): insert test1 values ('wangsan',22,'male'); 格式二:i ...
- 【Java8新特性】Stream(分类+案例)
一.Stream概述 什么是Stream? Stream是Java8引入的全新概念,它用来处理集合中的数据,可以让你以一种声明的方式处理数据. Stream 使用一种类似用 SQL 语句从数据库查询数 ...
- 106_Power Pivot之HR入离调转、在职、离职率相关指标
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 之前有帮公司HR做了些员工入离调转.在职.人工成本分析等(体量:4000人左右).在和其他朋友交流的时候得知,貌 ...
- 基于bat脚本的前端发布流程设计与实现
写在前面 本文大致向读者介绍了楼下几点知识,希望在编写bat脚本时候能够帮到读者,如果能够有所启迪,那就更好了. bat脚本的相关知识和案例编写 用windows自带的命令压缩文件 windows和l ...
- 最简单的离散概率分布,伯努利分布 《考研概率论学习之我见》 -by zobol
上文讲了离散型随机变量的分布,我们从最简单的离散型分布伯努利分布讲起,伯努利分布很简单,但是在现实生活中使用的很频繁.很多从事体力工作的人,在生活中也是经常自觉地"发现"伯努利分布 ...
- IE让我首次遭受了社会的毒打
2022年6月15日,微软终止对IE的支持,自此IE走入历史,可以说这是一个时代的终结. 自己在 2011 年刚从业时,IE 在国内的市场占有率可是遥遥领先的,下图来自于 StatCounter 网站 ...
- 关于Vue移动端框架(Muse-UI)的使用(说明书,针对不愿看文档的童鞋)
一.安装 1.npm安装 npm i muse-ui -S 或者 CDN安装 <link rel="stylesheet" href="https://unpkg. ...