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~=& ...
随机推荐
- HttpServletResponse & HttpServletRequest
web服务器接收到客户端的http请求,针对这个请求,分别创建一个代表请求的HttpServletRequest对象,代表响应的一个HttpServletResponse: 如果要获取客户端请求过来的 ...
- Ubuntu环境Docker+K8s+Dashboard的安装配置(无坑亲测)
安装之前的准备: 安装docker 使用国内 daocloud 一键安装命令: curl -sSL https://get.daocloud.io/docker | sh 直接从dockerhub下载 ...
- Linux-SUID提权
前言 最近打靶场的时候最后都会涉及到提权,所以想着总结一下. SUID提权原理 SUID(设置用户ID)是赋予文件的一种权限,它会出现在文件拥有者权限的执行位上,具有这种权限的文件会在其执行时,使调用 ...
- 虚拟机VMware 安装centos、常规配置、共享文件等
安装centos7[通过vm来安装运行centos7] 一.准备工作 1.centos7 的安装镜像下载链接:http://isoredirect.centos.org/centos/7/isos/x ...
- 《转载》python/人工智能/Tensorflow/自然语言处理/计算机视觉/机器学习学习资源分享
本次分享一部分python/人工智能/Tensorflow/自然语言处理/计算机视觉/机器学习的学习资源,也是一些比较基础的,如果大家有看过网易云课堂的吴恩达的入门课程,在看这些视频还是一个很不错的提 ...
- cobalt strike4.4的下载和使用
cobalt strike4.4的下载和使用 cobalt strike4.4下载和汉化 首先下载cobaltstrike.jar yunzhongzhuan.com/#sharefile=cZ5vo ...
- pyhon对excel的xls与xlsx的读取,写入
import shutilimport osfrom openpyxl import load_workbookfrom xlutils.copy import copyimport win32com ...
- 渗透:aircrack-ng
ircrack- NG是一个完整的工具来评估Wi-Fi网络安全套件,功能包括: 监控:数据包捕获和导出数据到文本文件,以供第三方工具进一步处理. 攻击:通过数据包注入回放攻击,去认证,伪造接入点等. ...
- Vue关闭语法检测
为什么?为了防止写到一半保存,报错.关闭默认的语法检测 新建vue.config.js 1.vue.config.js的作用是允许你修改脚手架中wekpack的默认参数. 2.vue.config.j ...
- 参与 2022 第二季度 Flutter 开发者调查
2022 Google I/O 大会正式落下帷幕,Flutter 作为 14 个开发者产品和平台中的一款,吸引了来自全球的很多开发者们的关注.随着全国很多地方已经进入夏季,Flutter 今年第二季度 ...