样式通常存储在样式表中(先定义样式表),再把样式表添加到html元素中

定义CSS样式的方式:

  1. 行内样式(内联样式)

·行内样式仅针对当前标签生效,如果当前的样式不需要复用,可以用行内样式

·优先级高(优先级比内页样式的优先级高,如果同时存在,先显示行内样式)

  1. 内页样式(嵌入样式)

·声明一个样式:在head标签中style中声明

给样式起名:

A:标签选择器(根据标签命名)

B:类选择器


思考题:标签选择器和类选择器哪个优先级高?

声明样式的时候需要用一个英文的“.”,选择样式通过class属性,class属性里不写“.”

C:id选择器(id:在当前页面的唯一标识,不能重复)


声明样式需要一个“#”,对应的元素的id要匹配

  1. 外部样式(推荐)

​编辑

  1. CSS选择器
  1. 标签选择器
  2. 类选择器:一个标签元素是可以选择多个样式,样式名中间用空格隔开
  3. Id选择器
  4. 选中页面上所有的标签(div,p)

(5)选中div里面的p(无论嵌套多少层,都可以找到)(div p)

(6)选中div里面的直接子标签(div>p)


(7)选中紧跟着div的p(div+p)

  1. 选中页面上所有带有type属性的标签([type])

  1. 选中页面上所有带有type=text属性的标签([type=name])

  1. 选中页面上type属性包含某个单词的所有元素([type~=t])

  1. 伪类选择器(link,hover,active,visited)

12选中第几个对应的元素(nth:child())


(13)选中所有被选中的元素(:checked)


CSS层叠样式表

  1. 层叠性:如果样式冲突,遵循就近原则,哪个样式离结构近就执行哪个样式;如果样式不冲突,就不层叠,直接用

  1. 继承性:子标签会继承父标签的某些样式,(文本的颜色、字号、背景颜色等)
  2. 权重(优先级)

优先级:类>标签>id

(1)继承的权重最低

(2)行内样式的权重最高

(3)如果权重相同,就近原则

(4)!Important改变权重(无限大)

CSS常用的单位

  1. px 像素(绝对单位)一个像素代表一个点。
  2. em (相对单位)会参考它的父级元素,设计字体时用的较多。父级元素的字体是16px,要设置元素的字体大小为2em,当前元素的字体大小就是32px。
  3. rem (相对单位)由页面决定。当我们改变了浏览器的字号设置时,页面的字号也会随之发生变化。应用在老人版电子设备。
  4. % 百分比(相对单位) 相对于父级元素的比例。

2022-7-10 css 第七组 刘昀航的更多相关文章

  1. 2022-7-12 javascript(2) 第七组 刘昀航

    @ 目录 2022-7-12学习 第七组 刘昀航 前情提要 一.for循环 二.for in循环 三.while 和 do...while循环 1.while do... while 四.内置函数 五 ...

  2. 2022-7-9 html 第七组 刘昀航

    ​ 一.基础认知 1.1 认识网页 网页的组成: 文字.图片.音频.视频.超链接 网页背后的本质:前端程序员写的代码 前端的代码通过什么软件转换成用户眼中的页面:浏览器转化(解析和渲染) 1.2 5大 ...

  3. 2022-7-14 java_2 第七组 刘昀航

    @ 目录 一.java约定规范 1.关于建包 2.控制台输入(Scanner) 关于Scanner的bug 计算器小练习: 二. 1.数组 建立数组的三种方式: 数据类型的初始值: 2.二维数组 使用 ...

  4. 2022-7-13 java_1 第七组 刘昀航

    @ 目录 前言 一.一些基本的指令 二.java 1.java的三个版本 2.java特点 3.运行一个java程序 三.java的数据类型 1.java基本数据类型 2.强制转换的原理 3.八种基本 ...

  5. 2022-7-11 javascript学习 第七组 刘昀航

    ​ JavaScript是什么? 编程语言,脚本语言,依赖于某种容器来运行. JS是运行在浏览器上的,可以帮助我们去控制页面. Vue.js   react.js    jquery.js    an ...

  6. HTML+CSS学习笔记 (10) - CSS格式化排版

    文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...

  7. 使用 IntraWeb (10) - CSS

    IW 会把大多数的视觉属性转换为 CSS; 我们主动使用 CSS 要分两步: 第一步: {通过窗体的 StyleSheet 属性指定要链接的 CSS 文件} procedure TIWForm1.IW ...

  8. .net程序员的android studio 初体验 (环境设置2022年10月)

      很久以前用DevExtreme写的一个Hybird APP要添加蓝牙打印功能,但是用来打包APP的phonegap被adobe关闭了,所以,只能自己用cordova去打包安卓APP,不得已,研究了 ...

  9. 8.10 CSS知识点3

    7.属性选择符 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素 E[att="val"] CSS2 选择具有att属性值等于val的E元素 E[att~=& ...

随机推荐

  1. HttpServletResponse & HttpServletRequest

    web服务器接收到客户端的http请求,针对这个请求,分别创建一个代表请求的HttpServletRequest对象,代表响应的一个HttpServletResponse: 如果要获取客户端请求过来的 ...

  2. Ubuntu环境Docker+K8s+Dashboard的安装配置(无坑亲测)

    安装之前的准备: 安装docker 使用国内 daocloud 一键安装命令: curl -sSL https://get.daocloud.io/docker | sh 直接从dockerhub下载 ...

  3. Linux-SUID提权

    前言 最近打靶场的时候最后都会涉及到提权,所以想着总结一下. SUID提权原理 SUID(设置用户ID)是赋予文件的一种权限,它会出现在文件拥有者权限的执行位上,具有这种权限的文件会在其执行时,使调用 ...

  4. 虚拟机VMware 安装centos、常规配置、共享文件等

    安装centos7[通过vm来安装运行centos7] 一.准备工作 1.centos7 的安装镜像下载链接:http://isoredirect.centos.org/centos/7/isos/x ...

  5. 《转载》python/人工智能/Tensorflow/自然语言处理/计算机视觉/机器学习学习资源分享

    本次分享一部分python/人工智能/Tensorflow/自然语言处理/计算机视觉/机器学习的学习资源,也是一些比较基础的,如果大家有看过网易云课堂的吴恩达的入门课程,在看这些视频还是一个很不错的提 ...

  6. cobalt strike4.4的下载和使用

    cobalt strike4.4的下载和使用 cobalt strike4.4下载和汉化 首先下载cobaltstrike.jar yunzhongzhuan.com/#sharefile=cZ5vo ...

  7. pyhon对excel的xls与xlsx的读取,写入

    import shutilimport osfrom openpyxl import load_workbookfrom xlutils.copy import copyimport win32com ...

  8. 渗透:aircrack-ng

    ircrack- NG是一个完整的工具来评估Wi-Fi网络安全套件,功能包括: 监控:数据包捕获和导出数据到文本文件,以供第三方工具进一步处理. 攻击:通过数据包注入回放攻击,去认证,伪造接入点等. ...

  9. Vue关闭语法检测

    为什么?为了防止写到一半保存,报错.关闭默认的语法检测 新建vue.config.js 1.vue.config.js的作用是允许你修改脚手架中wekpack的默认参数. 2.vue.config.j ...

  10. 参与 2022 第二季度 Flutter 开发者调查

    2022 Google I/O 大会正式落下帷幕,Flutter 作为 14 个开发者产品和平台中的一款,吸引了来自全球的很多开发者们的关注.随着全国很多地方已经进入夏季,Flutter 今年第二季度 ...