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~=& ...
随机推荐
- 如何改变函数内部 this 的指向
一.函数内 this 的指向 1. this 的指向是当调用函数时确定的,调用的方式不同,this 的指向也就不同. 1.1 this 一般是指向调用者. 函数类型 this 的指向 普通函数 Win ...
- [题解] XOR Problem
题目大意 对于一个整数序列 \(a_{0...5}\),我们定义它的价值为: \(f(a)=max(|a_0-a_3|,|a_1-a_4|,|a_2-a_5|)\oplus a_0 \oplus a_ ...
- 论文阅读 Dynamic Graph Representation Learning Via Self-Attention Networks
4 Dynamic Graph Representation Learning Via Self-Attention Networks link:https://arxiv.org/abs/1812. ...
- HCNP Routing&Switching之RSTP
前文我们了解了vlan优化,vlan聚合技术super vlan相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16208997.html:今天我们来聊 ...
- Redisson报错
org.redisson.client.RedisResponseTimeoutException: Redis server response timeout (3000 ms) occured a ...
- (原创)[C#] MEF 主程序与插件加载不同版本的DLL
一.前言 MEF(Managed Extensibility Framework),是轻量级的插件框架.使用简单,功能强大.详细介绍见MSDN,本文不再赘述. 在使用MEF时,会遇到这样一种场景: 主 ...
- MyBatis热部署
代码 import java.io.IOException; import java.lang.reflect.Field; import java.util.HashMap; import java ...
- 基于 BaGet 搭建 Nuget 服务器
1 前言 1.1 BaGet 介绍 BaGet 是一个轻量级的,开源的,跨平台的 Nuget 和 symbol 服务器. 1.2 环境介绍 操作系统:CentOS 7 使用 Docker 安装 2 安 ...
- 用 notion 管理信用卡与花呗
用 notion 管理信用卡与花呗 Notion原文,排版更佳 概述 不需要提醒功能和安卓用户可以忽略Scriptable和快捷指令 app的设置 Notion 建立信用卡表格,录入信用卡基本信息,自 ...
- 【docker】windows 10专业版安装docker
一.开启Hyper-V功能 二.安装 Docker Desktop for Windows(下载地址)[https://www.docker.com/get-started/] 三.安装 Window ...